- 前ページ
- 次ページ
前回のカスタマイズお試し（ヘッダー画像の設定）から、かなり間が空いてしまいました。
前回の続きとして、
（２）全体的な背景色の変更
（３）メニューバーの設置
を行っていきます。
まず（２）全体的な背景色の変更 は、以下の３ヶ所を編集します。
今回は、薄いピンク色（#fffafa）に設定します。
①本体部分の背景色
（1-2）基本背景 → /*コンテンツ背景、ヘッダー以下の背景色*/
.skin-blogBody, .skin-blogBodyInner {
background-color: #fffafa;
}
のbackground-colorに #fffafa を指定します。
②ヘッダー背景の背景色
（2-1）ヘッダー背景 → /*ヘッダー背景*/
.skin-bgHeader {
background-color: #fffafa;
}
のbackground-colorに #fffafa を指定します。
※前回の設定でヘッダー画像を配置しているので、この部分の背景色は画像に隠れて
見えませんが、念のため・・・。
③ヘッダー直下（ブログトップや記事一覧のリンクがある場所）の背景色
（3-3-a）ブログナビ上部 → /*背景、境界線*/
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #fffafa;
}
のbackground-colorに #fffafa を指定します。
以上の３ヶ所の色を設定することで、ブログ全体の背景色をカスタマイズできます。
またまた長くなったので、（３）メニューバーの設置 は、次回にします。
今回はココまで。
今回からは、
（１）ブログヘッダの画像変更
（２）全体的な背景色の変更
（３）メニューバーの設置
に挑戦していきたいと思います。
まずは、（１）ブログヘッダの画像変更 から。
①ヘッダ用の画像をアップロード
これは素直に画面の案内に従い、「ブログデザインヘッダ・背景用画像の追加」で
画像ファイルを選んで、アップロード。
問題なくアップロードできました。
②アップロードした画像を背景画像として設定
ここからCSSの編集になります。
①と同じ画面にある「現在使用中のブログデザインCSS」で、
（2-1）ヘッダー背景
→ /*ヘッダー画像*/
.skin-bgHeader{
}
の { と } の間に、以下を追加します。
background:url(https://stat.blogskin.ameba.jp/blogskin_images/20200817/21/b4/gd/j/o14400960tes10-acc0unt1597668273020.jpg) #ffffff center no-repeat; /*画像*/
height: 300px; /*画像の高さ*/
各設定値の意味は、以下の通りです。
- url： ①でアップロードした画像の「この画像のパス」
- #ffffff： 背景色
- center： 画像の配置（中央）
- no-repeat： 画像を1枚だけ表示（同じ画像を繰り返して表示しない）
- height： 300px：画像の高さ（縦幅）を300pxにする
長くなったので、（２）全体的な背景色の変更 より先は、次回以降にします。
今回はココまで。
ブログのタイトルなど、基本的な項目を設定したので、カスタマイズの
「はじめのはじめの一歩」として、デザインの変更をやってみました。
CSS編集用デザインなら、他のデザインに比べてカスタマイズできる
範囲が広い、というのをアメブロカスタマイズのことを調べて一番最初に
知って、そもそもこの「お試し用ブログ」はそのために始めたものなので
CSS編集用デザイン（スタンダードタイプ）を選びました。
ちなみに、レイアウトは２カラムで、サイドバーが右側にくるタイプに
しました。
スッキリしてるかなと思ったので。。。
今後は、実際にCSSを編集していろいろとカスタマイズしていきたいと
思います。
一気に進めるのはシンドイので、今回はココまで。