ブログスタイルのサイトでは、サイドメニューとしてカテゴリーやエントリーを表示させることがあります。
そして、例えばカテゴリーに目を移してカテゴリー間を移動してみると、確かにウロウロ出来るのですがサイドメニューの表示に変化はありません。
今、自身(閲覧者)がどのカテゴリーに居るのかをもうちょっと判り易くするために、移動時にはそのサイドメニューのカテゴリーに変化を与えてみる事にしてみました。
ID等のユニークな文字列を利用する
MTでは、カテゴリーに対して CategoryID というものがひとつひとつに付加されますので、今回はこれを利用してみましょう。
先ずは、表示させてるサイドメニューのカテゴリー表記に、ID属性を持たせます。
これはカテゴリーをリスト状態にしているこのサイトの場合の例です。
<li id="cat-<$MTCategoryID$>"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
リストタグにID持たせちゃいました。
カテゴリーIDはユニークなので他とかぶる事は恐らくありません。
なので、それに対してスタイルシートで変化を与えてみる事にします。
スタイルシートの自動生成・自動適用
無精者なのでラク出来るものならラクをしたい！という事でCSSを自動生成させます。
そして、その中身は先につけたIDを指定して、例えば背景色を入れたり背景画像を入れたものです。
動作テストとして背景色やボーダーを指定したものをとりあえず入れてみます。
#cat-<$MTCategoryID$> {
background: #222222;
border: 1px solid #FF9999;
}
上記CSSのIDに関しては、記述をリスト属性に持たせたIDと同じにしておきましょう。
「cat-」を省いて MTCategoryID だけで指定した場合、上記CSS内の「cat-」は不要ってことになります。
そして、これをテンプレートして作成。
テンプレート→アーカイブ→テンプレートを新規作成
名前は何でも良いです。とりあえず「今ここカテゴリー」とでもして保存。
次に自動生成。
(ブログの)設定→公開→アーカイブ・マッピング→マッピング新規作成
- アーカイブの種類→カテゴリー
- テンプレート→今ここカテゴリー (さっき作ったやつ)
出来たらカテゴリーと同じ階層にCSSファイルが出来るようにします。
ファイル名もIDで統一しちゃったりして。
出力フォーマットのプルダウンを「カスタマイズ」にして、以下のようにしてみます。
%c/cat-<$MTCategoryID$>.cssカテゴリーと同じ階層に、「cat-"カテゴリーNo".css」ファイルが作成されるようになりました。
次はカテゴリー・アーカイブ テンプレートの改変。
以下を<head>～</head>内に記述。
<link type="text/css" rel="stylesheet" href="<$MTCategoryArchiveLink$>cat-<$MTCategoryID$>.css" />カテゴリー・アーカイブの時に、同じ階層の生成されたCSSが適用されるようになりました。
あとはカテゴリーを再構築すれば、CSSファイルが生成されてIDにそのスタイルが適用されちゃいます。
エントリーに対しても行ってみる
同様の手順で、例えばサイドバーに表示させている「最近のエントリー」一覧にもこれを適用させる事が出来ます。
エントリーの場合は、MTEntryID というユニークな文字列を利用します。
<li id="<$MTEntryID pad=""$>">pad というアトリビュートについてはこんな感じです。
- 0を指定(又はアトリビュート指定なし)・・・エントリーIDをそのまま表示
- 1を指定・・・エントリーIDが6桁に満たない場合、0を付加して6桁表示にします
ここでは指定なしの方向で進めてみます。
スタイルシートをテンプレートで作成。名前は「今ここエントリー」みたいな感じで。
#ent-<$MTEntryID$> {
background: #222222;
border: 1px solid #FF9999;
}
次に自動生成。
(ブログの)設定→公開→アーカイブ・マッピング→マッピング新規作成
- アーカイブの種類→エントリー
- テンプレート→今ここエントリー
エントリーページのURLをディレクトリ単位にしてる場合は、同じ階層にCSSファイルを生成させればそれで済むのですが、ファイル名を作成して生成させてる場合はちょっと変わってくるのでその方法を例として紹介です。
生成されるファイルは一定の箇所にまとめておきたいので、アーカイブURL直下に cssディレクトリを作ってそこに保存されるようにしてみましょう。
なので、こんな感じで 今ここエントリー の出力フォーマットを指定。
css/ent-<$MTEntryID$>.cssそして、エントリー・アーカイブの<head>～</head>内に以下の記述を用いて読み込ませます。
<link type="text/css" rel="stylesheet" href="<$MTBlogArchiveURL$>css/ent-<$MTEntryID$>.css" />これで、もしエントリーページのサイドバーなんかに最近のエントリー一覧を表示させてる場合は、その個別のページにジャンプした際に、読んでるページと同じ内容のタイトルが装飾されて表示され、認識し易くなりました。
あとがき
私のサイトで発生してる問題がひとつあって、サイドバーのカテゴリーに移動した際、サブカテゴリーを指定しているものはそれも含めて装飾が施されてしまう事です。
火狐では正常に表示されてるみたいですけど。
とりあえず、こんな方法がありますよって紹介だけなので今は特別何もしません。
で、この方法の何が有効なのかというと、(最近の)エントリーをサイドバーに表示させて、それをサイトのコンテンツメニューとして用いてる場合に威力を発揮するかと思います。
個々のページに移った際に、そのエントリータイトル(コンテンツメニュー)に装飾を施せておけば、ナビゲーションとして有効に機能するのではないでしょか。
そんな気分なのです_(．．)_
おひさしぶり～
良い感じのカスタマイズですね。
PHPでも似たような事ができそうですが、どっちがシンプルかな？
>>oscar さん
お久しぶりなのです_(．．)_
あまりアーカイブマッピングを用いた記事を見かけないので(知らないだけかも)張り切って書いてみました。
同じ内容のものを別形式で出力出来る便利機能なのですが、使わないともったいないですね。
PHPでは・・・どうなんでしょう？自身は判らないのでoscarさんに期待してます！ヽ(・∀・)ﾉ