*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  カスタマイズ >  ct_responsive のカスタマイズ(エントリー全文表示)

ct_responsive のカスタマイズ(エントリー全文表示)

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

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[ct_responsive〇c]のHTML編集枠を開いて「トップページここから」という所までスクロールし、下画像のように変更して更新。

上画像の赤い部分を削除して下画像のように変更・更新します。
(クリックで大きく表示)

ct-customize1.gif

赤い部分を削除し、下画像の青い部分を追加

ct-customize2.gif

↑上記の状態で全文表示になります。

そしてもう一点、スタイルシート編集枠最下段に
@media only screen and (max-width: 960px) {
という部分が有りますので、ここの

.kiji2{
display:none; /* 記事表示時要約非表示 */
}

赤文字部分を display:block; に変更

後は更新ボタンを押して適用させて下さい。
トップページに表示される「Read More」は個別記事ページへのリンクで、個別記事ページへ移動すると追記部分が開閉表示になります。
画像のように変更するのがご面倒な方は^^;、下記に変更後のHTMLソースを掲載しましたので、ご自身の「ct_responsive」テンプレートHTML編集枠内の該当箇所にコピーして貼り付けて下さい。

Read More

HTML編集枠1/4程スクロールしたところに該当箇所が有りますので、その部分のソースを全て下記に差し替えて下さい。
作業をする際はテンプレートの複製を作ってから作業すると安心です。

<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con">
<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>)
</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>"><%topentry_image_w300></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</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-->
<div class="readmore">
<a href="<%topentry_link>">Read More</a>
</div>
<!--/more_link-->
<!--more-->
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr class="hr1">
<p><%topentry_more></p>
<a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 記事ページの追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>を入れる -->
<!--/more-->
</div>

Return

コメント






管理者にだけ表示を許可する