
ブログのヘッダー画像を、お手持ちの画像へ変更する方法をご紹介します。ヘッダー画像を変更するには
1.
有料プランに申し込む(スタンダードプラン月額3,024円~)
2.
デザインカスタマイズを申し込む(PC&スマホ合わせて1回5,400円~)
3. 自分でスタイルシートを編集する(無料)
といった方法がありますが、今回ご紹介するのは
「3. 自分でスタイルシートを編集する(無料)」のやり方です。なお、自由に編集してくださってかまいませんが、この作業は HTML と CSS の知識が必要になります。間違った編集をしてレイアウト崩れが発生した場合は、ご自身で修正をお願いいたします。
シンプルテンプレートの例で説明
ちなみに、入れたいヘッダー画像が横980px縦200pxでしたら
「オリジナル★テンプレートの作成」から簡単に変更できます。初心者の方は、画像サイズを調整してここから変更するのが便利です。
どうしても980×200の比率じゃない画像を入れたい!という方のために、シンプルテンプレートを例にして、どこを変更したら良いのか説明していきます。
シンプルテンプレートはここから選べます。
横幅980pxのスタンダードなタイプです。古いテンプレートは幅が狭いものが多いのですが、現在の主流はこれくらいです。
シンプルテンプレートを選択したら、もう一度左サイドメニュー「テンプレート」を選択し、「カスタマイズ」をクリックします。
編集するのはこの
「スタイルシート」という部分です。右下の四角をドラッグすると、フレームが広がって編集しやすくなります。
スタイルシート「ヘッダー背景」を編集
シンプルテンプレートを選択しただけだと、上記のようになります。
これを、ヘッダー背景色#99ccff(
■←この色)にし、その上に透過PNGの雲の画像(左側がほぼ透明、横980px縦150px)が重なるよう変更してみます。
編集するのはスタイルシートの
「ヘッダー背景」です。初めは下記のようになっています。
-----------------------------------------------------------------
/* ヘッダー背景 */
#banner{
overflow: hidden;
-webkit-background-size: 3px 3px;
background-size: 3px 3px;
background-color: #00a5cc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #03cfff), color-stop(.5, transparent), to(transparent));
background-image: linear-gradient(#03cfff 50%, transparent 50%, transparent);
border-bottom: double 9px #ffffff;
}
-----------------------------------------------------------------
これを、下記のように変更します。
-----------------------------------------------------------------
/* ヘッダー背景 */
#banner{
background-color: #99ccff;
height: 150px;
width: 980px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.hida-ch.com/usr/t/a/b/tabata/header_bg.png);
background-size: 100% auto;/* IE8以下非対応 */
}
-----------------------------------------------------------------
主な変更点
・背景色 background-color は #99ccff(
■)
・高さ(縦) height は 150px
・幅(横)は width 980px
・背景画像 background-image は雲の画像
(//img01.hida-ch.com/usr/t/a/b/tabata/header_bg.png)
画像のアップロード、およびURLを調べる方法は
「バナー画像をブログのサイドバーにはる方法」をご参照ください。
これでヘッダー画像の変更は完了です。
でも、このままだとブログ説明文が見にくいですね。次回は、ブログタイトル・説明文のレイアウトを編集する方法をご紹介します。