sunny_resp のカスタマイズ（トップ画像変更・非表示）及び修正

テンプレート sunny_resp2c のトップ画像の変更方法です。
お気に入りの画像に変更する事で、他には無い 自分だけのブログになります。

また？で大変申し訳無いのですが、記事作成時に気付いた点が有りましたので、修正箇所も掲載致します。
（テンプレートは05/02に修正・更新致しました。）

1. トップ画像を変更する。
2. トップ画像を削除する。記事ページに画像を表示する。
3. [ sunny_resp2c-l ] 21/05/02 の修正について

1 ）　トップ画像を変更する。

表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。

画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と background-size:cover; を使った方法です。
background-size:cover; は、画像の幅と高さの比率を固定して領域を覆うように表示し、はみ出した部分を非表示にします。

↑クリックで見本を表示します。

テンプレートの管理画面下段の [ sunny_resp2c-l(or r) ] のスタイルシート編集枠内をスクロールすると1/8位に下記のような箇所が有ります。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に .topimg を入れて検索して下さい。）
2ヵ所見付かりますので、1/2番目をご覧下さい。

/* トップ画像を入れる場合はここを改変 */
.topimg{
  position:relative;
  overflow:hidden;
  padding-top:28.00%;  /* 画像の高さpx÷画像の幅px×100で導いた数値%。数値増減で高さを調整する */
  background:url('https://blog-imgs-141.fc2.com/s/o/r/sorauta1/top-tr.jpg'); /* 表示したい画像URL */
  background-color:rgb(245,244,239); /* 背景色 */
  background-position:center center; /* 表示する位置 中央寄せ */
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:0 0 5px 5px;
}

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ（縦サイズ）÷ 表示画像の幅（横サイズ）× 100
という計算式で求めます。
（青文字の部分は表示したい画像のアップロード先URLを入れて下さい。）

縦横比の計算値で％指定すると元画像が（拡大・縮小されて）全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。
画像の高さが「高いな」と思われましたら、％部分の数値を減らして調整して下さい。

文字検索で見付かった2ヵ所目はスマートフォンで閲覧した場合のトップ画像の表示スタイルです。

.topimg{
  padding-top:50.00%; /* 画像の高さ 数値増で左右見切り */
}

画像は中央寄せのまま、高さを50.00％に増やしています。高さを増やすと画像の左右は表示幅に合わせて見切れて非表示になります。
数値の増減で具合を調整して下さい。

画像の表示位置等、詳しくは↓下記に画像付きで説明しておりますのでご覧下さいませ。
serene_resp のカスタマイズ（トップ画像変更）

2 ）　トップ画像を削除する。記事ページに画像を表示する。

トップエントリーページも記事ページのように画像を表示させたくない、という場合のカスタマイズです。

HTML編集枠を少しスクロールした所に下記のような箇所が有ります。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に <header class="header と入れて検索して下さい。1ヵ所見付かります。）
その下に有るHTMLソースを下記のように変更します。

<header class="header<!--permanent_area--> page-header<!--/permanent_area-->">
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><%introduction></div>
</header> 
<!--not_permanent_area-->
<div class="topimg"></div>
<!--/not_permanent_area-->

↑上記を↓下記のように変更

<header class="header page-header">
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><%introduction></div>
</header> 
<!--index_area--><!--not_index_area--><!--not_permanent_area-->
<div class="topimg"></div>
<!--/not_permanent_area--><!--/not_index_area--><!--/index_area-->

後は【更新ボタン】を押して適用して下さい。

逆に、素のテンプレートでは記事ページにトップ画像を表示していませんが、記事ページにも表示したい場合は、上記HTMLを下記のように変更して下さい。

<header class="header">
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><%introduction></div>
</header>
<div class="topimg"></div>

後は【更新ボタン】を押して適用して下さい。

3 ）　[ sunny_resp2c-l ] 21/05/02 の修正について

また…で本当に申し訳無いのですが、この度のカスタマイズ記事を作っていて気付いたので微修正致しました。

普通に使っていると多分気付かない位なのですが、エントリーページから記事ページに移動してトップ画像が無くなりブログタイトルになると、エントリーページでのタイトル下に有る半透明の背景色がそのまま個別記事ページ（のブログタイトル）に残ってしまっている事が分かりました。

スタイルシートのプロパティの書き方で、右メニュータイプでは不要部分を取り除いていたのですが、左メニュータイプでは取り除くのを失念していました。申し訳ございません。

【 修正方法 】 修正は sunny_resp2c-l （左メニュー）のみです。

テンプレートの管理画面を表示し、sunny_resp2c-l の編集をクリックします。
Ctrlキー＋Fキーで検索窓を出し、.page-header{ と入れて検索すると1ヵ所見付かりますので、下記のように不要文字列を削除し更新ボタンを押して下さい。

.page-header{
  left:0;
  right:0;
  position:relative !important;
  padding-bottom:15px !important;
  padding-top:10px !important;
  margin:0 auto !important;
  background-color:rgb(245,244,239) !important; /* 記事ページのヘッダー背景色 */
  border-radius:0 0 5px 5px;
}

↑上記の青文字部分 -color を削除し、下記のように変更↓

.page-header{
  left:0;
  right:0;
  position:relative !important;
  padding-bottom:15px !important;
  padding-top:10px !important;
  margin:0 auto !important;
  background:rgb(245,244,239) !important; /* 記事ページのヘッダー背景色 */
  border-radius:0 0 5px 5px;
}

修正後、更新ボタンを押して下さい。お手数をお掛け致しますが宜しくお願い致します。