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

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

2020-02-21 (Fri) 18:00

テンプレート youth_resp 2c,3c のトップ画像の変更方法です。
表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。
お持ちになっている画像に簡単に変更できますが、その前に…。
(トップ画像の変更方法は、背景色(背景画像)変更と併せて次の記事に掲載致します。m(__)m)

このテンプレートのトップに表示されている画像は、記事本編(個別のページ・パーマリンク)に表示されないように作成しております。
そして、エントリーページ以外の「全部のページで要らない」や「全部のページに付ける」という事も出来ます。
ご希望のイメージに合うよう、是非カスタマイズしてみて下さい。(^-^)


1) トップ画像を全てのページで表示させない。
2) トップ画像を全てのページで表示させる。



1) トップ画像を全てのページで表示させない。
画像の無い、シンプルなテンプレートになります。暗色テーマでも表示されなくなります。
トップ画像非表示
↑トップページ(画像無し・要約表示)こんな感じに。

改変する箇所はホンのちょっとだけです。
HTML編集枠を少し下にスクロールした所に下記のような部分が有ります。

<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>

これを下記画像のように『薄い赤部分』を削除します。(クリックで大きく表示)
トップ画像非表示2
すると、下記のような形になります。(下記をそのままコピペでも可)

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

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




2) トップ画像を全てのページで表示させる。
今まで通りのテンプレートになります。トップページと同じ画像を、全てのページで見る事が出来ます。
トップ画像表示
↑個別記事ページ(トップ画像有り)こんな感じに。

改変する箇所は上記と同じ場所です。
HTML編集枠を少し下にスクロールした所に下記のような部分が有ります。

<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>

これを下記画像のように『薄い赤部分』を削除します。(クリックで大きく表示)
トップ画像表示2
すると、下記のような形になります。(下記をそのままコピペでも可)

<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>

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


最終更新日 : 2020-04-20

Comments

No Subject

ありがとうございました
2020-02-21-19:34

呑兵衛あな http://nonn634.blog.jp/URL [ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こちらこそ、いつも有難うございます。m(__)m
2020-02-22-00:54

aki https://sorauta1.blog.fc2.com/URL [ 返信 * 編集 ]







非公開コメント