タグクラウドってなに!? その活用法は!?

 タグクラウドってなに!?と思われる方が、私も含め大半だと思いますので、まずは、その説明をWikipediaータグクラウドーより引用しましたのでお読みください。


 タグ・クラウド (tag cloud) はウェブサイト上で使用されるタグの視覚的記述を指す。

 直訳すると「タグの雲」を意味し、雲のように表示されるタグ文字列が大小さまざまに浮かんでいるように見えることからこの名前が付けられた。

 概してタグはアルファベット順にリスト化され、タグの頻出度はフォント・サイズや色によって表示される。したがって、アルファベットと人気度数の両方でタグを見つけることが可能となる。

 Wikipediaータグクラウドーより引用


 まあ、色々な使い方ができるようですが、そもそもブログというものは、新しい情報(記事)が更新されると、古い情報(記事)は、段々と下の方へ行き、探すのが困難になる欠点があります。


 このブログも同様で記事情報の更新頻度が高くなればなるほど、見逃してしまうケースが出てきます。


 そこで、この公式ブログではそのブログの欠点を補うことに重点を置き、トップページの一番目立つ位置に「最新記事」を配置、その上のメニューバーには「カテゴリ」毎に分類されたものと、「月別アーカイブ」という月ごとに分類されたものを表示できるように工夫しました。


 それでも探し出せない方は、向かって右側の「検索フォーム」を試してみてください、それでも駄目ならメニューバーの一番左にある「サイトマップ」に全記事のタイトルが載ってますので、上から下まで探せば、たいていお探しの記事に当たると思います。


 では、なぜ、「タグクラウド」を置いたのか!?ですが、この多摩市剣道連盟公式ブログとしてのタグクラウドの使い方は、主として、カテゴリのサブ的役割として活用していきたいと考えています。


 例えば、カテゴリ別ですと、皆さんの欲しい情報は、大方「お知らせ」に分類されます。「お知らせ」というカテゴリの中には、審査会、大会、講習会、合同稽古会等々の情報が含まれています。そこで、タグを使い、「お知らせ」の中の「審査部」とか、「お知らせ」の中の「派遣強化部」とかいう使い方をすることにより、会員各位のみならず、担当者の責任分担も明確になると考えています。


 一番の問題は、管理者の私が記事に対して、適材適所のタグを付けることが果たしてできるのか!?だと思われます。まあー不慣れな初心者ですので、1年くらいかけて役割分担を見極めて行きたいと思います。不適当なタグがあればご遠慮なく、お知らせください。

[ 2011.02.22 18:11 ] 管理人雑記 | TB(0) | CM(0)

右カラムの文字サイズを変更

 以前、「テンプレートを3カラムから2カラムへ変更」という記事を書きましたが、このブログは、3カラムから2カラムへ変更し、向かって右側に記事本文、左側にプラグインを設置しています。


 プラグインを置いている左側の文字サイズは、いままで、記事より少し小さい文字サイズに設定していましたが、年のせいか、読むのが厳しくなってきましたので、記事と同じ大きさの文字サイズに変更することとしました。


▼【修正前】

/** ▼ メニューブロック (プラグインカテゴリ1&2共通) ▼ */
/* メニュータイトル */
.menu_title {
/* ----------------------------------------------------- */
    color:#cc0000;             /* メニュータイトルの色 */
/* ----------------------------------------------------- */
    background: #ffffff;     /* メニュータイトル背景 */
/* ----------------------------------------------------- */
    font-size: 0.8em;
    font-weight: bold;
    padding: 0.3em 1em;
    margin: 0;
}

/* メニューコンテンツ */
.menu_cont {
/* ----------------------------------------------------- */
    color: #666666;      /* メニューコンテンツの文字の色 */
/* ----------------------------------------------------- */
    font-size: 75%;  /* メニューコンテンツの文字の大きさ */
/* ----------------------------------------------------- */
    margin: 0;
    padding: 0 1em;
    line-height: 130%;
}


