せっかくアメブロを書くなら自分だけのオリジナルデザインで、
かわいくおしゃれにしたいですよね。
今回は、自分でできるアメブロのヘッダー画像の設定方法を
初心者さんににもわかりやすくお伝えしていきます。
step
1アメブロのデザインをCSS編集OKなものにする
アメブロのデザインの選択画面の下の方にあるカテゴリー一覧の中から「カスタム可能」をクリックします。
step
2CSS編集用デザインから1つを選びます。
もし、ホームページのように横並びのメニューも置きたい場合は、CSS編集用デザインを選んでください。
step
3レイアウトを選びます。
両サイドにバナーなどを置ける3カラムは、たくさんの情報を載せられます。
2カラムは、すっきりしたデザインで記事をしっかり読んでもらえるレイアウトです。
レイアウトを選んで適用をクリックすると保存されます。
step
4ヘッダー画像を設定します。
デザインの変更画面で適用中のデザインにある「CSSの編集」をクリックします。
step
5ヘッダー画像をアップロードします。
ファイルを選択を押して画像をアップロードします。
step
6画面の下のCSSを編集します。
/* (2-1) ヘッダー背景のところを以下のコードにコピー＆ペーストで書き換えてください。
/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background:url(画像のURL) #ffffff center no-repeat; /* ヘッダー画像 */
background-color: #ffffff;
height: 400px; /* 画像の高さ */
}
step
7CSSの画像のURLのところを書き換えます。
ヘッダー画像をアップロードすると、画像とURLが表示されます。
画像のURLをコピーして、CSSの（画像のURL）というところに貼り付けてください。
変更前
background:url(画像のURL) #ffffff center no-repeat; /* ヘッダー画像 */
変更後
background:url(https://stat.blogskin.ameba.jp/blogskin_images/20220217/18/66/l5/p/o11200400rioweblabo1645089318309.png) #ffffff center no-repeat; /* ヘッダー画像 */
完成♪
ヘッダー画像が表示されました。
ヘッダー画像をオリジナルに変えることで、読者さんに何屋さんか一目で伝えることができ安心感も与えられますね。
今回は、アメブロのヘッダーを自分でオリジナル画像に変更するカスタマイズ方法をお伝えしました。
お疲れ様でした。
