ブログタイトルのロゴ画像化（MT編）

今回は、MovableTypeのブログタイトルにロゴ画像を使用するカスタマイズ方法について説明します。

ブログのタイトルは、デフォルトではテキストで表示されますが、指定できるフォントやデザインに制限がありますね。しかし、タイトル部分に画像を使用することで、自由なカスタマイズが可能になります。


タイトルにロゴ画像を使用するには、下記の手順で進めてくださいね。

1. ロゴ画像の作成
まず、タイトル部分に使用するロゴ画像を作成します。
ロゴ画像の作成は、「PhotoShop（有料）」や「Pict Bear（無料）」などの描画ソフトや、「logo!」や「LogoShader」などのロゴ作成ソフトを使用したり、「Auto logo」などのロゴ自動作成サイトを利用すると便利です。

２. 画像ファイルのアップロード
作成したロゴ画像をサーバーにアップロードします。画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. メインページ、カテゴリー・個別・日付アーカイブの編集
次に、「メインページ」などのHTMLファイルを編集します。
MovableTypeのデフォルトテンプレートの場合、下記の箇所を編集します。

＜メインページ、カテゴリー・個別・日付アーカイブ＞

<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>

これを下記のように書き換えます。（赤色=追加部分）

<h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><span><$MTBlogName encode_html="1"$></span></a></h1>

４. 検索結果ページの編集
次に、ブログ内に設置されている検索ボックスで検索した際に表示される「検索結果ページ」を編集します。検索結果ページのタイトル文字とロゴ画像が重なって表示されている場合は、この項目を参考にしてください。

検索結果ページをカスタマイズするには、
サーバーの cgi/mt/serch_templatesフォルダ内のdefault.tmplを編集します。

編集内容は、３. メインページ、カテゴリー・個別・日付アーカイブの編集と同じですので、上記のように書き換えて保存してください。

５. CSS（スタイルシート）の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記の記述を追加します。

＜スタイルシート＞

h1 a { display: block; background: url(画像URL); background-repeat: no-repeat; height: xxpx; width: xxpx; margin: 0px; } h1 span { display: none; }

画像URL、height（画像の高さ）、width（横幅）は、アップロードした画像の内容に変更してくださいね。

編集後は保存して再構築すると完了です。
これで、ブログタイトルが見映えよくなくなりましたね。



今回のカスタマイズ内容について説明します。

まず、ブログのタイトルにロゴ画像を使用する方法はいくつか考えられます。
1．タイトルを削除して、ロゴ画像を貼り付ける方法
2．テキスト（タイトル）を画像に置き換える方法
3．タイトルを残して、背景画像としてロゴ画像を指定する方法


1．のタイトルを削除して、ロゴ画像を貼り付ける方法とは、元々あるブログタイトルをばっさり削除して、ロゴ画像を貼り付けて、そこからトップページへのリンクを貼る方法です。具体的なカスタマイズ方法は下記のようになります。

＜メインページ、カテゴリー・個別・日付アーカイブ＞

<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>

これを下記のように書き換えます。

<a href="トップページ"><img src="画像ＵＲＬ" border="0" alt="ブログタイトル" /></a>

ただし、この方法だと、h1タグを削除することになり、記述的に問題がありますね。（ただし、h2タグが出現する前に、h1タグを追加すればOKです）

2．のテキストを画像で置き換える方法は、残念ながらスタイルシートには用意されていません。

しかし、置き換えたように見せかける方法はあります。
それが、今回説明したカスタマイズ方法です。
つまり、３．のタイトルを残して、背景画像としてロゴ画像を指定する方法です。

ただし、そのまんま、ブログのタイトルの背景にロゴ画像を指定しても、ブログタイトルとロゴ画像が重なってしまいますね。そこで、span要素の登場です＾＾
スタイルシートで

h1 span {　display: none;　}

と指定し、テキストを非表示にして、画像のみを表示することで、置き換えたように見えるというわけです。

以上、タイトルにロゴ画像を使用する方法（MT編）について説明しました。不明点やうまくいかなかった場合はコメントか掲示板で質問してくださいね。もちろんうまくいった場合でもコメントＯＫです＾＾

参考になりましたら、1クリックの応援お願いします。