▼【修正後】

/** ▼ メニューブロック (プラグインカテゴリ1&2共通) ▼ */
/* メニュータイトル */
.menu_title {
/* ----------------------------------------------------- */
    color:#cc0000;             /* メニュータイトルの色 */
/* ----------------------------------------------------- */
    background: #ffffff;     /* メニュータイトル背景 */
/* ----------------------------------------------------- */
    font-size: 1em;
    font-weight: bold;
    padding: 0.3em 1em;
    margin: 0;
}

/* メニューコンテンツ */
.menu_cont {
/* ----------------------------------------------------- */
    color: #666666;      /* メニューコンテンツの文字の色 */
/* ----------------------------------------------------- */
    font-size: 90%;  /* メニューコンテンツの文字の大きさ */
/* ----------------------------------------------------- */
    margin: 0;
    padding: 0 1em;
    line-height: 130%;
}


 ▲上記の緑字の2行の数値の書き換えを行えばOKです。


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.31 20:07 ] 管理人雑記 | TB(0) | CM(0)

リストマークを画像に変更

 今日(2011.01.31)は、リストマークを画像に変更しました。初期設定では「・」黒丸で表示されていましたが、それを赤い矢印画像に変更します。


▼比較写真はこんな感じです。わかり難いので変更部分に色をつけています。


リストマークを画像に変更


▼【CSS追記箇所】

/* その他各種設定 */
p {
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0 0 0 1em;
    list-style-image: url("http://~/xxxx.gif");
    ★xxxxの箇所は画像URLに変更してください
}
li {
    margin: 0 0 3px 0;
    padding: 0;
}


 このままですと、設置した横メニューバーにも赤い矢印画像が表示されてしまいます。それを消す(表示させない)ようにもう1つCSSに追記します。


▼【CSS追記箇所】

#menu_bar li {
list-style-type:none;
list-style-image:none;
float:left;
line-height:30px; /* 高さ */
margin:0px;
padding:0px;
}


 これで終わりなのですが、このままだと、記事内のリストも赤い矢印が表示されます。チョット目立ち過ぎでしたので、記事内に表示されるリストマークは別のものにしたいと思います。


▼変更後のリストマークはこんな感じです。


記事内のリストマークを変更


▼【下の全文をCSSの末尾の方に追記します】

/* 記事リストマーク */
.article ul {
    list-style-image: url("http://~/xxxx.gif");
    ★xxxxの箇所は画像URLに変更してください
}
.article li {
    margin: 0 0 0 40px;
    padding: 0;
}


今日は、ここまでにします(^。^)y-.。o○


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.31 19:47 ] 管理人雑記 | TB(0) | CM(0)

引用(囲み文)のデザインを変更

 今日(2011.01.31)は、通常、別のサイトや文献等の文用を引用する場合に使われる「囲み文」のデザインを変更しました。


▼比較写真はこんな感じです。


引用(囲み文)のデザイン変更比較


▼【修正前】

/* 引用部分 */
blockquote {
margin:2px;
padding:5px;
background:#f0f0f0; /* 背景 */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
}


▼【修正後】

/* 引用部分 */
blockquote {
margin:2px;
padding:5px;
background:#f5f5dc; /* 背景 */
border-top: #cccccc 1px dashed; /* 枠線(上) */
border-left: #cccccc 1px dashed; /* 枠線(左) */
border-right: #cccccc 6px solid; /* 枠線(右) */
border-bottom: #cccccc 6px solid; /* 枠線(下) */
}


 前回、“記事タイトルの前に画像を配置”でも同じようなことを書きましたが、変更点は、背景を黄色っぽく“#f5f5dc”し、囲み線の上と左を点線“dashed”に下線と右線は実線“solid”として太さを“6px”と太くしたことにより、少し立体的になったと思います!?


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.31 18:26 ] 管理人雑記 | TB(0) | CM(0)

