カスタマイズが目標と言っておきながら、いつまでも殺風景なのもアレなので…
ヘッダ画像（ヒーロー画像）を設定してみました！
まず画像を用意します。
西郷どんオープニング映像を見た影響で、広がりのある美しいものにしたくなりました。
サイズは横幅1120ピクセルにします。
なのでこれより大きいサイズの画像からリサイズして作ってみてください。
Windowsの方はリサイズ超簡単!Proをダウンロードして使うのが簡単ですよ！
わたしも使っています。
容量圧縮もできますし（画質は落ちますけど）、Exif情報の抜き取りもやってくれます。
この画像の名前を仮にhero.jpgとつけておきます。
次に「ブログ管理画面」から「デザインの変更」を選んでクリックします。
次に「CSSの編集」をクリックします。
「ブログデザインヘッダ・背景画像用の追加」のセクションで「ファイルを選択」ボタンをクリックして、自分が入れたフォルダの中からトップ画像を選択します。
そして隣にある「アップロード」ボタンを押せばひとまず画像のアップロードが完了！
こんな感じになってアップロードされた画像を確認することができます。
画像サムネイルの下にある画像のパスをCSSで指定することにより背景画像として設定することができるようになります。
さっそくやってみましょう。
「現在使用中のブログデザインCSS」というところのフォームを見てください。
中身がカスタマイズできるCSSですので一番下までスクロールして以下の設定を追加で書き込みます。
/* ヘッダー画像設定 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(【ここに画像のURLを張り付けます】);
}
/* ヘッダーの高さ設定 */
.skin-bgHeader a {
height: 400px;
}
「表示を確認する」のボタンがあるので事前にうまく動いているか実際に見て確認します。 うまくいかないようなら「編集前の状態に戻す」ボタンで元に戻すことができます。
ヘッダ画像をつけるだけでグンとオリジナル感を出すことができました！