アメブロで、ヘッダー画像を設定する方法

今日時間があったので、少し弄ってみましたが、
WordPressやMovable Typeで作らないと思い通りには作れませんね。。

ただ、トップ画像やフリースペース等に画像を入れたりすることは簡単に出来るので、
オリジナル感を出したい人は、ぜひチャレンジしてみてください。

ネット検索すると、バージョンが古い情報がヒットするので、簡単ですがメモしておきます。


①デザインの変更 > CSS編集用デザインを選択します。
『CSSの編集』リンクをクリック

②自分で用意したヘッダー画像やブログ背景画像をアップロードします。
『選択』ボタンを押下 > 自分のパソコンから画像を選択 > 『アップロード』ボタンを押下

画像のパスが表示されるので、これをコピーしておきます。

画面下部にCSSファイルの設定が表示されているので、.skin-bgHeaderという要素を探します。
これに以下のような設定行を追加すると画像が表示されます。

background: url(さっきコピーした画像のパス) no-repeat;

画像のサイズと合わない場合は、heightなどの指定を入れます。
私の場合だとデフォルトで画像が見切れていたので390pxを指定しました。

↓こんな感じ

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {

background: url(http://stat.blogskin.ameba.jp/blogskin_images/20160330/11/2c/d3/j/o09800400restaurant-maker1459304591327.jpg) no-repeat;

height: 390px;

}