記事タイトルの前に画像を配置

 以前、“記事タイトルの見せ方(リンク色・レイアウト)を変更”という記事を書きましたが、今回はその記事タイトルの先頭に画像を配置して、更に記事タイトルを囲む線の色と太さを変更し、少し立体的に見せてみました。


▼比較写真はこんな感じです。


記事タイトルの見せ方


 先ずは、記事タイトルの先頭に画像を配置します。
 HTMLのソースに緑字の箇所を追記してください。


▼【追記箇所】


<!--▼ エントリー(記事)▼-->
<!--topentry-->
<h3><img src="http://~/xxxx.jpg" align=absmiddle /> ★xxxxの箇所は画像URLに変更してください
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="<%topentry_title>の記事を参照"><%topentry_title>&nbsp;</a></h3>
<div class="article">
<%topentry_body>


 記事タイトル先頭の画像と文字列配置について
 中央揃えにする場合は:align=absmiddle
 下端揃えにする場合は:align=absbottom
 としてください。


 次は、CSSのソースを書き換えて、記事タイトルを囲む線を立体的にみせることにします。
 これは以前“記事タイトルの見せ方(リンク色・レイアウト)を変更”という記事に書きましたので、今回は変更した箇所のみ緑字にして、【修正後】のソースのみ以下に書いておきます。


▼【修正後】

/* エントリー(記事)タイトル */
h3 a:link,h3 a:visited,h3 a:active,h3 {
/* ----------------------------------------------------- */
color:#cc0000; /* 記事タイトルの色 */
/* ----------------------------------------------------- */
text-decoration:none;
}
h3 a:hover{
/* ----------------------------------------------------- */
color:#cccc99; /* 記事タイトルの色(マウスが乗った時) */
/* ----------------------------------------------------- */
text-decoration:none;
}

h3 {
/* ----------------------------------------------------- */
background: #ffffff; /* 記事タイトル背景の色 */
/* ----------------------------------------------------- */
border-top: #cccccc 1px solid; /* 飾りの色(上) */
border-left: #cccccc 1px solid; /* 飾りの色(左) */
border-right: #cccccc 6px solid; /* 飾りの色(右) */
border-bottom: #cccccc 6px solid; /* 飾りの色(下) */

/* ----------------------------------------------------- */
font-size: 1em; /* 記事タイトル文字の大きさ */
/* ----------------------------------------------------- */
text-decoration:none;
padding: 0.3em 0.3em 0.3em 0.3em;
margin: 0;
}


 記事を囲む線(飾りの色と書かれている箇所)の下線と右線の太さを“6px”と太くしたことにより、少し立体的になったと思いますが如何でしょう!?


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.30 21:51 ] 管理人雑記 | TB(0) | CM(0)

コピーライト表示を画像に変更

 ヘッターの「コピーライト」表示を目立つようにするため、テキスト文字から画像に変更してみました。また、その下に表示されている「FC2の著作権表示・広告等」消す事のできないリンク表示の色を少し変えました。


▼比較写真はこんな感じです。


フッターのコピーライト表示を画像に変更


 先ずは、HTMLのソースを書き換え、クレジットを画像にします。


▼【修正前】


<!--▼▼▼▼ フッター( FC2 コピーライト )▼▼▼▼-->
<!-- ※ FC2の著作権表示・広告等は消せません -->
<tr><td id="footer">

<p>copyright © <%now_year> <%blog_name> all rights reserved.</p>
<%ad>&nbsp;&nbsp;<%ad2>
Benri-navi by <a href="http://myhurt.blog11.fc2.com/" target="_blank">myhurt</a>
Template by <a href="http://10plate.blog44.fc2.com/" target="_blank">FC2ブログのテンプレート工房</a>
</td></tr>
<!-- ※ FC2の著作権表示・広告等は消せません -->
<!--▲▲▲▲ フッター( FC2 コピーライト )▲▲▲▲-->


▼【修正後】


