バナーの背景に画像を入れる方法

うまいこといっても、ちょっとたつとスッカリ忘れてしまうので、メモしておきます。

１　バナー背景用の画像を準備する。私はブログの設定にあわせて、幅920pxにトリミングした画像を準備しました。

２　デザイン > レイアウト と進んで、Headerの編集ボタンをクリックする。

３　イメージの横にある「コンピュータから」のボタンをクリックする。

４　そのすぐ下にある「ファイルを選択」のボタンをクリックする。

５　ファイルを選んで、「選択」ボタンをクリックする。

６　プレースメントは、「タイトルと説明の背後」を選択しておく。

７　「保存」ボタンをクリックすると、ブログに反映される。

８　このままだと、バナー画像と、ページタブの間にまったく隙間がないので、カスタムCSSに次の内容を追加する。

　　　.widget-content {
　　　padding-top: 10px;
　　　}

これで、バナー画像とページタブの間に、10pxの隙間が空きます。

今回選択した画像は、いつも水鳥を撮影にいく広瀬川の郡山堰付近から、宮沢橋越しに仙台市中心部を眺めたものです。

背景画像にあわせて、ブログタイトルとブログの説明テキストの色を、白に変更しました。

それでも、ブログの説明テキストがいまいち読みにくかったので、「設定」で、テキストの途中に、<br />を挿入してみました。