sunny_resp2c-l,r のカスタマイズ（エントリー1列と全文表示）
レスポンシブテンプレート、sunny_resp2c-l,r（左,右カラム）のエントリー表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は記事毎の要約表示（2列）になっています。
これを要約1列表示・全文表示に変更する方法です。
1 ） エントリー記事を2列から1列にする。
トップページ、エントリー記事の並び方を2列から1列に変更するカスタマイズです。
↑これを↓こんな感じに変更します。
↑クリックで見本を表示します。
◎ テンプレートの設定画面を開いてHTMLを編集する。
先ず、管理画面左の『テンプレートの設定』 →［sunny_resp2c-〇］のHTML編集枠を開いて1/4程までスクロールした所に有る
<!-- 全文・要約表示用HTMLの貼り換え ここから--> を探して下さい。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に <!-- 全文・要約表示用HTMLの貼り換え ここから--> を入れて下さい。するとスタイルシート内に1ヵ所見つかます。）
<!-- 全文・要約表示用HTMLの貼り換え ここから-->
<div class="blog<!--not_permanent_area--><!--not_edit_area--> col_2<!--/not_edit_area--><!--/not_permanent_area-->"><!-- 全文・要約表示用HTMLの貼り換え ここから-->
<div class="blog">◎ 次に、スタイルシート編集枠内より、下記のようなCSSを探して修正します。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に .left{ を入れて下さい。すると3ヵ所見つかりますが、変更するのは2ヵ所 1,2番目のもので、3番目の部分は変更しません。←除外の目印は、複数行上に@media screen and (max-width: 430px){ が有ります。）
.left{
float:left;
width:45%; /* サムネイル画像の幅 */
height:auto;
max-height:145px;
margin-right:10px;
text-align:center;
position: relative;
overflow:hidden;
}.left{
float:left;
width:30%; /* サムネイル画像の幅 */
height:auto;
max-height:145px;
margin-right:10px;
text-align:center;
position: relative;
overflow:hidden;
}@media screen and (min-width: 580px) and (max-width: 779px){
.left{
float:none;
width:100%;
margin:0 0 10px;
}
}@media screen and (min-width: 431px) and (max-width: 779px){
.left{
float:left;
width:35%;
margin-right:10px;
}
}◎ 後は『更新』ボタンを押して適用して下さい。
（不具合が有った時のために、複製を作ってから作業すると安心です。）
2 ） エントリー記事を全文表示にする。
トップページ、エントリー記事を要約表示から全文表示に変更するカスタマイズです。
↑クリックで見本を表示します。
◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →［sunny_resp2c-〇］のHTML編集枠を開いて
<!-- 全文・要約表示用HTMLの貼り換え ここから--> から <!-- 全文・要約表示用HTMLの貼り換え ここまで--> という所までを、下記[ Read More ]↓に掲載しているHTML,CSSに変更して下さい（コピー＆ペースト）。
・2022/04/13 記事の修正及び更新
全文表示のカスタマイズを施すと、トップページは問題無く表示されるのに2ページ目以降 要約表示部と全文表示部が一緒に表示される不具合を見付けて頂きました。（ページのコメント欄参照、ご連絡有難うございました。）
<!-- 全文・要約表示用HTMLの貼り換え ここから-->
<div class="blog<!--category_area--> col_2<!--/category_area--><!--date_area--> col_2<!--/date_area--><!--tag_area--> col_2<!--/tag_area--><!--search_area--> col_2<!--/search_area-->">
<!-- トップページ ここから-->
<!--topentry-->
<article<!--permanent_area--> itemscope itemtype="https://schema.org/BlogPosting"<!--/permanent_area--> class="blog-con blog-con2">
<div class="date-t"><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 noreferrer"><span class="pen-link">✎</span></a></div>
<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>
<!--permanent_area--><!--allow_comment-->
<a href="#blogcomment" title="コメント欄へ(<%topentry_comment_num>)"><span class="com_col">▼</span></a>
<!--/allow_comment--><!--/permanent_area-->
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_index_area-->
<div class="kiji1<!--category_area--> kiji2<!--/category_area--><!--date_area--> kiji2<!--/date_area--><!--tag_area--> kiji2<!--/tag_area--><!--search_area--> kiji2<!--/search_area-->"><!--kiji1-->
<div class="con_body con_body2">
<div class="left">
<a href="<%topentry_link>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" width="320" height="140" alt="<%topentry_title>"><!--body_img_none--><!--/body_img_none--><div class="mask"><span class="caption">Read this article</span></div></a>
</div>
<div class="right">
<div class="text_overflow">
<div class="moji-c"><%topentry_description></div>
</div>
</div>
</div>
<div class="right-txt"><a href="<%topentry_link>">… <%template_extend></a></div>
</div><!--/kiji1-->
<!--/not_index_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_edit_area-->
<div class="con_body<!--permanent_area--> pd-plus<!--/permanent_area--><!--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-->">
<!--not_category_area--><!--not_date_area--><!--not_tag_area--><!--not_search_area-->
<%topentry_body>
<!--more_link-->
<div><a href="<%topentry_link>#readmore">Read More</a></div>
<!--/more_link-->
<!--/not_search_area--><!--/not_tag_area--><!--/not_date_area--><!--/not_category_area-->
<!--more-->
<div id="readmore"></div>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<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の貼り換え ここまで-->◎ 次に、スタイルシート編集枠内より、下記のようなCSSを探して修正します。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に .blog-con2 .kiji1 を入れて下さい。すると1ヵ所見つかります。
.blog-con2 .kiji1 {
display:block; /* 記事2カラム時表示 */
}.blog-con2 .kiji2 {
display:block; /* 記事2カラム時表示 */
}◎ 後は『更新』ボタンを押して適用して下さい。
（不具合が有った時のために、複製を作ってから作業すると安心です。）
2022/04/15 追加カスタマイズ：
上記カスタマイズ後はエントリー記事の要約表示が全文表示に変わりますが、「検索結果・月別アーカイブ・カテゴリ・タグ」のページは要約表示（2列表示）になっています。
この部分も全文表示に変更したい場合は、上記を行った後に下記を追加して下さい。
◎ 全文表示貼り換え部分（冒頭）を変更します。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に <!-- 全文・要約表示用HTMLの貼り換え ここから--> を入れて下さい。するとスタイルシート内に1ヵ所見つかります。）
<!-- 全文・要約表示用HTMLの貼り換え ここから-->
<div class="blog<!--category_area--> col_2<!--/category_area--><!--date_area--> col_2<!--/date_area--><!--tag_area--> col_2<!--/tag_area--><!--search_area--> col_2<!--/search_area-->">
<!-- トップページ ここから-->上記の青い部分を削除して下記のように変更
<!-- 全文・要約表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->◎ 要約表示のためのエリア変数部分を変更します。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に div class="kiji1 を入れて下さい。するとスタイルシート内に1ヵ所見つかります。）
<div class="kiji1<!--category_area--> kiji2<!--/category_area--><!--date_area--> kiji2<!--/date_area--><!--tag_area--> kiji2<!--/tag_area--><!--search_area--> kiji2<!--/search_area-->"><!--kiji1-->上記の青い部分を削除して下記のように変更
<div class="kiji1"><!--kiji1-->◎ 本文と追記を括っているエリア変数を変更します。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に <!--more_link--> を入れて下さい。するとスタイルシート内に1ヵ所見つかるので、その上下を含めて6行を変更します。）
<!--not_category_area--><!--not_date_area--><!--not_tag_area--><!--not_search_area-->
<%topentry_body>
<!--more_link-->
<div><a href="<%topentry_link>#readmore">Read More</a></div>
<!--/more_link-->
<!--/not_search_area--><!--/not_tag_area--><!--/not_date_area--><!--/not_category_area-->上記の青い部分を削除して下記のように変更
<%topentry_body>
<!--more_link-->
<div><a href="<%topentry_link>#readmore">Read More</a></div>
<!--/more_link-->◎ 後は『更新』ボタンを押して適用して下さい。
（不具合が有った時のために、複製を作ってから作業すると安心です。）
Re: 呑兵衛あな 様へ
こんばんは。コメント有難うございます。m(__)mテンプレートをその時の気分で変えてみるのも良いですね。
また、ご自身で彼方此方手を加えてオリジナルを作っていくのも楽しいです。
それによって私が見落としている問題や、カスタマイズになるものを見付けて頂いてとても助かっております。
また何かお気付きの点が有りましたらお教え下さいませ。(^_^)
[ 返信 * 編集 ]▼ ▲