メモ : テンプレート1枚でやれるとこまで : Studio Ponytail

メモ : テンプレート1枚でやれるとこまで

2005年3月 6日 11:34 | コメント (0) | トラックバック (0)

　タイトルにメモとある通り、そのままテンプレート等に使えるテクニックではなく考え方の紹介です。以前、1つのテンプレートで各カテゴリーにちょっとした説明文を出す方法を考えたのですが、 Mac OS X 用のブラウザ Safari には CSS の日本語が化けるというバグがあり、実際に使うのは断念しました。（もっとも、このバグが無くても使えないアイディア倒れなシロモノでした）

　その時思いついた方法でどこまで頑張れるか試してみました。さて、部分的にでも何かの参考になる事はあるでしょうか。（無さそー）

カテゴリー毎に説明文を変える

　これ自体は非常に簡単で、「1つのテンプレートでカテゴリー毎にデザインを変える」の方法と、「○:after（もしくは before） {content: 表示させたい文字}」という CSS を組み合わせるだけです。

HTML 側

　このカテゴリーの説明：

CSS 側

.explanation_0:after {
content:"sb について書いています";
}

.explanation_1:after {
content:"自分で書いた絵を公開しています";
}

　{category_id} は記事のカテゴリー ID を表示させる独自タグですが、これを記事以外の部分で使った場合、そのページのいちばん上に表示されている記事のカテゴリー ID になります。つまり、各カテゴリーを表示させた場合、一番上に表示される記事の ID は当然表示中のカテゴリー ID と同じになるので、ID 0 のカテゴリーを表示させた時は「このカテゴリーの説明：sb について書いています」、同様に ID 1 では「このカテゴリーの説明：自分で書いた絵を公開しています」と表示されます。

ところで...？

　カンのいい人ならピンと来たかもしれませんが「{category_id} は、そのページのいちばん上に表示されている記事のカテゴリー ID になる」という事は、トップページには最新の記事のカテゴリー説明が表示されてしまいます。トップページとカテゴリー表示用のテンプレートを分けるのが、ごく真っ当な方法ですが、ここはアクロバティックな方法でなんとか1枚のテンプレートで押し通してみます。

トップページでは説明文を消す

　とりあえずトップページに各カテゴリーの説明が表示されるとまずいので隠してしまいましょう。つまり、トップページだけを特別扱いすれば良い訳で、 {selected_archive} という独自タグを使います。
　{selected_archive} は選択中のアーカイブ名を表示する独自タグで、sb というカテゴリーを選択中なら「sb」、イラストというカテゴリーなら「イラスト」という文字が表示されます。そして、トップページの場合は何も表示されません。この性質を利用して HTML と CSS を以下のようにします。

HTML 側

　　このカテゴリーの説明：
　

CSS 側

.explanation_disp_ {
display:none;
}

　トップページを表示させたときは explanation_disp_{selected_archive} は「explanation_disp_」になるので、CSS 側の設定にマッチして表示されなくなります。そして、トップページ以外を表示させた時は explanation_disp_sb や explanation_disp_イラストのようになるので設定にマッチせず、そのまま表示されます。（CSS によって隠しているので、HTML ソースには存在しています）
　ところが、月別アーカイブや日付指定表示などでは {selected_archive} として 2005/01 や 2005/01/15 などが表示されてしまうのため、他のカテゴリー表示同様、説明文は消えてくれません。つまり、月別・日別アーカイブ表示では結局ページ一番上の記事カテゴリーの説明が表示されてしまいます。そして残念ながらそれらを特別扱いする独自タグはありません。最初に書いた「このバグが無くても使えない」理由がこれです。もちろん、月別アーカイブ用に別のテンプレートを用意すれば活用できます。

まだやるか？

　さて、これでトップページで説明文を隠す事に成功しました。しかし、トップページにはトップページの説明が欲しいのが人情ってものでしょう。でも、それって単に「このカテゴリーの説明：」という定型文を HTML に書かずに CSS に含めてしまって、トップページ用に「このページは....」という説明文を用意すればいいのでは？
　ええ、そうですそうです、おっしゃる通りです。でもあえてさらに変なワザを使ってみたいのもまた人情です。

トップページだけ別の情報を表示する

　これは消すときの方法を応用するのみです。「explanation_disp_{selected_archive}」で各カテゴリーの説明文を消し、もう一つ「explanation_top_{selected_archive}」を作って、そこで説明文を表示させます。

HTML 側

　　　このカテゴリーの説明：
　　

CSS 側

.explanation_top_:after {
content:"ここは Studio Ponytail の WEB ページです";
}

　これで、トップページには「ここは Studio Ponytail の WEB ページです」というメッセージを、各カテゴリーには一部定型文の説明を表示する事ができました。壮大な手間をかけて無駄な事をしているように見えますが、以下のような応用も可能です。

とこんまでやってみた

　この手法を Studio Ponytail に応用したテンプレートです。トップページを表示させる時は、ページ上部のインデックスを What's New に再利用し、それ以下を全て「explanation_disp_{selected_archive}」で隠し、1つのテンプレートでトップページとそれ以外を表示させています。（この記事の後、ページ上部のタブ表示の方法を変更したので疑似トップページは最新の記事カテゴリーのタブに色がついてしまっています。この辺りも時間をかければ修正は可能です）

　[B] のトップページでは画像が選択できない事や（CSS で表示させた画像は選択できません）HTML ソースを見れば上記の方法を応用したものだと分かると思いますが、「http://www.studio-ponytail.com/sb.cgi?tid=22」の後ろに「&cid=1」などのカテゴリー表示用の ID をつけると、もっと簡単に1枚のテンプレートでレイアウトを切り替えている事が分かります。

　とことんまでやってみた、と書いていますが Studio Ponytail のレイアウトの場合、上から順にデータを表示させていくだけなので、 HTML と CSS を数カ所づつ書き換えるだけで済んでいたりします。

前の記事：maincategory_list 利用時の注意

次の記事：月別アーカイブリストの表記を変更する : sb 用

コメントを投稿する

コメントの投稿には JavaScript が必要です。
ブラウザの JavaScript 機能を有効にしてください。
投稿ボタンを押してもエラーになりますのでご注意ください。

トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/89

Studio Ponytail