ヘッダーに画像を貼り付ける: I Found It!

2016/09/02

ヘッダーに画像を貼り付ける

今日はヘッダ（デフォルトではタイトルとブログ内容が表示される部分）に好きな写真を貼り付けます。
今回筆者が貼り付ける画像はこちら。

1280×1920の画像です。少しでもサイズを小さくしたい方はヘッダに合わせて横長にトリムしておきましょう。画像を貼り付けてからバランスを見て、ヘッダのサイズ変更や位置調整をしたいので、今回はそのまま使ってみます。
cssで画像を指定するパスを確認するため、記事の作成画面でこの画像を貼り付け、出力されるタグの内容を確認しておきます。こんな形式ですね。

<a target="_blank" href="[画像のパス]"><img alt="[ファイル名]" src="[サムネイルのパス]" border="0"></a>

画像のパスの部分が必要になるので、メモしておきます。（サムネイルのパスと間違えないように）

ブラウザでブログの画面を表示してF12（Safariを含め、たいていのブラウザで開発者ツールでページのソースを表示できます）で確認すると、「header」というidの<div>の中にタイトルを表示する<h1>とブログ説明を表示する<span>があることが確認できます。（画面はEdgeのDOM Explorerのものです）

headerのbackgroundを変えればいいことがわかったので、いよいよcssを編集します。

「デザイン > デザイン設定」で、PCの使用中のテンプレートのcss編集リンクをクリックします。上の方にこんな記述があると思います。（テンプレートによっては少し違うかもしれません。div#header{ }は「header」というidのdivのスタイル、という意味です。これを探しましょう）

/* 　ヘッダー　  */

div#header {
	padding:20px 0;
	background-color:#ffffff;
	display:block;
}

h1 a { color:#333333; text-decoration:none;} 
h1 a:hover { color:#333333; text-decoration:underline;} 

#header .description{
  color:#000000;
}

headerの背景に白（#ffffff）が指定されているので、これを画像指定に書きかえます。不要な部分は削除してくださいね。

    /* background-color:#ffffff; */
    background:url("画像のパス");

ついでに同じくdiv#headerに、こちらも指定してみました。

    background-size: cover; /*対象をぴったり覆えるサイズまで画像を拡大・縮小する指定*/
    background-position: center; /*画像の中心を対象の中心に合わせて配置する*/
    height:200px; /*ヘッダの高さ変更*/

プレビューで見てみると

あらら…。
桟橋の向こうの景色をもうちょっと入れたいので、縦だけ少しずらして高さも調整しました。
ウィンドウサイズを変更してもヘッダのサイズが変わらないので、固定値（px）で指定しています。

/* 　ヘッダー　  */

div#header {
	padding:20px 0;
	/* background-color:#ffffff; */
        background:url("画像のパス");
        background-position: 0px -100px; /*画像縦位置調整*/
        height:250px; /*ヘッダの高さ変更*/
	display:block;
}

ついでにタイトルとブログ説明の色変更と位置調整もしておきます。

h1 a { color:#333333; text-decoration:none;} 
h1 a:hover { color:#333333; text-decoration:underline;} 

#header>h1 a { 
        color:#ffffff; 
        text-decoration:none;
        margin-left: 30px;
} 
#header>h1 a:hover { 
        text-decoration:underline;
} 
#header .description{
        color:#ffffff;
        text-decoration:none;
        margin-left: 30px;
}

タイトルのスタイルはh1 a　{ }のところですが、この指定ではidを使っていないので、もしここを変更すると、他のところで<h1>を使った時にそちらも影響を受けてしまいます。なので、一応#header>h1 a { }を追記しました。
筆者の言葉足らずでよくわからない方は「css セレクタ」あたりで検索してみてください。
文字が全体に左寄りなので、ひとまず左マージン指定を追加するとこんな感じ。