ヘッダー画像をカスタマイズしたいという方向けに記事を書いています。
現在私が使用しているテンプレートは自作製作のためこちらのテンプレートを購入した人向けに紹介しています。
*2カラムレイアウト、CSSカスタマイズテンプレートを使用。HTML、CSS、プラグインはWeblearn自作
手順、
アメブロログイン後、マイページ→ブログを書く→デザインの変更を選択
デザインの変更にて、CSSの編集を選択
ブログデザインのCSSの編集画面にて、ブログデザインヘッダ・背景用画像の追加の場所でヘッダー画像にしたい画像をアップロードします。
ヘッダー画像のサイズは決まっており、横980px縦300pxにしてください。
画像をアップロードしたら、ブログデザインヘッダ・背景用画像の追加に先ほどアップロードした画像が表示されると思います。
アップロードした画像が表示されたら、その画像の下に画像パスという英数字で書かれた黄色い枠で囲まれたテキストがあると思います。
それをコピーしておいてください。
画像パスをコピー後、
ブログデザインのCSSの編集画面内の現在使用中のブログデザインCSSにて、スクロールしていくと
/* skinHeaderArea ブログヘッダー980pxエリア */
/*
*******************************************************************
！！！ヘッダー画像を変える場所です！！！
*******************************************************************
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
*/
.skinHeaderArea{
height:300px;
background-color:#f3f3f2;/*画像がないときは灰色が画像の領域分入るようになっています。*/
background-image:url(ここにURLを貼り付けます);/* ←ここに画像URLを入れる */
}
/*
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
*/
という部分があると思います。
これらを今から編集していきます。
background-image:url(ここにURLを貼り付けます);/* ←ここに画像URLを入れる */
ここにURLを貼り付けますという部分があると思います。
先ほどコピーした画像パスをそこにコピーしていきます。
background-image:url(http://.......);/* ←ここに画像URLを入れる */
上のような感じになります。
そしたら、保存ボタンを押して完了です。
以上がWeblearn自作テンプレートでのヘッダー画像の変更のやり方になります。
ヘッダー画像を指定していないと灰色の背景がヘッダー画像領域に指定されています。