*Essence

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

Top Page › Template › カスタマイズ › genial_resp のカスタマイズ(エントリー全文表示)
2019-08-12 (Mon) 00:09

genial_resp のカスタマイズ(エントリー全文表示)

レスポンシブテンプレート、genial_resp 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の記事表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。
これを全文表示に変更する方法です。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[genial_resp〇c]のHTML編集枠を開いて <!-- 全文表示用HTMLの貼り換え ここから--> という所から <!-- 全文表示用HTMLの貼り換え ここまで--> という所までを、下記↓に掲載しているHTMLに変更して下さい(コピー&ペースト)。
('19/8/12以前の2カラム版が、間違えて<!-- 要約表示用HTMLの~ になっておりましたので、同日 正しく修正・更新致しました。m(__)m)


<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<span class="tape t-right"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area--> <%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</span>
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="con_body">
<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
</div>
</div>
<p class="right-txt"><a href="<%topentry_link>">… 続きを読む</a></p>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->
<div class="con_body pd-plus<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area--> kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->">
<%topentry_body>
<!--more_link-->
<p><a href="<%topentry_link>#readmore">Read More</a></p>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box" style="margin-top:0;">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">Read More</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->



上記を貼り換え・更新して頂くだけでトップページが全文表示になりますが、表示する画面サイズが420px未満で要約表示に変わります。
これは、小さい画面での縦スクロールが長くなってしまい、操作性が悪くなってしまう・次の記事を選択し難くなる、等を防ぐために画面サイズで切り替えしているためです。
この部分も全文表示にしたい場合は、下段のスタイルシート編集枠かなり下までスクロールすると
@media only screen and (max-width:420px) {
という部分が有りますので、それ以下に有る
.kiji1{
display:block; /* 1カラム時要約表示 */
}
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

という部分を
.kiji1{
display:none; /* 1カラム時要約非表示 */
}
.kiji2{
display:block; /* 1カラム時全文表示 */
}

に変更して更新ボタンを押して下さい。


◎ 全文表示カスタマイズを行った場合は、カテゴリー別や月別のアーカイブも全文表示(指定表示件数分)の表示になってしまいますので、下記カスタマイズも是非行って下さい。
カテゴリー別及び月別のアーカイブをリスト化

カスタマイズを行う場合は、テンプレートの複製を作成してからの作業が安心です。
Re: - 様へ * by aki
コメント頂き有難うございます。
ではまた、そちらでお返事致しますね。(^-^)

管理人のみ閲覧できます * by -

管理人のみ閲覧できます * by -

Re: - 様へ * by aki
いつもご愛顧有難うございます。m(__)m
そちらの鍵コメにてお返事致しますね。

管理人のみ閲覧できます * by -

Comment-close▲

Comment







管理者にだけ表示を許可

aki Re: - 様へ

コメント頂き有難うございます。
ではまた、そちらでお返事致しますね。(^-^)
2019-09-12-21:18 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-09-12-09:27 * - [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-09-12-09:27 * - [ 返信 * 編集 ]

aki Re: - 様へ

いつもご愛顧有難うございます。m(__)m
そちらの鍵コメにてお返事致しますね。
2019-09-11-22:01 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-09-11-12:55 * - [ 返信 * 編集 ]