ブログのタイトルを画像にする方法としては、テキストを画面外へ飛ばして背景画像を表示させたり、単純に img 要素を使ったりと、いくつかの方法があります。

このブログでは、シンプルに img 要素を使って表示させています。ブログのタイトル（サイトタイトル）を img 要素にするのって、アクセシビリティ上敬遠されがちかもしれませんが（最近はどうなんだろう？）、ちゃんと alt 属性に適切な言葉を入れればいいじゃん、という考えです。

さて、今回は、知っている人には今更何をっていう感じかもしれませんが、ブログのタイトル画像を Movable Type のアイテムで管理してみます。

アイテムでの管理する仕組み

仕組みと言うほどのものではありませんが、次の二つのルールを守って画像をアップロードすればブログタイトルにその画像が表示され、そうでなければテキストのブログタイトルが表示されるようになります。

• Movable Type の「ファイルアップロード」を使用してサーバーにアップロードする。
• 「 @sitename 」というタグを付ける。

カスタマイズするテンプレートモジュール

さて、今回は Movable Type のデフォルトテンプレートを使ってカスタマイズします。カスタマイズするのは、テンプレートモジュールの「バナーヘッダー」で、以下の青字部分が今回カスタマイズする箇所です。

<mt:If name="main_index">
 <h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
 <h2 id="header-description"><$mt:BlogDescription$></h2>
<mt:Else>
 <div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
 <div id="header-description"><$mt:BlogDescription$></div>
</mt:If>

「バナーヘッダー」のカスタマイズ

ブログのタイトルを変数で取得

まずは、上記「バナーヘッダー」の青字の BlogName タグでブログのタイトルを取得している部分を、次のように GetVar タグに変更します。

<mt:If name="main_index">
 <h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:GetVar name="site_name"$></a></h1>
 <h2 id="header-description"><$mt:BlogDescription$></h2>
<mt:Else>
 <div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:GetVar name="site_name"$></a></div>
 <div id="header-description"><$mt:BlogDescription$></div>
</mt:If>

これで、site_name という変数の値を取得するようになりました。今はまだ変数が定義されていないので、何も表示されません。

変数の定義

次に、上記ソースの If タグよりも前の位置で変数 site_name を次のように定義します。

<mt:SetVarBlock name="site_name">
<mt:Assets tag="@sitename" type="image" lastn="1">
 <mt:AssetIfTagged tag="@sitename">
 <img class="siteName" src="<$mt:AssetURL$>" alt="<$mt:BlogName$>" width="<$mt:AssetProperty property="image_width"$>" height="<$mt:AssetProperty property="image_height"$>" />
 <mt:SetVar name="site_name_count" value="1">
 </mt:AssetIfTagged>
</mt:Assets>
 <mt:Unless name="site_name_count">
 <$mt:BlogName encode_html="1"$>
 </mt:Unless>
</mt:SetVarBlock>

これで、「 @sitename 」というタグを付けて画像をアップロードするとその画像がブログのタイトルとして表示され、そうでなければカスタマイズ前と同様にテキストのブログタイトルが表示されるようになります。

順番に解説します。

まず、全体を SetVarBlock タグで囲って、変数 site_name を定義しています。

<mt:SetVarBlock name="site_name">
....
</mt:SetVarBlock>

SetVarBlock タグ内の上段で、ブログタイトルを画像にするときの設定をしています。

<mt:Assets tag="@sitename" type="image" lastn="1">
 <mt:AssetIfTagged tag="@sitename">
 <img class="siteName" src="<$mt:AssetURL$>" alt="<$mt:BlogName$>" width="<$mt:AssetProperty property="image_width"$>" height="<$mt:AssetProperty property="image_height"$>" />
 <mt:SetVar name="site_name_count" value="1">
 </mt:AssetIfTagged>
</mt:Assets>

全体を Assets タグで囲って、アイテムの情報を引き出します。各モディファイアで次のように設定しています。

tag="@sitename"

「 @sitename 」タグの付いているアイテムの情報を取得

type="image"

画像のアイテムの情報のみ取得

lastn="1"

1 件のみのアイテムの情報を取得

Assets タグ内に AssetIfTagged タグを入れ子にし、tag="@sitename" モディファイアで、「 @sitename 」タグが付いているアイテムがある場合のみ、AssetIfTagged タグ内の次のテンプレートを処理するようにしています。

<img class="siteName" src="<$mt:AssetURL$>" alt="<$mt:BlogName$>" width="<$mt:AssetProperty property="image_width"$>" height="<$mt:AssetProperty property="image_height"$>" />
<mt:SetVar name="site_name_count" value="1">

ここで img 要素を出力し、最後に site_name_count という変数に 1 を設定します。img 要素内の各属性は次のとおりです。

src="<$mt:AssetURL$>"

アイテムの URL を取得します。

alt="<$mt:BlogName$>"

画像の代替テキストをブログのタイトルにします。

width="<$mt:AssetProperty property="image_width"$>"

画像アイテムの横幅を取得します。

height="<$mt:AssetProperty property="image_height"$>"

画像アイテムの高さを取得します。

次に、SetVarBlock タグ内の下段で、「 @sitename 」タグが付いているアイテムがなかった場合の設定をします。

 <mt:Unless name="site_name_count">
 <$mt:BlogName encode_html="1"$>
 </mt:Unless>

もし「 @sitename 」タグが付いているアイテムがあれば、上段の最後で変数 site_name_count に 1 が設定されているはずですので、Unless タグで「変数 site_name_count に 1 が設定されている」以外の場合のみ BlogName タグを処理するようにしています。

表示結果

テストとして、次の画像を「 @sitename 」タグをつけてアップロードします。

アップロード後に全体を再構築すると、次のようにブログのタイトルが画像になりました。

「一覧」＞「アイテム」のアイテムの編集で「 @sitename 」タグを削除して、全体を再構築しなおすと、テキスト表示になりました。

以上です。