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

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

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

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

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

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

<style type="text/css"><!--
.c { display: none; }
.cn<%cno> { display: block; }
--></style>



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

便利ナビゲーションの上に表示したければ
<!--▼▼ カテゴリ、月別、検索結果ナビゲーション ▼▼--> の上に

便利ナビゲーションの下に表示したければ
<!--▲▲ カテゴリ、月別、検索結果ナビゲーション ▲▲--> の下に

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


【standardシリーズの場合】

<!--▼ カテゴリ別フリーエリア ▼-->
<!--category_area-->

<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><!--/menu_cont3-->
</div><!--/menu_outline3-->
<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><!--/menu_cont3-->
</div><!--/menu_outline3-->
<br />
</div>

<!--/category_area-->
<!--▲ カテゴリ別フリーエリア ▲-->



【lightframeシリーズの場合】

<!--▼ カテゴリ別フリーエリア ▼-->
<!--category_area-->

<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><!--/plugin3_body-->
</div><!--/plugin3_outline-->
</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><!--/plugin3_body-->
</div><!--/plugin3_outline-->
</div>

<!--/category_area-->
<!--▲ カテゴリ別フリーエリア ▲-->



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

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

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

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

関連記事
[ 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テンプレート管理人 はっちさん
いつも参考、紹介してくれてありがとうございます^^

半角スペースで区切れば、1つの要素に複数のクラスを設定できるのです。
<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 ] 質問ですが・・・
「カテゴリ番号1・2・3」に同じフリーエリアを表示させたい場合も、カテゴリ番号別にHTMLを加えなければいけないんでしょうか?
[ 2010/03/02 18:29 ] [ 編集 ]
[ 8577 ] ゆぅたろさん
同じ内容でもカテゴリ毎に必要になります。理由はカテゴリNoを変数で取得しているためです。
[ 2010/03/02 19:14 ] [ 編集 ]
[ 8578 ] ありがとうございました^^
そうですか・・・(^_^;)
やっすぃぃぃーさん、早々のご回答ありがとうございました!

[ 2010/03/02 20:37 ] [ 編集 ]
[ 8590 ]
[ 6248 ]にあるとおり、半角スペースで区切って

<div class="c cn1 cn2 cn3">~</div>

とすればカテゴリー1、2、3は指定した同じフリーエリアが表示されますよ。
[ 2010/03/03 23:37 ] [ 編集 ]
[ 8596 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/03/05 15:08 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

目次ページを作品(カテゴリ)ごとに自由にカスタマイズできるようになりました!
いつもお世話になっている「FC2ブログのテンプレート工房」のいたお様がまたもやすばらしいカスタマイズの方法を教えてくださいました。...
[2009/10/01 10:04] Novel テンプレート
for_novel シリーズ 特定のカテゴリ画面(目次)に説明やバナーを表示する
 カテゴリ画面(目次)に、カテゴリの説明文や小説のあらすじ、ランキングバナーなどを表示する方法です。→サンプル  FC2ブログのテンプ...
[2009/12/04 19:28] 彼此ともつかぬ場所
カテゴリ個別に説明文を上部に表示する
カテゴリ別表示の際にインデックスリスト上部にアイコンと説明文を表示するようにしてみました。 カスタマイズの参考にさせていただいたの...
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る