カスタマイズ・ブログ素材

第１回目のブログカスタマイズはリストアイコン素材を使ったブログのカスタマイズです。対象者はいきなりですが【中級者】向けのカスタマイズの講座となります。

まず、リストアイコンとは何かと言いますと、ブログ内のサイドバーにあるカテゴリーなどのリスト部分で使われている小さなアイコンのことです。下のサンプルをご確認ください。
※他に正確な呼び名があるのかも知れませんが、当サイトではリストアイコンとさせて頂いています。

Sample

ご使用中のテンプレートによってはリストアイコンの無いものや、リストマークとして●や■などが表示されている方も居るかも知れませんが、後述するカスタマイズ方法をご理解頂ければ簡単に変更できますので心配要りません。

Step 1
それではまずお気に入りのリストアイコンを手に入れましょう。あまり大きなアイコンですとデザインのバランスを崩す恐れがありますので、ご使用中のテンプレートに適当と思われるサイズのリストアイコンをお探しください。また、当サイトでもフリー素材としてリストアイコンをご用意してますので宜しければご使用ください。

当サイトの「リストアイコン置場」ページにてリストアイコンをダウンロード して頂けます。

お好みのリストアイコンはご用意できましたでしょうか？
素材探しのコツとしては、検索キーワードで「フリー素材　ランキング」などと入力することで沢山の素材屋さんが見つかると思います。

Step 2
次にご使用中のブログのサーバーへリストアイコンをアップロードします。当サイトで配布中のフリー素材ですとファイル名が数字のみとなっていますが、ファイル名を見ただけで内容が判別できるようなファイル名に変更しておくことをお勧めします。ファイル名には半角英数字やアンダースコア（ _ ）ハイフン（ - ）などが使用できます。拡張子を削除しないよう注意して変更しましょう。
ファイル名に問題がないようでしたらサーバーへアップロードし、アップロードしたファイルの URL を調べ URL をコピーし後の作業でペーストできるようにしておいてください。
ファイルの URL を知る方法はお使いのブログサービスによってまちまちなので自力で頑張ってください。ちなみに FC2ブログ ではアップロードしたファイル管理画面のファイル画像をクリックすると、別ウィンドウにファイルのみが表示されます。その表示されているウィンドウのアドレスバーにて URL を確認できます。

Step 3
続いてご使用中のテンプレートの CSS を編集可能な状態にしてください。使い慣れたテキストエディタなどに CSS のソースを全てコピペして作業すると便利ですが、ブログの CSS 編集画面でも問題ありません。
※お使いのブログサービスによっては CSS を編集できない場合がございます。その時は残念ですが今回のカスタマイズは諦めてください。

CSS 編集の準備できましたら、ご自身のブログを WEB ブラウザで表示し HTML ソースを表示してください。そのソースの中からリストアイコンが適用されている部分を探すのですが・・・

以下しばらくHTML ソースの見方に不慣れな方の為に図を使い説明いたします。自信のある方は Step 4 へお進みください。

上の図は２カラムのテンプレートの基本的な div タグの構成です。今回のカスタマイズでは赤い部分の div タグの中にある ul タグと li タグの CSS の指定を変更するのが最終目的です。お使いのテンプレートではこの図に当てはまらない方も多いでしょうが、探し方のポイントはそれほど変わりませんので下の説明をご参考にしてください。

まず、全てを包括する div は簡単に見つかると思います。body タグの次に出てくる div がそれにあたると思います。そしてブログ名などを包括するヘッダー部分の div タグも分かりやすいでしょう。さて、ここで div が並列しているので少々戸惑うかも知れませんが、HTML ソースを良く観察するとどちらの div か判断できる材料は沢山あります。記事内容が内包されていれば今回の目当ての div ではありませんし、もし３カラムなどのテンプレートをご使用中でしたら目当ての div のラベル部分のタイトルテキストを探すと見つかるのではないでしょうか。例えば「カレンダー」や「カテゴリー」などサイドバーで使用されているテキストを頼りに赤い部分の div タグを頑張って探してみてください。検索機能を使うと簡単です。

