Top Page › Template › カスタマイズ › lace-al3,al2 のカスタマイズ(エントリー要約表示)

lace-al3,al2 のカスタマイズ(エントリー要約表示)

2019-04-06 (Sat) 23:21

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

'19年4月5日の更新で、記事表示変更箇所を分かり易くするよう、HTML編集枠内のソースにコメントアウトを入れました。

lace-al3-mihon
クリックで見本を表示↑3カラム

lace-al2-mihon
クリックで見本を表示↑2カラム

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

◎ 同じく、テンプレートの設定画面下段のスタイルシートを編集する。
編集枠内を一番下までスクロールした最下段に、オレンジ色のスタイルを追記して下さい。(コピー&ペースト)。

不具合が有った時のために『複製』を作成して作業する事をお勧め致します。m(__)m

('20/03/28 のテンプレートの修正・更新致しました。03/28の記事で、トップページ要約表示に、記事内画像が無い場合の表示方法を少し変更致しました。
('19/10/22 の修正・更新記事- 1)の通り、追記事のHTMLソースを修正致しました。)
この記事以前のテンプレートの場合は、上記記事1)のCSS変更のみ行って下さい。
('19/07/26 の全文表示タイプテンプレートに加筆修正しました。の通り、追記事のHTMLソースを修正致しました。)
('19/05/14 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)
('19/04/26 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)

修正・更新日以前のテンプレートにカスタマイズを施す場合は、上記のリンク記事も併せてお読み下さいませ。m(__)m
20/03/28 の更新HTML・CSSです。


[HTML編集枠内CSS (変数を使うのでHTML内</head>の直前に記述)]
<style>.left img[style*="<%url>"]{display:none;}</style><!--object-fit(IE対策)-->


[HTML編集枠内]
<!--not_category_area--><!--not_date_area--><!--not_tag_area-->
<!-- 要約表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<article class="con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a><span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span></h2></div>
<div class="entry_date"><%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>
</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="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 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-->kiji1 kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><!--permanent_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-->
<!--/permanent_area-->
</div>
<!-- 要約表示用HTMLの貼り換え ここまで-->


[CSS (スタイルシート編集枠最下段に追加)]
.mask{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
height:100%;
background:rgba(255,255,255,.5);
-webkit-transition:.3s;
transition:.3s;
opacity:0;
}
.mask .caption{
color:#222;
font-size:120%;
font-weight:normal;
position:absolute;
top:50%;
left:50%;
width:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.left:hover .mask{
opacity:1;
}



最終更新日 : 2020-04-26

Comments







非公開コメント