Top Page › Template › カスタマイズ › sunny_resp2c-l,r のカスタマイズ(エントリー1列と全文表示)
2021-04-18 (Sun) 22:22

sunny_resp2c-l,r のカスタマイズ(エントリー1列と全文表示)

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

1) エントリー記事を2列から1列にする。

トップページ、エントリー記事の並び方を2列から1列に変更するカスタマイズです。

sunny2c-mihon.jpg

↑これを↓こんな感じに変更します。

sunny1c-mihon.jpg

↑クリックで見本を表示します。

◎ テンプレートの設定画面を開いて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){ が有ります。)

① スタイルシート枠内1/3程の所に有る
.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;
}
② スタイルシート枠内5/6程の所に有る
@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) エントリー記事を全文表示にする。

トップページ、エントリー記事を要約表示から全文表示に変更するカスタマイズです。

sunnyzb-mihon.jpg

↑クリックで見本を表示します。

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

<!-- 全文・要約表示用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 class="blog-con blog-con2">
<div class="date-t"><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span><%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">&#9998;</span></a></div>
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></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"><!--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の貼り換え ここまで-->

◎ コピー&ペースト後は『更新』ボタンを押して適用して下さい。
(不具合が有った時のために、複製を作ってから作業すると安心です。)

Comments

仮設してみました

『エントリー記事を全文表示にする』方法のとおりに変更し、仮設してみました。爺は、CSSの文字サイズを100%としました。
本格利用するか思案中です
2021-04-19-19:53 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。m(__)m

テンプレートをその時の気分で変えてみるのも良いですね。
また、ご自身で彼方此方手を加えてオリジナルを作っていくのも楽しいです。
それによって私が見落としている問題や、カスタマイズになるものを見付けて頂いてとても助かっております。
また何かお気付きの点が有りましたらお教え下さいませ。(^_^)
2021-04-19-23:13 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-04-22-11:13 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。コメント有難うございます。
そちらにお返事致しますね。(^_^)
2021-04-22-12:03 aki
[ 返信 * 編集 ]






非公開コメント