http://10plate.blog44.fc2.com///blog-entry-248.html

カテゴリ別フリーエリアの表示

各カテゴリページの上部に、そのカテゴリ専用のフリーエリアを表示する方法を紹介します。

各カテゴリに異なる専用のフリーエリアがあれば、それぞれのカテゴリをアピールするのに役立ちそうです。

HTMLの<head>～</head>の間に、以下を加えてください。
FC2変数を利用するため、スタイルシートではなくHTMLのheadタグ内に書く必要があります。

<style type="text/css"></style>

次に、当サイトが公開している共有テンプレートであれば
カテゴリ別フリーエリアの表示位置を

便利ナビゲーションの上に表示したければ
 の上に

便利ナビゲーションの下に表示したければ
 の下に

次の記述を加えてください。

【standardシリーズの場合】

<div class="c cn1">
<div class="menu_outline3">
<div class="menu_title3" style="text-align: center;" >フリーエリアタイトル1</div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align: left;">
ここにカテゴリー1のフリーエリアの内容を表示
</div>
</div>
</div>
<br />
</div>

<div class="c cn2">
<div class="menu_outline3">
<div class="menu_title3" style="text-align: center;" >フリーエリアタイトル2</div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align: left;">
ここにカテゴリー2のフリーエリアの内容を表示
</div>
</div>
</div>
<br />
</div>

【lightframeシリーズの場合】

<div class="c cn1">
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル1</div>
<div class="plugin3_body">
<div style="text-align:left;">
ここにカテゴリー1のフリーエリアの内容を表示
</div>
</div>
</div>
</div>

<div class="c cn2">
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル2</div>
<div class="plugin3_body">
<div style="text-align:left;">
ここにカテゴリー2のフリーエリアの内容を表示
</div>
</div>
</div>
</div>

同様に
<div class="c cn3"> ～ </div>
<div class="c cn4"> ～ </div>
・・・
と、カテゴリの数だけ増やせます。

赤い数字はカテゴリ番号を設定してください。各カテゴリ番号は、そのカテゴリページのURLを見ると判ります。
http://～/blog-category-x.html
xの位置にある数字がそのカテゴリの番号です。

各文字の
中央寄せ ( center )
左寄せ ( left )
はお好みに合わせて設定してください。

これで各カテゴリページに異なる専用のフリーエリアを表示することが出来ます。

関連記事

[ 2009/07/30 21:12 ] カスタマイズ共通カスタマイズ | TB(3) | CM(21)