*Essence

テンプレート genial_resp 2c,3c のトップ画像の変更方法です。

表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。
画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と background-size:cover; を使った方法です。
background-size:cover; は、画像の幅と高さの比率を固定して領域を覆うように表示し、はみ出した部分を非表示にします。

テンプレートの管理画面下段の [ genial_resp〇c ] のスタイルシート編集枠内
スクロールすると1/8手前位に下記のような箇所が有ります。

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:35.63%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/park.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ）÷表示画像の幅（横サイズ）×100
という計算式で求めます。
（青文字の部分は表示したい画像のアップロード先URLを入れて下さい。）
縦横比の計算値で％指定すると元画像が（拡大・縮小されて）全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。



上記の場合は

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:45.00%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/himawari.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

になっており、
ひまわりの画像サイズは700px×315pxになっているので、315÷700×100、という計算で導いた値を％として入れています。
右カラムも左カラムも同様です。
背景色（薄いストライプ部分）を変更する場合は、同じくスタイルシート編集枠上部に有る

body::before{
background:#e7f7e7 url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色＋背景画像 */
～～～～以下略～～～～
}
の部分を

body::before{
background:#dff0ff url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ww-st1.png) repeat center; /* 色＋背景画像 */
～～～～以下略～～～～
}
に変更して頂けば薄い水色になります。
（背景色変更の際、参考色としてご覧下さい。
カラーコード表（web safe color 216色）
カラーネーム表（147色）

３カラムの場合はもうひと手間！お願いします。^^;
トップに使う画像サイズによっては左のカラムに画像が重なってしまう事が有りますので、下記のように指定部分の数値変更をお願い致します。
genial_resp3c のみ、変更画像CSS部分の下に

#left-box{
margin-top:300px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}
というCSSが有るので、そこの数値をトップ画像に合わせて変更して下さい。
例えば、ひまわりの画像を利用する場合、下記画像のように重なってしまいます。



↑そのままの300pxだと重なってしまうので↓重ならないように380pxに増やして見栄えを調整。



#left-box{
margin-top:380px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}


他の画像をご利用の場合も同様に、プレビューで確認しながら数値を調整し、程良くなったら更新ボタンを押し確定して下さい。
季節も丁度良いので、ひまわり画像のカスタマイズ、コピペで利用頂けます。是非どうぞ♪
大きい画像の位置を指定して使う場合は、下記リンクのページをご参考に。
serene_resp のカスタマイズ（トップ画像変更）
不具合が有った時のために、複製を作って作業すると安心です。(^-^)

関連記事

• genial_resp のカスタマイズ（エントリー全文表示） (2019/08/12)
• genial_resp のカスタマイズ（トップ画像変更） (2019/08/10)
• カテゴリー別及び月別のアーカイブをリスト化 (2019/08/08)