Top Page › Template › カスタマイズ › youth_resp 2c,3c のカスタマイズ(エントリー1列と全文表示)

youth_resp 2c,3c のカスタマイズ(エントリー1列と全文表示)

2020-02-20 (Thu) 07:45

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

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



1) エントリー記事を2列から1列にする。
トップページ、エントリー記事の並び方を2列から1列に変更するカスタマイズです。
youth-top0c.jpg
ダウンロード時の↑を↓のように変更。画像ボケててスミマセン。m(__)m
youth-top1c.jpg

見本は3カラムですがカスタマイズ箇所は一緒です。

◎ テンプレートの設定画面を開いてHTMLを編集する。
先ず、管理画面左の『テンプレートの設定』 →[youth_resp〇c]のHTML編集枠を開いて1/5程スクロールした所に有る

<!-- 全文・要約表示用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キー』を押して、表示された小窓に float:right を入れて下さい。すると4ヵ所見つかりますが、変更するのはセレクタが .left になっているもののみ3ヵ所です。)

① スタイルシート編集枠1/4程スクロールした所に有る
.left{
float:right;
width:100%; /* サムネイル画像の幅 */
height:auto;
max-height:145px;
margin-right:0px;
text-align:center;
position: relative;
overflow:hidden;
}

の青い値の部分を下記のようなオレンジの値に変更

.left{
float:left;
width:45%; /* サムネイル画像の幅 */
height:auto;
max-height:145px;
margin-right:10px;
text-align:center;
position: relative;
overflow:hidden;
}

② スタイルシート編集枠1/2程スクロールした所に有る
@media only screen and (min-width:876px) and (max-width:1119px) {
.left{
float:right;
width:100%;
margin-right:0px;
}
}

の青い値の部分を下記のようなオレンジの値に変更

@media only screen and (min-width:876px) and (max-width:1119px) {
.left{
float:left;
width:45%;
margin-right:10px;
}
}

③ スタイルシート編集枠3/5程スクロールした所に有る
.left{
float:right;
width:100%;
margin-right:0px;
}
}

の青い値の部分を下記のようなオレンジの値に変更

.left{
float:left;
width:45%;
margin-right:10px;
}
}

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




2) エントリー記事を全文表示にする。
トップページ、エントリー記事を要約表示から全文表示に変更するカスタマイズです。
youth-top0c.jpg
↑このように変更。画像ボケててスミマセン。m(__)m

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


下記のソースは、
トップページ要約表示に、記事内画像が無い場合の表示方法を少し変更
に修正されています。全文表示時にアイキャッチ(サムネイル)画像は表示されませんが、どの部分が修正されたか等、詳しくは記事をお読み下さい。

<!-- 全文・要約表示用HTMLの貼り換え ここから-->
<div class="blog">
<!--not_category_area--><!--not_date_area--><!--not_tag_area--><!--not_search_area-->
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2 staple">
<p 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">✎</span></a></p>
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_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>" 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>
</div>
</div>
<p class="right-txt"><a href="<%topentry_link>">…<%template_extend></a></p>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_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-->">
<%topentry_body>
<!--more_link-->
<p><a href="<%topentry_link>#readmore">Read More</a></p>
<!--/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">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の貼り換え ここまで-->

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


[Tag] * カスタマイズ

Comments

No Subject

[youth_resp3c]を拝借します。
早速全文表示にしました。
お疲れさまでした
2020-02-20-15:15  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

ダウンロード頂き有難うございます。(^-^)
ご利用後に分かる不具合も有りますので、もし見付けられましたらお教え下さいませ。
次のカスタマイズ記事は、トップの画像についてを予定しております。

今後とも宜しくお願い致します。m(__)m
2020-02-20-20:42  aki
[ 返信 * 編集 ]






非公開コメント