ヘッダーに画像を設置する方法

はじめに

ヘッダー画像は、ブログの顔となる部分でもあります。

ヘッダー画像にインパクトがあれば印象に残ることもあるので、非常に重要視される箇所でもあります。

設置は画像を作成することに比べれば、そんなに難しいものではありませんので、是非やってみましょう。

赤枠で囲んでいる場所の画像です。

確認事項

適応テンプレート：CSS編集用デザイン(CSSが編集可能なら可)

ヘッダー用画像のアップロードをしてある前提で説明します。

ヘッダー用画像のアップロードの方法が解らない方は「ヘッダー用画像のアップロード方法 」をお読みください。

CSSの編集

①CSSの編集画面にいくには赤○のマイページの「デザインの変更」をクリック。

②テンプレートを変更する際に選ぶ画面になりますが、左２重赤○の場所に「CSSの編集」とありますのでクリック。

③CSS編集画面になりますので、今回は最下部の「/* その他、拡張があれば記述 */」の下に追加します。

④下記をコピペして、編集画面最下部の「/* その他、拡張があれば記述 */」の下に追加します。
赤字は画像のサイズに合わせて高さ調整。※数字を大小することで上下します。
青字はヘッダー画像のURLを入れて下さい。※青の文字は消して下さい。
※コピペが解らない方は「コピペの方法 」をお読み下さい。

/* ▼▼ヘッダー画像設定ここから▼▼ */
.skinHeaderArea{
height:300px;
background-image:url(ヘッダー画像のURL);
background-repeat:no-repeat;
background-position:center top;
}
/* ▲▲ヘッダー画像設定ここまで▲▲ */

⑤画像の高さがわからない場合は、とりあえず設定をしてから保存後、実際にブログを確認しながら調整していくか、ブログを違う画面で表示して確認するといいと思います。

以上の設定ができたら、CSSを保存してブログを確認しましょう。