アメブロちょこっとカスタマイズの目次① 準備編
② 背景色の変更
③ ヘッダー画像を自分オリジナルに
④ ”次の記事への移動”ボタンを可愛く
⑤ ナビゲーションバーを可愛く
①の準備をしたら、あとはお好みで変更したい記事を読んでみてください
ブログを開いたときに一番最初に目に入るのは
ヘッダー画像
です
ここを自分の好きな画像にするだけで、ぐっとオリジナル感がでます。
ちなみに私のヘッダー画像は小笠原の海
南島という無人島の風景です。
その写真に、CANVAというサイトを使ってタイトルの文字を追加してます。
それでは、ヘッダー画像の準備ができたら早速ブログに設置開始～
前回のブログで、CSSの中の
background-color: #ffffff;
}
のところでヘッダー画像の背景色が変えられるということを説明しました。
この下に画像を設置するためのCSSを追加します。
（※前回の説明は既にあるCSSの変更だったのですが、今回は新しくCSSを追加しますご注意あれ
）
background-color: #ffffff;
}
background: no-repeat scroll center top;
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20200109/22/6a/J6/j/o11200548kuo-liko157857.jpg);
}
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 100%;
}
.skin-bgHeader [amb-layout="headerInner"]>a,
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 540px;
}
display: none;
}
こんな感じです
一番上の
.skin-bgHeader {
background-color: #ffffff;
}
というのがもともとある部分ですね。
.skin-bgHeader {
background: no-repeat scroll center top;
以下の文章をコピペしてください。
青字の部分の『https:// 』の部分を自分のアップロードした画像のURLに変更すると、自分のお好みのが画像に変更できます。
また、アップロードしたい画像の縦のサイズによって、
height: 540px;
の540pxの数字を変更してください。
＜ヘッダー画像のURL取得方法＞
では次に、画像のURLってどうやって取得できるの？？
っていう話をします。
CSS編集画面の左上の方に、『参照』というボタンがあるのでこちらを押して
アップロードしたい画像を選びます。
選び終わったら右上の『アップロード』というボタンを押せばアップロード完了です。
アップロードできたら、こんな感じで画像が表示されます。
赤丸のところにURLがあるので、このURLをコピーして先ほど説明したとこに貼り付けたらOK
ヘッダー画像を変えるだけで、ぐっと自分のオリジナル感が出ます。
ぜひお試しあれ
もし、自分でやってみたけどわかんなかったー
っていう場合はお手伝いしますので、下記のお申込みフォームからお申込みください。
『アメブロプチカスタマイズ』
という名前のサービスです。
ヘッダー画像設置のお手伝い：1000円でご提供中です
ご質問がある場合も、上のフォームからお問い合わせください
次はヘッダーの下にある
前後の記事に移動するボタン
です。
続く → アメブロカスタマイズの方法 ～次の記事への移動ボタンを可愛くする～
赤い部分の色の変え方
と気づいて