ブログのタイトルを画像にする方法としては、テキストを画面外へ飛ばして背景画像を表示させたり、単純に img 要素を使ったりと、いくつかの方法があります。 このブログでは、シンプルに img 要素を使って表示させています。ブログのタイトル(サイトタイトル)を img 要素にするのって、アクセシビリティ上敬遠されがちかもしれませんが(最近はどうなんだろう?)、ちゃんと alt 属性に適切な言葉を入れ...
ブログのタイトルを画像にする方法としては、テキストを画面外へ飛ばして背景画像を表示させたり、単純に img 要素を使ったりと、いくつかの方法があります。
このブログでは、シンプルに img 要素を使って表示させています。ブログのタイトル(サイトタイトル)を img 要素にするのって、アクセシビリティ上敬遠されがちかもしれませんが(最近はどうなんだろう?)、ちゃんと alt 属性に適切な言葉を入れればいいじゃん、という考えです。
さて、今回は、知っている人には今更何をっていう感じかもしれませんが、ブログのタイトル画像を Movable Type のアイテムで管理してみます。
仕組みと言うほどのものではありませんが、次の二つのルールを守って画像をアップロードすればブログタイトルにその画像が表示され、そうでなければテキストのブログタイトルが表示されるようになります。
さて、今回は 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 タグで囲って、アイテムの情報を引き出します。各モディファイアで次のように設定しています。
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 要素内の各属性は次のとおりです。
次に、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 」タグを削除して、全体を再構築しなおすと、テキスト表示になりました。
以上です。