Step 4
サイドバーの div タグが見つかった方は、その div タグの id 属性を確認してください。下のサンプルソースの赤い部分が後々重要になります。

<div id="here"> …省略… </div>

今回は目的のサイドバーを包括している div の id 属性が here だったとしカスタマイズの説明を続けさせて頂きます。
目的の id 属性が分かった方は CSS から ul セレクタを見つけます。CSS 内に１つしかない場合は問題ないのですが、おそらく複数見つかる方が多数だと思います。多数の ul セレクタが見つかった方は、その ul セレクタが HTML 内のどこの部分の ul タグへ適用されているか判別しなければなりません。
そこで先ほどの div の id 属性 here が多くの方の場合判断材料となります。
下のサンプルソース１とご自身の CSS と照らし合わせ目的の ul セレクタと li セレクタを見つけてください。

div#here ul {
	list-style : none;/*リストマークの非表示*/
	list-style-position: outside;/*リストマークのポジション*/
}

div#here li {
	width : 205px;/*for IE*/
	line-height : 1.2em;/*文字送り*/
	padding : 2px 0 2px 20px;/*上、右、下、左の順に余白を指定*/
	margin-bottom : 0.3em;/*リストの下に余白*/
	background-image : url("http://・・・リストアイコンのURL・・・");
	background-repeat : no-repeat;/*画像を繰り返さないように指定*/
	background-position : 0 0.3em;/*左からの指定値、上からの指定値*/
}

上のサンプルソース１は既にリストアイコンを適用している場合の１例です。簡単に CSS の設定の内容を説明させて頂くと ul セレクタの list-style プロパティの値を none とすることでリストマークを非表示にし、li セレクタに back-ground プロパティを指定し li 要素の背景にアイコン画像（リストアイコン）を表示しています。 Step 2 でコピーしておいたアイコン画像の URL は li セレクタの background-image プロパティの値としてペーストしてください。url（"ここにペーストです"）。
ちなみに/* */は CSS のコメント部分です。コメント部分は HTML に影響を及ぼしませんので「このプロパティは何だっけ？」なんてなる方は細かくコメントを書いておくと後で変更する時に楽ですよ。上のサンプルソースにもコメント部分にプロパティの簡単な説明を記載しておいたのでご参考ください。

話をカスタマイズに戻しますと、今回のカスタマイズではサンプルソース１の赤い部分が重要になっています。お使いのテンプレートによっては違う指定方法をされている場合が多分にございます。なので、ここからは各自が上のサンプルソース１からカスタマイズに必要な指定を、お使いのテンプレートの CSS に適用させ微調整して頂く必要があります。

もしも、お使いのテンプレートで下のような指定をされていたら上のサンプルソース１のようにしておくことをお勧めします。

div#here ul {
	list-style-image : url("http//・・・リストアイコンのURL・・・");
}

本来、上の指定方法がリストマークの代わりにアイコン画像を指定するプロパティなのですが、ブラウザによって表示にバラツキがあります。なるべく多くのブラウザで同じように表示させたいとお考えならサンプルソース１のように li 要素の背景にアイコン画像を表示し、アイコン画像と li 要素のテキスト部分が重ならないように li セレクタの padding プロパティでアイコン部分に余白を作ると多くのブラウザで似たような表示結果となります。また、アイコンが繰り返し表示されないよう background-repeat プロパティの指定も忘れないでください。アイコン画像やテンプレートのテキストサイズによって back-ground-position プロパティや先述した padding プロパティで微調整してください。

以上で今回のカスタマイズ講座は終了です。最後に豆知識として li セレクタに width を指定しておくと IE の li 要素に発生する謎の隙間を回避できます。margin などの指定値以上に隙間が空いてしまう方はお試しください。

お疲れさまでした。次回のカスタマイズ講座はいつになるかまだ分かりませんが、初心者向けのもっと簡単なカスタマイズを予定しています。今回の講座が難しかった方は楽しみにして頂けると嬉しいです。