彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ 修正報告 □

for_novel シリーズ 特定のカテゴリ別目次にのみランキングタグを表示する(旧版)

 ※ 2009/11/27追記
 2009/11/26 テンプレートのバージョンアップに伴って、より簡単に、特定のカテゴリ別目次にのみランキングタグを表示させる事が出来るようになりました。
 新しいテンプレートをダウンロードしてくださった方は、「for_novel シリーズ 特定のカテゴリ画面(目次)に説明やバナーを表示する」を参照してください。
 古いバージョンのままでお使いになる場合は、「for_novel シリーズ 特定のカテゴリ画面(目次)に説明やバナーを表示する(2009/11/26以前版)」をご覧ください。この記事よりも幾分スマートな方法をご説明しております。
 #この記事を書いて半年、作者も多少進歩したようです……。以前の拙い解説にお付き合いくださった方々には、色々ご迷惑をおかけしておりますが、どうかご容赦ください。




 以前に、「ある特定のカテゴリ別目次のみに、ランキングタグを表示する方法はないか」と質問を受けた事がありました。
 テンプレート用の変数に、該当するものが無かったため、「無理だ」とお答えしていたのですが、スタイルシートを使ってカテゴリを特定する事が可能である事が解りまして(Novel テンプレート様、色々ありがとうございます!)、覚え書きを兼ねてこの場で少しまとめてみる事にしました。


 先ず、HTMLファイルを見てください。

 以下の説明に出てくる行番号については、「カスタマイズの際の行番号」を参照していただくとして、取り敢えずはHTMLの「カテゴリ表示画面」に該当する部分を探してください。300~323行目、

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

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

に挟まれた部分です。

 はじめに、

304行目>      <h2>目次</h2>

の直後に、

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

と付け加えてください。

 それから、

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

の直後に、

<div class="cat<%cno>">ランキング参加中<a href="ランキングURL" target="_blank"><img src="バナー画像のURL" /></a></div>

という一文を挿入してください。
 ちなみに、<%cno>というのは、「カテゴリページで表示中のカテゴリの番号」を意味する変数です。アドレスバーに表示される http://***.blog***.fc2.com/blog-category-x.html の「x」にあたる番号の事です。

 次にCSSのカスタマイズですが、その前に一度、「カテゴリの編集」画面から、各々のカテゴリ番号を把握しておいてください。
「カテゴリ一覧」のカテゴリ名の左、チェックボックスの上「#」をクリックして、カテゴリ番号を表示させ、ランキングバナーを表示させたいカテゴリの番号を確認してください。
カテゴリ番号表示に切り替えるカテゴリ番号を確認する
 仮に、カテゴリが0~5まで存在するとして、バナーを表示させたいカテゴリが3番だったとします。

 CSSファイルの2行目以降のどこかに、

.cat0 { display:none; }
.cat1 { display:none; }
.cat2 { display:none; }
.cat3 { font-size:88%; }
.cat4 { display:none; }
.cat5 { display:none; }

のように、「ピリオドcatカテゴリ番号」のスタイル指定を追加してください。ちなみに、これらは全て半角で記述するようにお願いします。

「display:none;(=表示させない)」というスタイル指定は、バナーを表示させないカテゴリ全ての分をきっちり用意してください。
 バナーを表示させるカテゴリ用には、「font-size:88%;」と文字サイズを指定しています。バナーを右に寄せたい場合は、「font-size:88%; text-align:right;」という風に「text-align:right;」を追加してください。

 これで、カテゴリ番号3のカテゴリにのみ、HTMLに追加したバナー表示が適用される事になります。

 最後に、

.css { display:none; }

を同じくCSSファイルの2行目以降のどこかに追加してください。
 これによって、一番最初に記した注意書きが、スタイルシートが有効な時には非表示となり、スタイルシートを切った時だけ表示されるようになります。





******
 
 以下、応用編というかおまけの呟き。

 複数のカテゴリに、それぞれ別々のバナーを表示したい場合は……どうしたらいいかなあ。

 ※ 2009/6/24追記
「『cat』というクラス名にこだわる事はないのでは(要約)」というコメントをいただいて、目からウロコが落ちました!
 そうです、そうですよ! クラス名は「cat+カテゴリ番号」じゃなくっても別に全然構わないのです。
 ……気が付くの、遅過ぎだ……orz

 というわけで、カテゴリ別に複数のバナーを貼り分ける場合。
 上と同様に、HTMLに

<div class="cat_a<%cno>">ランキング参加中<a href="ランキングURL" target="_blank"><img src="Aカテゴリ用バナー画像のURL" /></a></div>
<div class="cat_b<%cno>">ランキング参加中<a href="ランキングURL" target="_blank"><img src="Bカテゴリ用バナー画像のURL" /></a></div>
<div class="cat_c<%cno>">ランキング参加中<a href="ランキングURL" target="_blank"><img src="Cカテゴリ用バナー画像のURL" /></a></div>

と追加、仮にAカテゴリの番号=1、Bカテゴリの番号=2、Cカテゴリの番号=3だとして、CSSに……

.cat_a0 { display:none; }
.cat_a1 { font-size:88%; }
.cat_a2 { display:none; }
.cat_a3 { display:none; }
.cat_b0 { display:none; }
.cat_b1 { display:none; }
.cat_b2 { font-size:88%; }
.cat_b3 { display:none; }
.cat_c0 { display:none; }
.cat_c1 { display:none; }
.cat_c2 { display:none; }
.cat_c3 { font-size:88%; }

……と追加すればOK、と。

 これまで、「cat」というクラス名に固執してしまうあまり、ずいぶんややこしい方法を記してしまっていました。カスタマイズするのが大変だった事だと思います。すみません。


 というわけで、以前に書いた「ややこしいカスタマイズ方法」を自戒をこめて以下に残しておきます。ああ、本当にアタマがカタイったら……
 ↓


 例えば、HTMLの方を

<div class="cat<%cno>"><a href="ランキングURL" target="_blank">ランキング参加中<img src="Aカテゴリ用バナー画像のURL" /></a></div>
<div class="cat<%cno><%cno>"><a href="ランキングURL" target="_blank">ランキング参加中<img src="Bカテゴリ用バナー画像のURL" /></a></div>
<div class="cat<%cno><%cno><%cno>"><a href="ランキングURL" target="_blank">ランキング参加中<img src="Cカテゴリ用バナー画像のURL" /></a></div>

みたいにして、Aカテゴリの番号=1、Bカテゴリの番号=2、Cカテゴリの番号=3だとして、CSSに

.cat0 { display:none; }
.cat1 { font-size:88%; }
.cat2 { display:none; }
.cat3 { display:none; }
.cat00 { display:none; }
.cat11 { display:none; }
.cat22 { font-size:88%; }
.cat33 { display:none; }
.cat000 { display:none; }
.cat111 { display:none; }
.cat222 { display:none; }
.cat333 { font-size:88%; }

みたいな感じで追加する、とか。
 この場合も、バナーを表示させないカテゴリ番号の分は、漏れなく「display:none;」設定を忘れずに。

 かなりややこしいけれど、慎重に設定すれば不可能ではないなあ。カテゴリの数が10以上ある場合は、更に少し工夫が必要になるわけだけど。
*    *    *

Information

Date:2009/05/29
Trackback:0
Comment:2

Comment

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

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

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

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

コメントの投稿

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







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

Trackback

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

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