2018-10-27 (Sat)
00:30
✎
レスポンシブテンプレート、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:400px) {
という部分が有りますので、ここの
.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」は個別記事ページへのリンクで、個別記事ページへ移動すると追記部分が開閉表示になります。
◎ 全文表示カスタマイズを行った場合は、カテゴリー別や月別のアーカイブも全文表示（指定表示件数分）の表示になってしまいますので、下記カスタマイズも是非行って下さい。
カテゴリー別及び月別のアーカイブをリスト化
カスタマイズを行う場合は、テンプレートの複製を作成してからの作業が安心です。
（'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:400px) {
という部分が有りますので、ここの
.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」は個別記事ページへのリンクで、個別記事ページへ移動すると追記部分が開閉表示になります。
◎ 全文表示カスタマイズを行った場合は、カテゴリー別や月別のアーカイブも全文表示（指定表示件数分）の表示になってしまいますので、下記カスタマイズも是非行って下さい。
カテゴリー別及び月別のアーカイブをリスト化
カスタマイズを行う場合は、テンプレートの複製を作成してからの作業が安心です。
（'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/4程スクロールしたところに該当箇所が有りますので、その部分のソースを全て下記に差し替えて下さい。
<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<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="con_body">
<div class="left">
<a href="<%topentry_link>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></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_search_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）
<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<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="con_body">
<div class="left">
<a href="<%topentry_link>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></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_search_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）
- 関連記事
-
- ct_responsive のカスタマイズ（トップ画像・背景色変更） (2018/10/28)
- ct_responsive のカスタマイズ（エントリー全文表示） (2018/10/27)
- al_responsive のカスタマイズ（CSS変更・その他） (2018/07/08)
ハルカ 様へ
ハルカ 様へ
…そうですか…当方手持ちの全文表示＋追記折り畳みカスタマイズ済みテンプレートではキチンとエラー無く表示されたのですが…（記事管理画面も問題無しです）。ブログのソースを拝見・検証できれば一番良いのですけど、…難しそうですね。(・_・;)
colorbox以外で同様の、と言えば先般の返信で掲載した『Lightbox』が良いのでは？と思います。
https://kwave-studio.com/?p=107
Lightbox 『キャプションに外部リンクが貼れるようになっていた件』
しかも、新しいバージョンのLightbox2では、設置する必要なくCDN経由で読み込めるそうです。
https://allabout.co.jp/gm/gc/470618/（All Aboutの記事より）
是非、検討してみて下さい。
右往左往させてしまいました上に、ハルカ様のお力になれなくて…本当に申し訳ございませんでした。m(__)m