Blogger Labo:【Vaster2】ブログタイトルを画像に置き換える方法

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

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

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


手順


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


Blogger Labo:【Vaster2】ブログタイトルを画像に置き換える方法

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

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

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

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

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

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


Blogger Labo:【Vaster2】ブログタイトルを画像に置き換える方法

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

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

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

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


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


Blogger Labo:【Vaster2】ブログタイトルを画像に置き換える方法

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

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

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

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

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

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

コード

#header-inner{
    width:1040px; /* 画像の横幅に設定する */
    margin:0 auto;
    padding-top:20px; /* タイトル画像の上の余白 */
    padding-bottom:20px; /* ブログ説明の下の余白 */
}
.Header img{
    margin: 0 auto; /* タイトル画像を中央寄せする */
}

※赤字の部分は変更・追記点

応用


背景画像を別に設定する


Blogger Labo:【Vaster2】ブログタイトルを画像に置き換える方法

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

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

.Header{
   width:100%;
   background-color: $(header.background.color);
   padding-bottom: 30px;
   border-top:3px solid $(header.topborder.color);
   background-image: url("背景画像のURL"); /* ヘッダーの背景画像 */
   background-clip:border-box; /* 背景画像の表示形式 */
}

※赤字の部分を追記する

【方法】

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

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

備考


課題


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

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

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

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