<!--▼▼▼▼ フッター( FC2 コピーライト )▼▼▼▼-->
<!-- ※ FC2の著作権表示・広告等は消せません -->
<tr><td id="footer">

<p><img src="http://~/xxxx.jpg" border="0" /></p> ★xxxxの箇所は画像URLに変更してください
<%ad>&nbsp;&nbsp;<%ad2>
Benri-navi by <a href="http://myhurt.blog11.fc2.com/" target="_blank">myhurt</a>
Template by <a href="http://10plate.blog44.fc2.com/" target="_blank">FC2ブログのテンプレート工房</a>
</td></tr>
<!-- ※ FC2の著作権表示・広告等は消せません -->
<!--▲▲▲▲ フッター( FC2 コピーライト )▲▲▲▲-->


 次は、CSSのソースを書き換えて「FC2の著作権表示・広告等」の表示色を変更します。
 これは以前“フッター(背景を画像へ)を変更”という記事に書きましたので、今回は変更した箇所のみ緑字にして、【修正後】のソースのみ以下に書いておきます。


▼【修正後】

/**************************************** ▼ フッター ▼ */
#footer {
/* ----------------------------------------------------- */
background-image: url("http://~/xxxx.jpg"); ★xxxxの箇所は画像URLに変更してください
height: 70px;
background-repeat: no-repeat;
background-position: center; /* フッターの背景画像 */
/* ----------------------------------------------------- */
color: #cccccc; /* フッターの文字の色 */
/* ----------------------------------------------------- */
font-size: 70%;
padding: 5px;
text-align: center;
line-height: 150%;
}
#footer a{
/* ----------------------------------------------------- */
color: #cccccc; /* フッターのリンクの色 */
/* ----------------------------------------------------- */
}
/**************************************** ▲ フッター ▲ */


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.30 20:25 ] 管理人雑記 | TB(0) | CM(0)

メニューバーを追加

 前回の記事でも書きましたが、まだ、納得できない部分を残しながらもタイムリミットの関係で次へ進みます。昨日で概ねカスタマイズは終了しました(させました)。


 今日(2011.01.30)は、このブログのヘッダー部分のすぐ下に「メニュー」を追加したいと思います。これは、FC2ブログのテンプレート工房さんの記事“横メニューバーをブログタイトル下に表示する”の通り行いました。


 追記箇所は以下の通りです。


 先ずは、HTMLのソースに追記します。


▼【追記前】


<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">

<!-- ここに追記 -->

<table style="margin: 1em; <!-- ここに追記 -->" border="0" cellspacing="0">


 以下のように緑字の箇所を追記しました。


▼【追記後】


<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">
<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="xxx">xxxxx</a></li>
<li><a href="xxx">xxxxx</a></li>
<li><a href="xxx">xxxxx</a></li>
</ul>
<!--▲ メニューバー ▲-->

<table style="margin: 1em; clear:left" border="0" cellspacing="0">


 上記では<li><a href="xxx">xxxxx</a></li>の記述を3行しか書いてませんが、この記述(行数)を増やす事によってメニューの数が増えたり減ったりします。xxxはリンクしたいURL、xxxxxxはメニューの名称を書いてください。


 次はCSSのソースの末尾に以下の記述を追記します。


 ▼【追記のソース】


/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:30px; /* 高さ */
background-color:#c0c0c0; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:0px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:30px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #f5f5f5; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#c0c0c0; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#cc0000; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */


 上記に書いてある追記のソースは、このブログ用のものです。サイズや色はお好みで変更してください。


▼完成したメニューバーはこんな感じです。


完成したフッター画像


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.30 16:14 ] 管理人雑記 | TB(0) | CM(0)

