タイトルヘッダーを画像に変更

既に気が付いている方もいると思いますが、当ブログのヘッダータイトルをテキスト形式から画像形式に変更しました。

少々間が空いてしまいましたが、ブログのタイトルを画像化するブログのカスタマイズ方法を紹介します。

その方法については以下を参照ください。

今まで、このブログのタイトルは下記のようなテキスト形式としていました。



しかし、ここ最近(と言ってもだいぶ前か･･･)のWeb2.0ブームで中々お洒落なタイトル画像を使用しているところが多く見受けられます。

そんなサイトを見ていて自分も変えてみたいなと思いつつ、中々変えられなかったのですが、このお盆を利用してちょっと変えてみました。結果的にはサイトにあまりマッチしていませんが、それは横に置いておいてその方法を紹介します。

画像のアップロード

まずは、タイトル画像とする画像の準備を行います。作り方に関してはここでは省きますので、自分にあった画像を用意してください。今回の画像は右記の画像です。その時、画像のファイル名は英数字とするようにして下さい。

準備できた画像を｢記事の投稿｣-｢画像・動画の登録、一覧、削除｣でアップロードします。

画像をアップロードしたらそのアドレスを取得します。

取得する方法は｢画像・動画の登録、一覧、削除｣の画面でアップロードした画像をクリックすると別ウィンドで画像が表示されますので、その時のアドレスを取得します。

タグの変更

アップロードした画像はとりあえずそのまま置いておいて、｢デザイン｣-｢オリジナルデザインの登録｣でオリジナルデザインの登録のページを表示します。

まずはトップページです。

オリジナルデザインの登録ページの｢トップページ｣のソースコードで

<h1 class="blogtitle">
<a href="<%BlogUrl%>" accesskey="1">
<%BlogTitle%>
</a>
</h1>

を探します。(適当に改行しています)

このソース部分を下記の様に書き換えます。

<h1 class="blogtitle">
<a href="<%BlogUrl%>" accesskey="1">
<img src="/usr/xyz/titleimg.gif" alt="<%BlogTitle%">
</a>
</h1>

ここで｢/usr/xyz/titleimg.gif｣の部分は先ほどアップロードした画像のURLの一部です。

以上で、｢トップページ｣のタイトル画像の変更が終わりです。




｢トップページ｣が完了したら｢個別記事｣｢アーカイブ｣も同様に変更します。

デザイン的には非常に不恰好ですが、タイトルを画像化する方法はわかるかと思います。