彼此ともつかぬ場所


□ 使用方法 □

for_novel シリーズ 特定のカテゴリ画面(目次)に説明やバナーを表示する

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

 FC2ブログのテンプレート工房さんの「カテゴリ別フリーエリアの表示」を参考にいたしました。有用なアイデアをありがとうございました!

 ※ 2009/11/26以前版をお使いの方は、新しくテンプレートをダウンロードし直していただくか、「for_novel シリーズ 特定のカテゴリ画面(目次)に説明やバナーを表示する(2009/11/26以前版)」を参照してください。

 以下の説明に出てくる行番号については、「カスタマイズの際の行番号」を参照してください。

 管理画面から「テンプレートの設定」で、HTMLの編集を行います。
 377行目、<!-- ▽ カテゴリ表示画面 -->以下を見てください。

389行目><!-- ↓ 上部フリースペース(← 使用時はこの行を丸々削除してください →)
390行目>      <div class="hide showカテゴリ番号 cat_header">カテゴリ説明文もしくは小説の粗筋</div>
391行目>     ↑ 上部フリースペース(← 使用時はこの行を丸々削除してください →) -->

409行目><!-- ↓ 下部フリースペース(← 使用時はこの行を丸々削除してください →)
410行目>      <div class="hide showカテゴリ番号 cat_footer">カテゴリ説明文もしくはランキングバナー等</div>
411行目>     ↑ 下部フリースペース(← 使用時はこの行を丸々削除してください →) -->

という部分が見つかると思います。

 カテゴリ別目次の上側(サンプルで言うと「近世欧州風ファンタジー……」というあらすじの部分)に記入したい場合は「上部フリースペース」を、下側(同じくサンプルでは登録サーチエンジンのリストが書かれている部分)に記入したい場合は「下部フリースペース」を使います。

 先ず、説明ないしバナーを表示させたいカテゴリの数だけ、

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

と書かれた行をコピーしてください。
 例えば、二つのカテゴリにそれぞれ説明を表示させるなら、

<!-- ↓ 上部フリースペース(← 使用時はこの行を丸々削除してください →)
      <div class="hide showカテゴリ番号 cat_header">カテゴリ説明文もしくは小説の粗筋</div>
      <div class="hide showカテゴリ番号 cat_header">カテゴリ説明文もしくは小説の粗筋</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解説サイトを参考にしてください。

 最後に、「カテゴリ番号」を代入するのですが、その前に管理画面の「カテゴリの編集」から、各々のカテゴリの番号を把握しておいてください。
「カテゴリ一覧」のカテゴリ名の左、チェックボックスの上「#」をクリックして、カテゴリ番号を表示させ、説明を表示させたいカテゴリの番号を確認してください。
カテゴリ番号表示に切り替えるカテゴリ番号を確認する
 例で上げたカテゴリが、それぞれ番と番だったとします。

<!-- ↓ 上部フリースペース(← 使用時はこの行を丸々削除してください →)
      <div class="hide show3 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 show4 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>
     ↑ 上部フリースペース(← 使用時はこの行を丸々削除してください →) -->


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

 後は、

<!-- ↓ 上部フリースペース(← 使用時はこの行を丸々削除してください →)

     ↑ 上部フリースペース(← 使用時はこの行を丸々削除してください →) -->

の二行を、指示通りにまるっと削除してしまえばOKです。
 下部フリースペースを使う場合も、以上のやり方を参考にして同様の作業をお願いします。



*    *    *

Information

Date:2009/11/27
Trackback:0
Comment:6

Comment

[311] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2013/08/07 【】  

[312] >非表示様

初めまして。テンプレートご使用ありがとうございます。

お尋ねの件について、表示がなされないというテンプレートを実際に拝見しないと、コメントの内容だけでは、どのような現象が生じているのか少々分かりかねます。

「コメントについて」
http://greenbeetle2.blog117.fc2.com/blog-entry-10.html
にて、「返事が必要なコメントは、公開コメントで」とお願いしておりますが、ブログURLをこのコメント欄で公開なさりたくない場合は、非表示コメントで構いませんので、ブログのURLを教えていただけますか?
2013/08/07 【GB】 URL [編集] 

[313] 承認待ちコメント

このコメントは管理者の承認待ちです
2013/08/08 【】  

[314] ブログ拝見しました

ブログURLをありがとうございます。
(コメントはこのまま表示させないでおきますね)

ブログを確認いたしましたが、私の環境(windows8、IE10とFirefox22)では、カテゴリ3、4、7、10、12の全てのカテゴリ表示画面に、それぞれのカテゴリの説明文がきちんと表示されておりました。

もしかしたら、カスタマイズ途中のスタイルシートがブラウザのキャッシュに残ってしまっていて、それで表示が変になっているのかもしれません。一度再読み込みをなさってみてくださいますか?

ただ、カテゴリ7については、他のカテゴリの親カテゴリに設定されているため、目次や更新履歴画面からはリンクが辿れなくなっております。私は、通常ブログ画面のサイドバーの「カテゴリ」から確認することができました。
もしも、表示されない、というのが、このカテゴリ7のことでしたら、親カテゴリであるカテゴリ7ではなく、それぞれの子カテゴリに説明文を設定すればいいと思います。
2013/08/08 【GB】 URL [編集] 

[315] 

お忙しい中、ご返答、並びにブログをチェックして頂きありがとうございました。

あれから再度確認しましても、やはり目次に説明文が表示されたのは3と4のみで、残りはやはり表示されておりませんでした。再読み込みを試しましても同じでした。

試に他のカテなら表示されるのか・・と思い、HTMLに全く違うカテの番号を入れてみたところ、何故か今まで出てこなかった7、10、12に、入るはずだった説明文が出てきた・・(実際のHTMLにはカテの番号は違うものが入っています)という現象が起きております。また、一時的ですが、説明文が重複(例、カテゴリ3と5)して出てくる・・という現象も起こりました。

カテ番号などは間違ってはいないのですが・・・

とりあえず、HTMLに入れたカテ番号は違うものの、表示されるはずだったものが出て、重複もしていない様なので、当面様子を見てみようと思います。

ご面倒をおかけ致しまして申し訳ございません。

また困った時にはお力を貸して頂けますと幸いです。

2013/08/09 【たんぽぽ団】 URL [編集] 

[316] 

何度も申し訳ございません。
目次の説明の件ですが、解決いたしました。
私が「カテ番号」ではなく「記事番号」の数字を入れてしまっていたのが原因でした。
またまた3と4はカテと記事が同じ番号だったため、正しく表示されていたものでした。
大変ご迷惑をおかけいたしまして申し訳ございませんでした。
2013/08/10 【たんぽぽ団】 URL [編集] 

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:https://greenbeetle2.blog.fc2.com/tb.php/84-a2733d70
この記事にトラックバックする(FC2ブログユーザー)