【彼此ともつかぬ場所】 for_novel シリーズ　特定のカテゴリ画面（目次）に説明やバナーを表示する（2009/11/26以前版）

□ 使用方法 □

　カテゴリ画面（目次）に、カテゴリの説明文や小説のあらすじ、ランキングバナーなどを表示する方法です。→サンプル

　※ 2009/11/26以降にテンプレートをダウンロードされた方は、「for_novel シリーズ　特定のカテゴリ画面（目次）に説明やバナーを表示する」をご覧ください。

　以下の説明に出てくる行番号については、「カスタマイズの際の行番号」を参照してください。
　管理画面から「テンプレートの設定」で、先ずHTMLの編集を行います。

工程１

　HTMLの最初の方にある「<head>」と「</head>」の間のどこかに、

<style type="text/css">
.show<%cno> { display:block; }
</style>

と言う記述を追加してください。この時、二行目行頭の「半角ピリオド」を忘れないようにお願いします。

　次に、HTMLの300～323行目を見てください。

と

に挟まれた部分です。

工程２　スタイルシートOFF対策

　まず304行目、

<h2>目次</h2>

の直後に、

<div class="hide">※ このページは、スタイルシートを使用してカテゴリ毎に表示内容を振り分けています。スタイルシートが有効でない場合は、それら全てが一度に表示される事になりますので、ご注意ください。</div>

と付け加えてください。

工程３-Ａ　目次上部に説明文を表示させる

　工程２で付け加えた一文のすぐ下に、

<div class="hide showカテゴリ番号 cat_header">
カテゴリ説明文もしくは小説の粗筋
</div>

と付け加えてください。
　複数のカテゴリに説明文を表示させる場合は、表示させたいカテゴリの数だけ追加してください。

工程３-Ｂ　目次下部に説明文を表示させる

316行目＞
317行目＞ </div>

の直後に、

<div class="hide showカテゴリ番号 cat_footer">
カテゴリ説明文もしくはランキングバナー等
</div>

と付け加えてください。
　複数のカテゴリに説明文を表示させる場合は、表示させたいカテゴリの数だけ追加してください。

工程４　説明文の入力

　工程３で付け加えた「カテゴリ説明文もしくは小説の粗筋」ないしは「カテゴリ説明文もしくはランキングバナー等」の部分に、それぞれ表示させたい内容を代入します。
　当ブログの場合を例に挙げますと……、

<div class="hide showカテゴリ番号 cat_header">
<img src="https://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/banner_irimame.gif" alt="炒り豆をめぐる冒険" style="border:none;margin-right:5px" width="200" height="40" />　近世欧州風ファンタジー。　【文庫本65頁・2009/6/21改稿】<br />
　剣士として出仕中の彼氏に逢いに待ち合わせの街にやってきた、彼女の受難の物語。<br />
　直接的な表現はありませんが、性に関わる記述が一部含まれています（PG12）。
</div>
<div class="hide showカテゴリ番号 cat_header">
<img src="https://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/banner_usubeni.gif" alt="薄紅まといて" style="border:none;margin-right:5px" width="200" height="40" />　学園物＋ちょっぴり伝奇物。　【文庫本99頁・2009/11/15完結】<br />
　卒業間近、遠方の大学に進学が決まった彼氏にどう接したら良いのだろうか。<br />
　悩むホノカの視界一面に、薄紅色が降りしきる……。
</div>

と、なっています。
　これは上部フリースペースの例ですが、下部フリースペースの場合もするべき事は同じです。
　改行したいところには <br /> という改行タグを挿入してください。画像を張り付けたい場合は、 <img src="画像のURL" alt="画像の名前" style="画像のスタイル" width="画像の幅（px）" height="画像の高さ（px）" /> といった感じのタグになります。詳しくは、「TAG index」などのHTML解説サイトを参考にしてください。

工程５　カテゴリ番号の代入

　残った「カテゴリ番号」を当てはめる前に、管理画面の「カテゴリの編集」から、各々のカテゴリの番号を把握しておいてください。
「カテゴリ一覧」のカテゴリ名の左、チェックボックスの上「#」をクリックして、カテゴリ番号を表示させ、説明を表示させたいカテゴリの番号を確認してください。
カテゴリ番号表示に切り替える

　説明文を表示させたいカテゴリが、3番だとすると、

<div class="hide showカテゴリ番号 cat_header">

の部分は

<div class="hide show3 cat_header">

となります。
　この時、必ずカテゴリ番号は「半角数字」で入力してください。「hide」「show3」「cat_header」という三つのクラス名を区切るのも「半角スペース」ですので、お間違えなきよう。

工程６

　最後に、スタイルシートのカスタマイズです。
「テンプレートの編集」からスタイルシート編集画面の二行目以降のどこかに、以下の文字列を追加してください。

/* 非表示設定 */
.hide { display:none; }

/* 上部フリースペース */
.cat_header { font-size:88%; line-height:150%; margin:15px 15px 0px 15px; }

/* 下部フリースペース */
.cat_footer { font-size:88%; line-height:130%; text-align:right; margin:15px 15px 0px 15px; }

　これで、工程４で入力した内容が、工程５で指定したカテゴリの目次にのみ表示されることになります。