*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

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

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

テンプレート 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>


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


Last Modified : 2020-03-19

Comments






非公開コメント

aki Re: 呑兵衛あな 様へ

こちらこそ、いつも有難うございます。m(__)m
2020-02-22-00:54aki [ 返信 * 編集 ]

No Subject

ありがとうございました
2020-02-21-19:34呑兵衛あな [ 返信 * 編集 ]