ct_responsive のカスタマイズ（エントリー全文表示）
▼
レスポンシブテンプレート、ct_responsive 3c（3カラム）, 2cr（2カラム右）, 2cl （2カラム左）の記事表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。
これを従来の全文表示に変更する方法です。
'19年4月5日の更新で、記事表示変更箇所を分かり易くするよう、HTML編集枠内のソースにコメントアウトを入れました。
また、'19年3月6日の記事にてCSSやJavaScriptの更新をしておりますので、併せて確認頂き修正をお願い致します。
◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →［ct_responsive〇c］のHTML編集枠を開いて <!-- 要約表示用HTMLの貼り換え ここから--> という所から <!-- 要約表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい（コピー＆ペースト）。
そしてもう2ヵ所、スタイルシート編集枠下方（だいたい9/10くらいの所）に
@media only screen and (max-width:480px) {
という部分が有りますので、ここの
.kiji1{
display:block; /* 要約表示時記事非表示 */
margin:0;
}
青文字部分を display:none; に変更
そしてそれよりもう少し下、
@media only screen and (max-width: 960px) {
という部分が有りますので、ここの
.kiji2{
display:none; /* 記事表示時要約非表示 */
}
青文字部分を display:block; に変更
後は更新ボタンを押して適用させて下さい。
↑ここまでやると１、２、３カラム共全文表示になります。
１カラムだけ「要約表示にしたい！」という場合は、上記を行った後にスタイルシート編集枠の一番下に下記を追加して下さい。
最後の閉じる中括弧は２つです。お間違いのないように。
（因みに → １カラム要約表示・２カラム全文表示の見本 です。ブラウザの幅を狭めてご確認下さい。）
トップページに表示される「Read More」は個別記事ページへのリンクで、個別記事ページへ移動すると追記部分が開閉表示になります。
◎ 全文表示カスタマイズを行った場合は、カテゴリー別や月別のアーカイブも全文表示（指定表示件数分）の表示になってしまいますので、下記カスタマイズも是非行って下さい。
カテゴリー別及び月別のアーカイブをリスト化
カスタマイズを行う場合は、テンプレートの複製を作成してからの作業が安心です。
（'21/10/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'20/03/28 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/05/14 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/04/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/04/05 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/03/06 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/01/28 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'18/12/10 の修正・更新記事の通り、本記事の画像及び追記事のHTMLソースも修正致しました。）
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。
これを従来の全文表示に変更する方法です。
'19年4月5日の更新で、記事表示変更箇所を分かり易くするよう、HTML編集枠内のソースにコメントアウトを入れました。
また、'19年3月6日の記事にてCSSやJavaScriptの更新をしておりますので、併せて確認頂き修正をお願い致します。
◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →［ct_responsive〇c］のHTML編集枠を開いて <!-- 要約表示用HTMLの貼り換え ここから--> という所から <!-- 要約表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい（コピー＆ペースト）。
そしてもう2ヵ所、スタイルシート編集枠下方（だいたい9/10くらいの所）に
@media only screen and (max-width:480px) {
という部分が有りますので、ここの
.kiji1{
display:block; /* 要約表示時記事非表示 */
margin:0;
}
青文字部分を display:none; に変更
そしてそれよりもう少し下、
@media only screen and (max-width: 960px) {
という部分が有りますので、ここの
.kiji2{
display:none; /* 記事表示時要約非表示 */
}
青文字部分を display:block; に変更
後は更新ボタンを押して適用させて下さい。
↑ここまでやると１、２、３カラム共全文表示になります。
１カラムだけ「要約表示にしたい！」という場合は、上記を行った後にスタイルシート編集枠の一番下に下記を追加して下さい。
@media only screen and (max-width:749px) {
.kiji1{
display:block; /* 1カラム時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
}
最後の閉じる中括弧は２つです。お間違いのないように。
（因みに → １カラム要約表示・２カラム全文表示の見本 です。ブラウザの幅を狭めてご確認下さい。）
トップページに表示される「Read More」は個別記事ページへのリンクで、個別記事ページへ移動すると追記部分が開閉表示になります。
◎ 全文表示カスタマイズを行った場合は、カテゴリー別や月別のアーカイブも全文表示（指定表示件数分）の表示になってしまいますので、下記カスタマイズも是非行って下さい。
カテゴリー別及び月別のアーカイブをリスト化
カスタマイズを行う場合は、テンプレートの複製を作成してからの作業が安心です。
（'21/10/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'20/03/28 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/05/14 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/04/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/04/05 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/03/06 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'19/01/28 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。）
（'18/12/10 の修正・更新記事の通り、本記事の画像及び追記事のHTMLソースも修正致しました。）
HTML編集枠1/3程スクロールしたところに該当箇所が有りますので、その部分のソースを全て下記に差し替えて下さい。
本記事にスタイルシートの変更箇所が2か所ありますので、併せて改変時に直して下さい。
（お忘れの無い様、宜しくお願い致します。m(__)m）
<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article <!--permanent_area-->itemscope itemtype="https://schema.org/BlogPosting" <!--/permanent_area-->class="blog-con blog-con2">
<div class="entry_title"><h2 <!--permanent_area-->itemprop="headline" <!--/permanent_area-->id="entry<%topentry_no>"><!--not_permanent_area--><a href="<%topentry_link>"><!--/not_permanent_area--><%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--></h2></div>
<div class="entry_date"><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span><time <!--permanent_area-->itemprop="datePublished"<!--/permanent_area-->datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area--><%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
</time>
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="con_body">
<div class="left">
<a href="<%topentry_link>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>"><!--body_img_none--><!--/body_img_none--><p class="mask"><span class="caption">Read More</span></p></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_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:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">ReadMore</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に＜%topentry_more＞(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->
本記事にスタイルシートの変更箇所が2か所ありますので、併せて改変時に直して下さい。
（お忘れの無い様、宜しくお願い致します。m(__)m）
↻
どなるど 様へ
どなるど様、初めまして。数あるテンプレートの中からご利用頂き、誠に有難うございます。m(__)m
症状なのですが、当方の持っているandroidスマホで閲覧すると全文表示になるので安心しておったのですが…で、実機の横幅400px以上だったので全文表示出来たのかもと思いまして、ひょっとしてスマホの幅の問題なのかな？と。
実機での確認は必要では有るけど、これだけ色んなサイズが有るとやっぱり無理が有りますね。^^;
改善方法なのですが、下記の方法を試してみて頂けますか？
スタイルシート編集枠下段の方（上から9/10位）に
@media only screen and (max-width:400px) {
という部分が有ります。その下を見ていくと
.kiji1{
display:block; /* 要約表示時記事非表示 */
margin:0;
}
という部分が有りますので、ここの display:block; を display:none; にして更新してみて下さい。
この方法で改善できましたら、全文表示カスタマイズの記事を修正させて頂きたいのですが…如何でしょうか？
宜しければ結果をお教え下さいませ。m(__)m
[ 返信 * 編集 ]▼ ▲