WEB漫画マンガ/絵本専用Comicテンプレート：通常ブログ画面・検索・アーカイブページで作品(カテゴリ)別にバナーを貼る

★ 通常ブログ画面・検索・アーカイブページで作品(カテゴリ)別にバナーを貼る

大事なお知らせ FC2ブログ非公開変数の領域変更により、一部ページナビが表示されない等テンプレートに不具合が出ております。ユーザーの皆さまにはご迷惑をおかけして恐縮ですが、 2012.11.10.以前にDLしたテンプレートをご利用の場合は、一旦テンプレートを削除、もしくは名前を変更した上で、再DLして御利用くださいますようお願い申し上げます。詳しくは

不具合解消のための再DLのお願い

前ページでは、漫画メインページ(個別記事・カテゴリページ)で、作品(カテゴリ)ごとに違うランキングバナーを表示させるカスタマイズを御紹介しましたが、同じことが一般ブログスタイルで表示されるエリア（通常ブログ画面・検索・アーカイブ)ページでもできます。

個々の作品別にジャンルの違うランキングに参加する場合に便利なカスタマイズです。

カテゴリの番号の確認

テンプレートをカスタマイズする前に、表示させるカテゴリの番号を確認しておきます。
カテゴリ番号は［カテゴリの編集］画面のカテゴリ一覧リストの一番左、#　をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://comictemplate.blog.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。

カスタマイズ

［菅理画面］⇒［環境設定］⇒【テンプレートの設定】をクリックして
［テンプレートの管理］ページを開く

PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名のHTML編集
テンプレート名のスタイルシート編集　　　　　　　　　こんなふうに上から順番に並んでいます。

［HTML編集］部分をカスタマイズします。

<head> ～　</head>　部分のカスタマイズ

.cnXX_XX { display: block ; }

　記述の注意！
スタイルシートに追加する際、クラス名の前のドット　を忘れたり、、逆に、記載内容のどこかに全角スペースが入ってしまうとカスタマイズした内容がテンプレートに反映されなくなります。コロン:とセミコロン;も間違えやすいので、ご注意ください！
.cn1_1 { display : block ;}
同じスペースでも、半角スペースなら問題ないのですが、全角スペースが記載内容のどこかに入ってしまうと　カスタマイズした内容がテンプレートに反映されません。
✕　.cn1_1　{ display : block ; }

複数のカテゴリ番号の記事欄で表示する場合はセレクタとセレクトの間にカンマ入れて列挙します。
以下はカテゴリ番号１とカテゴリ番号２の記事欄にバナー等を表示する例

.cn1_1 ,.cn2_2 { display : block ; }

<body> ～　</body>　部分のカスタマイズ

Comicテンプレートには予め、ランキングバナーなどを追加する個所が指定してあります。
キーボードの　 Ctrl 　+　 F 　をクリックすると、画面の上もしく下に検索ボックスが表示されますので、
そこに　　と入れて以下の個所を探します。

<div class="c cnXX">
　　　　　　//////////////////////////////////////////
XXをカテゴリ番号に変更し(a1)と(b1)の行を削除するとここに記入した内容は
漫画メインページでそのカテゴリのページにだけ表示されます
漫画メインページ以外でカテゴリ別のバナーを貼る場合は作者ブログ解説記事をご参照ください。
//////////////////////////////////////
</div>

(b2)この行と(a2)の行を削除-->

の上の赤色の部分にバナーを貼れば、
ブログ拍手ボタン・ツィッターなど管理画面で設定する自動設定のボタンの上に表示され、

の下の青色の部分に貼れば、
自動設定のボタンとアカマイ広告より下の記事欄下部に表示されます。

XX　をカテゴリ番号に変更して上の赤色の部分と差し替えます。

<div class="c cnXX_<%topentry_category_no> ad<%topentry_no>"><a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a>
</div>

▼以下はカテゴリ番号2の記事欄にバナーを表示させる場合の例

<div class="c cn2_<%topentry_category_no> ad<%topentry_no>">
<a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a>
</div>

記述の注意！
この時クラス名の前にドットは不要ですが、複数のクラス名で指定しているので、クラス名とクラス名の間の半角スペースをお忘れなく！
<div class="c cn2_<%topentry_category_no> ad<%topentry_no>">

親カテゴリで指定する場合は、
cnカテゴリ番号_<%topentry_category_no>　を
cn親カテゴリ番号_<%topentry_parent_category_no> に変更します

▼以下は親カテゴリ番号1の全ての子カテゴリの記事欄にバナーを表示させる場合の例

<div class="c cn1_<%topentry_parent_category_no> ad<%topentry_no>">
<a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a></div>

複数のカテゴリに同じバナーを表示する場合は　二番目のクラス名　cnカテゴリ番号　の後ろに半角スペースを空けて、第三のクラス名として　cnカテゴリ番号_<%topentry_category_no>　と列挙していきます。

▼以下はカテゴリ番号２，４，６　のカテゴリの記事欄に同じランキングバナーを表示する場合の例

<div class="c cn2_<%topentry_category_no> cn4_<%topentry_category_no> cn6_<%topentry_category_no> ad<%topentry_no>">
<a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a></div>

▼以下はカテゴリ番号２，４，６　で別々のバナーを表示させる場合の例

<div class="c cn2_<%topentry_category_no> ad<%topentry_no>">
<a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a></div>
<div class="c cn4_<%topentry_category_no> ad<%topentry_no>">
<a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a></div>
<div class="c cn6_<%topentry_category_no> ad<%topentry_no>">
<a href="リンク先アドレス" target="_blank" title=""><img src="バナー画像アドレス" alt="" border="0" width="幅" height="高さ" /></a></div>