FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

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

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

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)

≪ 記事別フリーエリアの表示 | HOME | white_eagle,fullmoon_howlingにて、背景画像の下が欠けてしまう問題 ≫

[ 5206 ]

･`ω･) ｽ･ｽｹﾞｪ…

[ 2009/07/30 21:50 ] [ 編集 ]

[ 5211 ]

これって個別記事に表示できないのでしょうか

[ 2009/07/31 15:35 ] [ 編集 ]

[ 5216 ] > みかんさん、だすさん

> みかんさん
ありがとうございます。

> だすさん
記事を掲載したのでこちらを参考にしてください。

記事別フリーエリアの表示
http://10plate.blog44.fc2.com/blog-entry-249.html

[ 2009/07/31 22:29 ] [ 編集 ]

[ 5225 ] こんにちは！！

いたおさん、ありがとうございます！！
早速、カテゴリにフリーエリアをつけてみました！！

説明文ではなく、カテゴリ別に画像をいれてみました！！
こういうカスタマイズやりたかったんですごく嬉しいです！！

ありがとうございます★
これからもよろしくおねがいします★

[ 2009/08/01 18:33 ] [ 編集 ]

[ 5230 ] > ハンナさん

上手くカスタマイズ出来てますね＾＾

[ 2009/08/02 00:21 ] [ 編集 ]

[ 5246 ] ありがとうございました★

いたおさん、お礼が遅くなって申し訳ありません。
ありがとうございました。
これから少しずついじっていこうと思っています。
これからも、ちょくちょくお邪魔すると思いますので宜しくお願い致します。

[ 2009/08/02 20:16 ] [ 編集 ]

[ 5257 ] > cathnotorikoさん

焦らずゆっくりカスタマイズしてください。
「複製」でバックアップを取りながら進めてくださいね。

[ 2009/08/03 00:37 ] [ 編集 ]

[ 6234 ]

いつもお世話になっております。
Novelテンプレート管理人はっちでございます。
今回のカスタマイズもまた、すばらしいです！
表示する内容をカテゴリ別に変える…というのは、以前から興味があったのですが、そのためには、スタイルシートに、表示しないカテゴリ番号でクラス指定したブロックをずらっと並べて、片っ端からdisplay noneにしていく方法しか思いつかなかったので、カテゴリの多いブログの場合、実用的じゃぁないなと手を出しあぐねておりました。
けれども、いたおさまがご紹介くださった方法であれば、表示したいカテゴリの内容だけをテンプレに書き込めばいいわけで、なんたる省エネ！すばらしい！
理論的なことはちんぷんかんぷんなのですが、c と　cn　の間のスペースがミソなのでしょうか？(?_?)
早速拙宅で試してみたところ、ばっちりでした♪
近いうちに、ぜひ、拙作ご利用の方にも、記事にしておススメさせていただきたいと思っております。
いつも、いつも、すばらしい技とアイディアを教えてくださって、本当にありがとうございます。
まずは御礼まで
はっち拝

[ 2009/09/26 14:52 ] [ 編集 ]

[ 6248 ] > Novelテンプレート管理人はっちさん

いつも参考、紹介してくれてありがとうございます＾＾

半角スペースで区切れば、１つの要素に複数のクラスを設定できるのです。
<div class="AAA BBB CCC">～</div>

これを利用すると色んなことが出来ますよ＾＾

[ 2009/09/27 00:26 ] [ 編集 ]

[ 7629 ]

あけましておめでとうございます。

こちらの記事を参考にさせていただきました。トラバいたしましたので宜しくお願いします。

[ 2010/01/01 21:31 ] [ 編集 ]

[ 7635 ] > やっすぃぃぃーさん

あけましておめでとうございます。
いつもトラバありがとうございます＾＾

[ 2010/01/01 23:13 ] [ 編集 ]

[ 8080 ] タグ別は可能？

いつもお世話になっております。
この方法はタグ別でも可能でしょうか？
流用していじってみたのですが、<div class="c cn1">の部分の
"c cn1"をなんと指定すればいいのか分かりません。
可能でしたら御指南いただければ幸いです。
不可能な場合は残念ですが諦めますので宜しくお願いします。

[ 2010/01/28 20:52 ] [ 編集 ]

[ 8084 ] > 縁風呂さん

例えば「野天風呂」というタグのとき専用のフリーエリアを用意したいときは

<div class="c sub_野天風呂">～</div>

というタグで囲み
.cn<%cno> { display: block; }
という部分を
.sub_<%sub_title> { display: block; }
としてみてください。

[ 2010/01/29 00:03 ] [ 編集 ]

[ 8090 ] ありがとうございます

おかげさまで無事タグでも反映できました
ただ、タグに/が含まれていると反映されないようで
○○/△△というタグをいくつか・などでつけ直す必要が……orz
HTMLの/を文字反映させられる方法ってあるのでしょうか？
初歩的な質問で申し訳ないですが、よろしければお答えください

[ 2010/01/29 02:30 ] [ 編集 ]

[ 8100 ] > 縁風呂さん

面倒だとは思いますが、それは/を書き換える必要があります。またダブルクォーテーション「"」や、かっこ「<,>」も含めないでください。

[ 2010/01/30 00:02 ] [ 編集 ]

[ 8102 ]

了解しました。お答えいただきありがとうございました

[ 2010/01/30 00:05 ] [ 編集 ]

[ 8576 ] 質問ですが・・・

「カテゴリ番号１・２・３」に同じフリーエリアを表示させたい場合も、カテゴリ番号別にＨＴＭＬを加えなければいけないんでしょうか？