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

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


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

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

画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と 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">、無ければ <div id="content"> を入れて検索して下さい。)
その下に有るHTMLソースを下記のように変更します。
<div id="header-top"> (若しくは <div id="content">)
<!--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"> (若しくは <div id="content">)
<!--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 id="content">)
<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

文字の色について

こんにちは。
home_resp 2cを使用しています。
先ほど画像や背景色等を無事に変更できました。
また、背景の色の変更に伴い、ブログタイトルや記事のタイトル等の文字色を変更したいと思っています。
お手すきの際で構いませんので、ブログタイトル等の文字色の変更方法をご教示ください。
お手間をおかけし恐れ入りますが、何卒よろしくお願い申し上げます。
2020-12-09-00:38 June Sugar
[ 返信 ]
aki

Re: June Sugar 様へ

akiです。(返信をお読みになられていないまま埋もれてしまうといけないので、コメントを再投稿してageました。)


こんばんは。コメント頂き有難うございます。(^-^)

ブログタイトルの文字色変更についてです。
テンプレート管理ページの一番下に有る「スタイルシート編集」枠内をほんの少しスクロールして /* ブログタイトル */ という文字列を探して下さい。(大体上から1/8程度の所)
そこに有る、
color:#00586a; /* ブログタイトルの文字色 */
というのが文字色のカラーコードですので、#00586a の部分を変更して下さい。(♯と;は間違って消さないように注意して下さいませ。)

次に記事のタイトル文字色ですが、これはリンク文字色と兼ねておりますので、新たにカラーコードを追加して下さい。
先ず(同じくスタイルシート編集枠内で)、.entry_title h2 a という部分を探します。文字検索する場合はキーボードのCtrl+Fキーで検索窓を出し、その中に .entry_title h2 a を入れて探して下さい。
1ヶ所見付かりますので、そこにカラーコードを追加します。
.entry_title h2 a{
font-size:1em;
font-weight:bold;
color:#ff6600; /*記事タイトルの文字色 */
}
オレンジの部分を追加して下さい。(カラーコードはご自由に変更して下さいませ。)

以上ですが、1つご確認をお願い致します。
home_resp2c,3c は、夜間の閲覧時 目に優しい暗色テーマを付帯しておりますので、カスタマイズをする際はブログ右下に有る半月マーク◐をクリックして、暗色でも読めるかをご確認下さいませ。m(__)m

ご不明な点がございましたら、再度コメントをお願い致します。
2020-12-13-17:28 aki → June Sugar 様
[ 返信 * 編集 ]





非公開コメント