このページでは、Vaster2でブログタイトルを画像に置き換える方法を説明する。

なお、このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら

手順

1．ブログタイトルの画像を作成する

まず、ブログタイトルの代わりに置き換える画像を作る必要がある。

設置後のイメージにもよるが、できれば背景を透過できるツールで画像を作成することが望ましい。

個人的にはフリーの高機能ドローソフト「Inkscape（インクスケープ）」がオススメ。

使い方を覚えるまで時間がかかるだろうが、一度覚えてしまえば色んなことに使える便利なソフトである。

※Inkscapeのダウンロード・インストール・使い方などは、ググればたくさんヒットする

2．ヘッダーに画像を設定する

Bloggerの編集画面にて、「レイアウト」 → 「ページヘッダー（編集）」を選択して「ヘッダーの設定」を出す。

「ヘッダーの設定」にて、「説明を画像の後ろに表示する」にチェックを入れ、背景画像をアップロードする。

とりあえず、これでブログタイトルが画像に置き換わったと思う。

なお、ブログ説明を非表示にしたい場合は「タイトルと説明の代わり」にチェックを入れて画像をアップロードする。

3．CSSを編集して配置を整える

Vaster2（Blogger）の場合、上の方法で背景画像を設定すると「#header-inner{}」の横幅の部分に画像が配置される。

そのため、ブログタイトルのリンク範囲が「#header-inner{}」内に設定した「width」の範囲となる。

当サイトのようにブログタイトルを中央寄せにしたい場合、「width」の値が大きいとリンクの範囲が不自然になってしまう。

そこで、タイトル画像とリンクの範囲を合わせたい場合は「width」を画像の横幅と同じ値に設定するとよい。

また、タイトル画像を中央寄せにする場合は「.Header img{}」を追加して、コードを書き加える必要がある。

詳しい設定は、下記のコードを参照して欲しい。

コード

応用

背景画像を別に設定する

当サイトのようにタイトル画像とヘッダー背景画像を別に設定したい場合は、以下の方法で設定すると良い。

［例］ヘッダー背景にパターン柄の背景画像を設定するCSS

【方法】

・背景画像をアップロードしてURLをコピーする
・「.Header{」を検索する
・「.Header{}」の中に、上記CSSの追記部分を書き込む

・Vaster2のヘッダーのカスタマイズについてはこちら

備考

課題

今回紹介した方法は、ブログタイトルを中央寄せにする場合のものである。

Vaster2を使ったブログで、タイトル画像を上手く左寄せにしているサイトがあるが この方法とは別物だろう。

その方法については分からないので、それは今後の課題として分かり次第 追記したいと思う。

なお、ブログタイトルのリンクの範囲が気にならない場合はCSSの「.Header img{}」を消してもらえば良い。