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

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

アメブロのCSSが編集できるテンプレート

その前に前提として、
ブログ管理ページのメニューから
デザインの設定　→
CSS編集用デザイン

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

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

 

まずはヘッダー画像の設定をやってみた。。

アメブロのCSS編集画面

 

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を足していく形が良いかと思います。

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

 

ブログに関する設定画面

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

 

画像を上げるときの画面

画像の一覧が一気に見られるといいんですけどね;記事と同じくで、月別単位になってるようです。

 

ところでこの背景指定のCSS、
検索するとブラウザのAIがトップに出してくるコーディング。

これでほぼ完ペキと思われるw
検索表示も変わったなぁーというオドロキが。。😮

ヘッダーに画像を設定できたブログ例

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

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

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

コメント