Top Page › Template › カスタマイズ › home_resp のカスタマイズ(トップ画像変更・非表示)

home_resp のカスタマイズ(トップ画像変更・非表示)

2020-10-17 (Sat) 21:00

前記事から更に引き続き、テンプレート home_resp 2c,3c のトップ画像の変更方法です。
お気に入りの画像に変更する事で、他には無い 自分だけのブログになります。
季節やイベント毎に変える等も、訪問される方の目を楽しませてくれる事と思います。(^-^)
youth-rosemihon.jpg
↑クリックで見本を表示


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





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

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

/* トップ画像 */
.topimg{
position:relative;
overflow:hidden;
padding-top:40.00%; /* 画像の高さpx÷画像の幅px×100で導いた数値%。数値増減で高さを調整する */
background:url('https://blog-imgs-141.fc2.com/s/o/r/sorauta1/top-home-w1.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
border-radius:5px;
}
(上記は2カラムの場合です。3カラムは padding-top:33.00%; になっています。)

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷ 表示画像の幅(横サイズ)× 100
という計算式で求めます。
(青文字の部分は表示したい画像のアップロード先URLを入れて下さい。)
縦横比の計算値で%指定すると元画像が(拡大・縮小されて)全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。
画像の高さが「高いな」と思われましたら、%部分の数値を減らして調整して下さい。
詳しくは↓下記に画像付きで説明しておりますのでご覧下さいませ。
serene_resp のカスタマイズ(トップ画像変更)

続いて暗色部分の画像変更です。
このテンプレートは淡色と暗色に異なった画像が使えます。(上の見本画像をクリックし、更に開いた見本右下の◐をクリックしてみて下さい。)
文字検索のために『Ctrl+Fキー』を押して、表示された小窓に .topimg を入れます。そして、2カラムでは2/10、3カラムでは2/12番目をご覧下さい。

/* トップ画像 */
body.dark .topimg{
position:relative;
overflow:hidden;
padding-top:40.00%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */
background:url('https://blog-imgs-141.fc2.com/s/o/r/sorauta1/top-home-d1.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
border-radius:5px;
}
(上記は2カラムの場合です。3カラムは padding-top:33.00%; になっています。)

淡色の場合と同様に、トップイメージの表示高を
表示画像の高さ(縦サイズ)÷ 表示画像の幅(横サイズ)× 100
という計算式で求めてオレンジの部分に入れ、青い文字列の所に表示したい画像のアップロード先URLを入れます。
淡色と暗色、両方同じ画像を使いたい場合は同じ画像URLを入れるか、若しくはbody.dark .topimgのスタイルから下記を削除して下さい。
background:url('https://blog-imgs-141.fc2.com/s/o/r/sorauta1/top-home-d1.jpg'); /* 表示したい画像URL */

続いて、
スタイルシート編集枠ほぼ最下までスクロールした所に有る(文字検索 .topimg の、2カラムでは3~10/10、3カラムでは3~12/12番目)に下記のようなCSSが有ります。
この部分も、レスポンシブで画面幅が小さくなった際に表示する画像の高さなので、表示を見ながらお好みで調節して下さい。
見栄えに問題が無ければそのままで構いません。

/* その他、表示幅で変更 */

@media only screen and (min-width:850px) and (max-width:1024px) {
/* トップ画像 */
.topimg,body.dark .topimg{
padding-top:43.00%; /* 高さを計算値から43%に変更、位置はセンターのままで */
}}
@media only screen and (min-width:760px) and (max-width:849px) {
/* トップ画像 */
.topimg,body.dark .topimg{
padding-top:55.00%; /* 高さを計算値から55%に変更、位置はセンターのままで */
}}
@media only screen and (min-width:500px) and (max-width:759px) {
/* トップ画像 */
.topimg,body.dark .topimg{
padding-top:40.00%; /* 高さを計算値から40%に変更、位置はセンターのままで */
}}
@media only screen and (max-width:499px) {
/* トップ画像 */
.topimg,body.dark .topimg{
padding-top:53.00%; /* 高さを計算値から53%に変更、位置はセンターのままで */
}}

3カラムは上記に追加して下記が有ります。
@media only screen and (min-width:1025px) and (max-width:1219px) {
/* トップ画像 */
.topimg,body.dark .topimg{
padding-top:38.00%; /* 高さを計算値から38%に変更、位置はセンターのままで */
}}

後は【更新ボタン】を押して適用させます。
不具合が有った時のために、複製を作っておくと安心です。





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

HTML編集枠を少しスクロールした所に下記のような箇所が有ります。
(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に <div id="header-top"> を入れて検索して下さい。)
その下に有るHTMLソースを下記のように変更します。
<div id="header-top">
<!--not_permanent_area-->
<div class="topimg"></div>
<!--/not_permanent_area-->
<header class="header<!--permanent_area--> page-header<!--/permanent_area-->">
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>


↑上記を↓下記のように変更(コピペ可)

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

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


逆に、素のテンプレートでは記事ページにトップ画像を表示していませんが、記事ページにも表示したい場合は、上記HTMLを下記のように変更して下さい。(コピペ可)
<div id="header-top">
<div class="topimg"></div>
<header class="header">
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>

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


Comments







非公開コメント