ブラウザの違いによって見え方が違ってくる!?

 先程、このブログのカスタマイズは概ね終了なんて余裕のコメントを書いてしまった“罰”なのか!?


 トラブルの発生ですorz


 小職(管理人)は、MacBookProというパソコンでこのブログを作成し、カスタマイズの状況はFirefoxというブラウザで確認しています。


 前回の記事“ブログタイトルを画像に変更”をご覧になればわかりますが、私が確認用に使っていたブラウザでは、掲載写真のように「ヘッダー」と「フッター」は問題なく、表示されていたのですが、別のパソコンで別のブラウザを使ってこのブログを確認したところいらない余白が表示されていました。


▼下の写真は、国内で一番多く使われているブラウザのInternet Explorerで見たものです(わかり易くするため、余白は赤で示しています)。


フッターをIEで見たところ


▼比較して見るとこんな感じです。


FierfoxとIEとの見え方の違い


 写真はありませんが、ヘッダーも同じようにいらない余白が表示されていました。


 私にとっては、いくらなんでもこの余白は“ゆるせないレベル”、自力で解決を試みました。結果、この方法がはたして正しいのか!? 私のようなシロウトでは判断がつきませんが、以下のようにソースを書き換えると余白を消すことができました。


 まずは、ヘッダーのCSSを書き換えます。


▼【修正前】

/* ヘッダーレイアウト */
#header {
/* ----------------------------------------------------- */
background-image: url("http://~/header.jpg"); ★画像URLに変更してください。
height: 180px;
background-repeat: no-repeat;
background-position: center; /* ヘッダーの背景画像 */
/* ----------------------------------------------------- */
text-align: left;
}


▼【修正後】

/* ヘッダーレイアウト */
#header {
/* ----------------------------------------------------- */
background-image: url("http://~/header.jpg"); ★画像URLに変更してください。
height: 175px;
background-repeat: no-repeat;
background-position: center; /* ヘッダーの背景画像 */
/* ----------------------------------------------------- */
text-align: left;
}


 次にフッターのCSSを書き換えます。


▼【修正前】

/* ----------------------------------------------------- */
background-image: url("http://~/footer.jpg"); ★画像URLに変更してください
height: 80px;
background-repeat: no-repeat;
background-position: center; /* フッターの背景画像 */
/* ----------------------------------------------------- */


▼【修正後】

/* ----------------------------------------------------- */
background-image: url("http://~/footer.jpg"); ★画像URLに変更してください
height: 70px;
background-repeat: no-repeat;
background-position: center; /* フッターの背景画像 */
/* ----------------------------------------------------- */


 もう、おわかりだと思いますが、修正したのは、ヘッダーとフッターの高さ height: XXpx; の数字を少し下げただけです。


 でも、本来、私の作った背景画像のサイズは、ヘッダーが790px X 180pxで、フッターが790px X 80pxなので、修正前の書き方の方が正しいように思えてなりません。


 しかし、ここで歩みを止めると間に合わなくなりそうなので、深く考え込まずに進む事にしました。


 もし、おわかりの方がいらっしゃいましたら正しい解決方法も含めコメントをいただけるとありがたいです。宜しくお願いします m(_ _)m

[ 2011.01.29 14:37 ] 管理人雑記 | TB(0) | CM(0)

ブログタイトルを画像に変更

 この作業が終われば、大枠のカスタマイズは「完成」です。ラストスパートをかけます^^


 以前の記事で書きました「ブログタイトルの画像を作成」 で作った“ロゴマーク!?”的なメイン画像をヘッダーに配置します。


 この作業は、“CSS”の書き換えではなく、“HTML”の方を書き換えます。


▼【修正前】

<!--▼▼▼▼ ヘッダー(タイトル部分)▼▼▼▼-->
<tr><td id="header">

<h1><a href="<%url>" title="<%blog_name> トップページへ"><%blog_name></a></h1>
<h2><%introduction></h2>

</td></tr>
<!--▲▲▲▲ ヘッダー(タイトル部分)▲▲▲▲-->


★緑字の1行を以下のように書き換えます。


<!--▼▼▼▼ ヘッダー(タイトル部分)▼▼▼▼-->
<tr><td id="header">

