やっすぃぃぃー’ｓ　ブログ

お知らせの「記事タイトル レイアウト変更」記事で概要はお伝えしましたが、今回は具体的なカスタマイズ方法について記事にまとめました。FC2のいろいろなテンプレートでも該当箇所に手を加える事で実現できるはずなので、興味がある方はご参考にどーぞ。

さて実際の対処方法（仕様）を考慮している際にいくつか方法は思いついたのですが、できるだけ手軽にしたいのとアイコンを設定していなくてもデザインに影響がないように組み立てるのが課題でした。

まずテンプレートの記事タイトル該当箇所にアイコンをつけるスペースを確保します。当初はタイトル背景自体をカテゴリ毎に切り替える事を考えていたのですが、そうすると全カテゴリの背景画像を作成しなければならないのとカテゴリを追加するごとに一緒にメンテするのも手がかかります。そのためアイコンを表示するエリアを確保し、アイコンの設定をしていなければ表示しないように出来るよう考えました。

<div class="content">
<div class="c_title<%topentry_category_no>">
<h2 id="e<%topentry_no>" class="entry_header">

～～略～～

</h2>
</div>

上記はウチで利用しているsky_cubeテンプレートの場合ですが、<div>タグでエリアを確保し専用のclassを指定します。名前は好みでいいのですが、うちではc_titleとしています。
<%topentry_category_no>はカテゴリの番号の変数なので記事で設定しているカテゴリ番号が代入されます。例えばカテゴリ番号が1ならば、上記では c_title1 となります。<div>タグを入れる位置には気を付けてください。ご利用のテンプレートによって異なりますし、挿入場所を間違えるとレイアウトは必然的に崩れます。プレビューで確認しながら進めてください。

設置するアイコンですが、32x32以下のものがいいでしょう。現状だとアイコンの表示位置とタイトル背景が重なってしまうので、スタイルシートのタイトル背景の表示場所をずらします。

h2.entry_header,
h3.entry_header {
background-image: url(画像のURL);
background-position: 30px top;  /* タイトル背景開始位置 */
～～略～～
}

sky_cubeテンプレートのスタイルシートだと上記部分となりますが、ご利用のテンプレートで相当する部分で調整してください。ここでは左から30pxずらして表示するように手を加えています。またウチでは元々の背景画像自体にも手を加えたので背景の画像URLも変更してます。

スタイルシートに表示するアイコンを必要分記載します。

.c_title1 { 
background-image: url(画像のURL);
background-repeat: no-repeat;
}

.c_title2 { 
background-image: url(画像のURL);
background-repeat: no-repeat;
}

この例ではカテゴリ番号1と2に対しての指定です。該当するカテゴリの番号を指定し画像のURLでアイコンの指定、必要分繰り返し作成すればカテゴリ毎にどんどん増やして個別にアイコンを表示させることができます。指定していないカテゴリはアイコンは表示されません。必要なものだけ指定するのもいいでしょう。

関連記事

• ACR WEBランキングのRSS取得がうまくいかない対処 (2010/03/09)
• コメント入力欄のサイズ変更 (2010/02/26)
• 記事タイトル横にカテゴリ毎のアイコンを設置するカスタマイズ (2010/02/10)
• JavaScript無効時のレイアウト対処 (2010/01/30)
• ＩＥ５．５の文字化け対応 (2010/01/29)

※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです

テーマ : ブログカスタマイズ
ジャンル : ブログ