*Essence

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

Top Page › Template › カスタマイズ › candy,green 2c 3c のカスタマイズ(エントリー全文表示)
2019-03-28 (Thu) 02:44

candy,green 2c 3c のカスタマイズ(エントリー全文表示)

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

green-3c のカスタマイズ後見本
レスポンシブテンプレートなので、ブラウザの幅を狭めてカラムの変化をご確認下さい。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[candy,green〇c]のHTML編集枠を開いて「トップページここから」という所までスクロールし、下記 Read More 以下に記述されたHTMLを該当箇所に貼り換えて『更新』して頂くだけで全文表示になります。
この時点で2カラム3カラムは全文表示になりますが、1カラム(420px)時は幅が狭い分記事行が増えるので、要約表示のままにしてあります。
1カラムも全文表示にしたい場合は、更にスタイルシート編集枠を随分下まで下がった所に
@media only screen and (max-width:420px) {

という部分が有りますので、その下を見ていくと
.kiji1{
display:block; /* 1カラム時要約表示 */
}
.kiji2{
display:none; /* 1カラム時記事非表示 */
}
という部分が有ります。そこの青色の箇所を
.kiji1{
display:none; /* 1カラム時記事表示 */
}
.kiji2{
display:block; /* 1カラム時要約非表示 */
}
赤文字のように変更して下さい。
以下、全文表示変更用貼り換えHTMLです。

('19/04/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)
('19/04/05 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)

HTML編集枠1/4程スクロールしたところに該当箇所が有りますので、その部分のソースを全て下記に差し替えて下さい。
作業をする際はテンプレートの複製を作ってから作業すると安心です。

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con <!--index_area-->blog-con2<!--/index_area-->">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><img src="https://blog-imgs-32.fc2.com/s/o/r/sorauta1/pencil.gif" alt="<%author_name>" width="12" height="12" style="margin-left:5px;vertical-align:middle;"></a>
</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>"><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>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->
<div class="con_body <!--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-->
<a href="<%topentry_link>#readmore">Read More</a>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr class="hr1">
<p style="margin:15px 0;"><%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


Comment







管理者にだけ表示を許可