MTカスタマイズのエントリ。テンプレートタグの<$MTCategoryBasename$>を使ってカテゴリページをCSSにて表示切替する方法を紹介しています。
私のサイトでは、カテゴリページにてカテゴリ毎にタイトルを変更するようにCSSで設定してあります。これは、テンプレートタグの<$MTCategoryBasename$>を使ってCSSで切り替え表示をするようにしています。ページ全体をクラス指定で<$MTCategoryBasename$>を割り当て、CSSで設定を変えるようにすれば、見栄えを変えることも可能です。
<$MTCategoryBasename$>を使ってのCSS切り替え表示は、いくつものパターンが考えられます。とりあえず、私のカテゴリページでのタグを紹介しておきます。
MTCategoryBasename
カテゴリーのファイル名を表示します。
- 対応しているバージョン
- 3.3, Enterprise 1.0
テンプレートタグ：<$MTCategoryBasename$>
このテンプレートタグは、ファイル名＝フォルダ名に置き換えられます。例えば、私のサイトのMTカテゴリの場合、フォルダが"mt"なので、MTカテゴリのページにおいて、<$MTCategoryBasename$>は、"mt"という文字列に置き換えられます。
<$MTCategoryBasename$>を要素のクラス指定もしくは、id指定で設定しておくことで、CSSを使って表示を変えることが可能です。
当サイトカテゴリページコード
一部分のコードのみ紹介説明しておきます。
カテゴリページのタイトル部分のコードとなります。この下のブロックに前回紹介したサイトナビゲーションコードとなります。
上記のコードは下記のように生成されます。
<div class="cattitle">
<h2 class="mt">MT:WEBデザイン・制作に関するTIPS</h2>
<p class="f10w">MT3.31（Movable Type[ムーバルタイプ] ）に関する情報を保存しています。デザインのレイアウトカスタマイズからタグのカスタマイズ・プラグインの紹介など様々な情報を提供しています。テンプレート（無料）なども扱っています。</p>
</div>
<$MTCategoryBasename$>→mt
<$MTCategoryLabel$>→MT
<$MTCategoryDescription$>→MT3.31（Movable Type[ムーバルタイプ] ）に関する情報を保存し....（カテゴリの概要部分｛説明｝）
各テンプレートタグは、上記のテキスト・英数字に置き換えられます。カテゴリページもサイトの中では、1ページなので他のエントリ記事の一覧だけでなく、カテゴリについての説明も表示するようにしています。
<h2 class="mt">MT:WEBデザイン・制作に関するTIPS</h2>の部分は、本来ならテキストにて表示されますが、CSSの設定で作成した画像に置き換えるようにしています。以下のCSSの設定になります。置き換えられる画像の高さが50pxなので、CSSにて高さ50ピクセルのスパンを取るように設定してあります。
CSSの設定は以下の通りになります。
<h2></h2>で囲まれたテキストは、上記の設定で左の画像に置き換えられるようにしています。
上記の画像は、ベースラインを背景と同じ色にて作成しています。背景が白の場合は、このような表示になりますが、このブログの背景の上に乗せることでくっきりとした表示になります。
テキストを画像に置き換えるCSS
background-image: url('images/movabltype.gif'); （説明：背景画像のファイル指定）
background-position:left top; （説明：背景画像の位置指定）
background-repeat:no-repeat;（説明：背景画像の繰り返し無し指定）
height: 50px;（説明：高さ指定）
text-indent: -999em;（説明：インデント幅指定）
上記のコードは、ブロック要素などのタグでその背景を任意の画像に指定します。もちろん繰り返しは無しで、text-indentで実際のテキストを左のとんでもない位置に飛ばしています。このコードで設定すれば、テキストと画像を置き換えることが可能です。 尚、インライン要素の場合、display:block;指定が必要となります。
SimpleAPI 見出しジェネレーター(仮) というサイトが最近できたので、こちらにて画像を作成し、それを置き換えることなんかをしたら、サイトのメリハリができると思います。
<$MTCategoryBasename$>のほかの使い方
インライン要素などでCSS設定しておくことで文字の色もカテゴリ毎に変えたりすることができます。
<span class="<$MTCategoryBasename$>"><$MTCategoryLabel$></span>
上記のコードで以下のCSSの設定でカテゴリページにてカテゴリ名を赤色も文字色に変えることができます。色の指定を好きなものにすれば、いろんな表現をすることが可能です。
.フォルダファイル名｛
color:red
};
ページ全体をクラス指定するともっと全体的にいろんな部分でカラーなど表示を変えることができます。
各種CSSの設定が可能ですので試して使ってみてください。尚、<$MTCategoryBasename$>は、MT3.3以上のバージョンのみ対応しています。気をつけてください。
他にも違った使い方がありましたら、コメントトラックバックください。よろしくです。
コメントする