ブログの一番上の部分(ヘッダー)の背景を画像にする[Blogger / Vaster2]

Blogger用テンプレートVaster2のカスタマイズ記事です。

この記事は、ブログの一番上の部分(ヘッダー、ブログの名前の部分)の背景を画像にする方法を解説しています。

スポンサーリンク

修正前後の見本

修正前


ブログ名「あかりlog」の背景が真っ白です。
(真っ白すぎてどこが記事の背景との境かわかりにくいですね…)

修正後


ブログのヘッダー画像が設定できました。
それ以外にも、全体のバランスを見て、ヘッダー部分を少し縦に長く、ブログ名を少し下に調整しています。

修正方法

1. Vaster2のテンプレートから以下の部分を探します。

#header-inner{……}

注意:2か所ありますが上のほうです

2. {}の中に以下を付け加えます。

background-image: url("画像のURL");

”画像のURL”には、背景にしたい画像をアップロードしたURLを書いてください。
bloggerにアップした写真(Googleのアルバムに保管された写真)ももちろん使えます。

3. 画像が変形していて気になる方は以下を付け加えます。

background-size:cover;

画像の縦横比を変えずに、縦か横どちらかが100%になるようにトリミングします。

このほかに以下のものが使えます(それぞれcoverの部分に置き換えてください)。
contain: 画像全体が入るように変形する(画像の縦横比は変化しない)


関連記事:初心者でもわかるVaster2のカスタマイズ方法の記事リスト
スポンサーリンク

0 件のコメント :

コメントを投稿