<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="http://~/top-banner.gif" border="0" /></a></h1> ★画像URL変更してください。
<h2><%introduction></h2>

</td></tr>
<!--▲▲▲▲ ヘッダー(タイトル部分)▲▲▲▲-->


 これで、ブログタイトルが画像に置き換わりましたが、背景画像とのバランスが悪いので、背景画像に合わせて、ブログタイトル画像の位置調整をしたいと思います。


 今度は、“HTML”ではなく、“CSS”の方に以下のソースを追加します。
 追記する場所は一番最後で良いと思います。

h1 {
margin-top: 20px; /* 上の余白 */
margin-left: 50px; /* 左の余白 */
margin-right: 0px; /* 右の余白 */
margin-bottom: 0px; /* 下の余白 */
}


 以前の記事「記事タイトルの見せ方(リンク色・レイアウト)を変更」で書きました“border-xxx”と考え方は同じです。


 “margin-xxx”と書かれていますが、
 ■“margin-top”は、上余白
 ■“margin-left”は、左余白
 ■“margin-right”は、右余白
 ■“margin-bottom”は、下余白
 を意味します。


 このブログでは、h1の場所に置き換えた「画像」の位置を上から20pxの余白を作り、左は50pxの余白をとるように設定しています。実際に表示されるブラウザをチェックしながら何回かやってみた方が良いと思います。


▼完成(ブログタイトルを画像に)したヘッダーは、こんな感じです。

完成したフッター画像


 これで、概ねカスタマイズは終了です(^。^)y-.。o○


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.29 13:22 ] 管理人雑記 | TB(0) | CM(0)

ヘッダー(タイトル部)を変更 その2

 今日(2011.01.29)は、気合いを入れて朝からこれに没頭しますo(^▽^)o


 前回の「ヘッダー(タイトル部)の変更」という記事の修正後の状態からスタートさせます。


▼【修正後】2011.01.26現在

/**************************** ▼ ヘッダー(タイトル部) ▼ */
/* ヘッダーレイアウト */
#header {
/* ----------------------------------------------------- */
background: #ffffff; /* ヘッダー背景の色 */
/* ----------------------------------------------------- */
text-align: left;
}
/* サイトタイトル */
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {
/* ----------------------------------------------------- */
color:#cc000000; /* タイトルの色 */
/* ----------------------------------------------------- */
text-decoration:none;
}
h1 {
/* ----------------------------------------------------- */
font-size: 1.2em; /* タイトルの大きさ */
/* ----------------------------------------------------- */
text-decoration:none;
margin: 10px 30px;
}
/* サブタイトル(サイト説明) */
h2 {
/* ----------------------------------------------------- */
color: #666666; /* サブタイトルの色 */
/* ----------------------------------------------------- */
font-size: 0.8em; /* サブタイトルの大きさ */
/* ----------------------------------------------------- */
font-weight: normal;
margin: 10px 30px;
}
/**************************** ▲ ヘッダー(タイトル部) ▲ */


★まずは、背景を「色」ではなく、「画像」に変更します(上のオレンジの箇所を書き換えます)。そのやり方は、以前の記事「フッターを変更」と同じ方法です。


▼【修正2回目】

/* ヘッダーレイアウト */
#header {
/* ----------------------------------------------------- */
background-image: url("http://~/header.jpg"); ★画像URLに変更してください。
height: 180px;
background-repeat: no-repeat;
background-position: center; /* ヘッダーの背景画像 */

/* ----------------------------------------------------- */
text-align: left;
}


▼背景を画像に差し替えたところ

ヘッダー画像、背景を画像に変更


 次は、この間の記事「ブログタイトルの画像を作成」で作った“ゴロマーク!?”的な画像をヘッダーに配置します。


 【記事参考元】 FC2ブログのテンプレート工房

[ 2011.01.29 05:05 ] 管理人雑記 | TB(0) | CM(0)