彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




*    *    *

Information

□ 使用方法 □

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

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

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

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

工程1


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

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

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

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

<!-- ▽ カテゴリ表示画面 -->

<!-- △ カテゴリ表示画面 -->

に挟まれた部分です。

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


 まず304行目、

      <h2>目次</h2>

の直後に、

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

と付け加えてください。

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


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

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

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

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


316行目><!--/nextpage-->
317行目>      </div>

の直後に、

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

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

工程4 説明文の入力


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

<div class="hide showカテゴリ番号 cat_header">
<img src="http://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="http://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解説サイトを参考にしてください。

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


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

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

の部分は

<div class="hide show3 cat_header">

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

工程6


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

/* 非表示設定 */
.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; }


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



*    *    *

Information

Date:2009/08/07
Trackback:0
Comment:3

Comment

[116] 

あらすじを表示できるようになりました。
ありがとうございました。
2009/08/07 【立花】 URL 

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

このコメントは管理人のみ閲覧できます
2009/09/25 【】  

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

このコメントは管理人のみ閲覧できます
2009/09/26 【】  

コメントの投稿

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







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

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/58-e7f08987
この記事にトラックバックする(FC2ブログユーザー)

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。