*Essence

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

TOP >  Template >  カスタマイズ >  al_responsive のカスタマイズ(エントリー全文表示)

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

レスポンシブテンプレート、al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の記事表示の変更方法をです。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。これを従来の全文表示に変更する方法です。
このカスタマイズは、トップページのエントリー記事でRead Moreが開閉できます。
('19年1月15日の更新で、個別記事追記表示を折り畳みに変更致しました。トップページでは無く、個別記事で追記を展開表示したい場合は、『al_responsive のカスタマイズ(エントリー全文表示②)』の記事を参考にカスタマイズして下さい。


◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[al_responsive〇c(-l,r)]のHTML編集枠を開いて <!-- 要約表示用HTMLの貼り換え ここから--> という所から <!-- 要約表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい(コピー&ペースト)。

ここまでで2、3カラム時に全文表示になり、1カラムでは要約表示になります。
1カラムも全文表示にしたい場合は、スタイルシート編集枠3/4程スクロールした所に有る

/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){ という部分の
/* 要約表示時記事非表示 */
.kiji2{
display:none;
}
を display:block; に変更、その下に
.kiji1{
display:none;
}

を追加して下さい。
不具合が有った時のために複製を作成して作業すると安心です。

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

al_responsive 2c(2カラム右・左)

<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<div class="con1">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<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="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 clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con1_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="javascript:void(0);" onClick="showHide('more<%topentry_no>');">ReadMore</a>
<noscript>
<a href="<%topentry_link>#more">ReadMore</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->



al_responsive 3c(3カラム)

<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<div class="con2">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<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="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 clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con2_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="javascript:void(0);" onClick="showHide('more<%topentry_no>');">ReadMore</a>
<noscript>
<a href="<%topentry_link>#more">ReadMore</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p><%topentry_more></p>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more--><a name="more" id="more"></a><br>
<%topentry_more><!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


関連記事

コメント







管理者にだけ表示を許可

aki みやちゃん様へ

みやちゃん様
数あるテンプレートの中より 弊テンプレートのDL、誠に有難うございます。
トップページの要約表示を全文表示に切り替える方法の記事が少し間違っておりましたので、先程修正していたところです。

ご質問の件、大変失礼ながらお伺い致しますが、貴殿の行ったカスタマイズはどこまでですか?記事に有ったHTMLソースをコピペされましたか?
もしそのカスタマイズ後に表示がおかしくなったようであれば、改めて修正したHTMLをペーストし直してみて下さい。
ただ、その作業後でも表示が直らないのであれば、拝見させて頂きたいので 貴殿のブログURLを教えて頂けませんか?

大変お手数なのですが、何卒宜しくお願い致します。m(__)m
2018-07-01-21:46 * aki [ 返信 * 編集 ]

記事本文の表記に関してカスタマイズ

テンプレート製作ご苦労様です。

ブログのテンプレートを変更しようと探した所
al_responsive2c-rのデザインがとても気に入りました。

そこでテンプレートを少々カスタマイズしようとしましたが、
私のスキルでは無理なのでコメントしました。


現状記事を書くで「本文の編集・追記の編集」の2段で記事を書いた場合、
「本文の編集」の途中までしか表示されません。

それを「本文の編集」分を全て表記してさせたいので
HTML及びCSSのカスタマイズを御教授お願いできないでしょうか?

2018-07-01-20:34 * みやちゃん [ 返信 * 編集 ]