［アメーバブログ］ヘッダーに画像を指定するには？

アメーバブログ（略してアメブロ）のカスタマイズです。

その前に前提として、
ブログ管理ページのメニューから

デザインの設定 ⇨ CSS編集用デザイン

を選択…
スタイルシートをカスタマイズできる、テンプレートを選んでます。

他デザインからはカスタマイズできないの？
ってことは試してませんで。
どうなんでしょ、、できるのかなぁw

画像は、設定・管理から入り、
画像管理からアップするのがやりやすい。

画像の一覧が
一気に見られるといいんですけどね;

記事と同じくで、
月別単位になってるようです。

画像の上げかたについては、
こちらをご覧ください（と端折ってｽｲﾏｾﾝ😅）

ブログ画像URLの違いについて

はてな、アメブロ、ムラゴンのブログ画像URLの貼りかたとその違いを比べてみました。

hobby-run.site

続いてヘッダー画像の設定です。。

編集は、
CSS編集用デザインの下にCSSの編集というボタンあり。

そこクリックすると記述欄が出てきます。

アメブロのCSSは見やすく設定しやすそう。

その記述欄の、
ヘッダー背景の箇所にコレを記述します。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-image: url("https://～～～.png"); /* 背景画像を指定 */
background-repeat: no-repeat; /* 繰り返しなし */
background-size: cover; /* 要素全体を覆う */
background-position: center; /* 中央に配置 */
background-color: #ffffff;
border: 1px solid #000000;
margin-top: -40px;
}

https://含め、
“ ”の中身は、ご自身で上げた画像リンクをコピペしてください。

background-image: url("https://～～～.png");

アメブロのCSS欄は、
デフォルトのCSSがすでに表記されており。

なので基本はそのままいじることなく、、

設定したいコードがあれば、
わかりやすく関連の箇所へ…

自分でつどタイトル入れて追加するなど、
CSSを足していく形が良いかと思います。

追加・修正したあとは、
下にある保存ボタンを忘れず押しましょう。。。

画像によっては、
細かい調整がいるかもしれません。

言ってるワタシの画像も、、
反映されたままの姿で…実は完璧なカットじゃないのですが。

ま、なんとなくこれで見れてるのでw
そのまま表示しちゃってます😆