*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-customize-1.gif

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

ct-customize-2.gif

↑上記の状態で全文表示になります。
画像のように変更するのがご面倒な方は^^;記事下のRead Moreに変更後のHTMLソースを掲載しましたので、ご自身の「ct_responsive」テンプレート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; に変更

後は更新ボタンを押して適用させて下さい。

↑ここまでやると1、2、3カラム共全文表示になります。
1カラムだけ「要約表示にしたい!」という場合は、上記を行った後にスタイルシート編集枠の一番下に下記を追加して下さい。

@media only screen and (max-width:749px) {
.kiji1{
display:block; /* 1カラム時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
}

最後の閉じる中括弧は2つです。お間違いのないように。
(因みに → 1カラム要約表示・2カラム全文表示の見本 です。ブラウザの幅を狭めてご確認下さい。)

トップページに表示される「Read More」は個別記事ページへのリンクで、個別記事ページへ移動すると追記部分が開閉表示になります。
('19/03/06 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)
('19/01/28 の修正・更新記事の通り、追記事のHTMLソースを修正致しました。)
('18/12/10 の修正・更新記事の通り、本記事の画像及び追記事のHTMLソースも修正致しました。)

Read More

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

<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con <!--index_area-->blog-con2<!--/index_area-->">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><a href="<%topentry_link>"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)</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>
<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>
<p><a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>


本記事にスタイルシートの変更箇所が2か所ありますので、併せて改変時に直して下さい。
(お忘れの無い様、宜しくお願い致します。m(__)m)

スポンサーサイト

Return

コメント






管理者にだけ表示を許可

ハルカ 様へ

お返事有難うございます。
長々とした文面の的を得ない回答で、ご理解は頂けましたでしょうか?^^;
両方を掲示できる方法は有るのかもしれませんが、当方はその道に明るくないもので…作れません。
申し訳ございません。
ご利用頂き、また何かお気付きの点等ございましたらお声掛け下さいませ。

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-02-18 * aki [ 編集 ]

おはようございます♡

この度はご足労をお掛けしました。

判らない事ばかりで…凄く参考になりました♪
本当にアリガトウ(^▽^)ゴザイマース

2019-02-18 * ハルカ [ 編集 ]

ハルカ 様へ

ハルカ様、初めまして♪
この度は拙いテンプレートのご利用、誠に有難うございます。

ご質問の件です。
>①エントリー記事の全文表示記事と通常?表示をおりまぜる事は可能でしょうか?
…申し訳ございませんが出来ません。
全文表示のカスタマイズをした後に、要約表示風に見せる事は出来ますが、追記記事冒頭を要約したものは表示できません。
全文表示のカスタマイズをしても追記に入れた部分は折り畳みですので、記事を書く時に本文部分は触りだけ入れて、残りを追記部分に記述すれば要約風にはなります。
ただし、トップページでの『ReadMore』はあくまでも個別記事へのリンクで、個別記事に移動してからクリックで展開…という形です。
でないと、全てトップページのみで閲覧を完結させてしまい、誰も個別ページに来てくれない事になりますから。。
記事本文部分を要約表示風にするには、本文記述時に

<div class="left"><img src="掲載したい画像URL" alt="記事タイトルや画像名等"></div><div class="right"><div class="text_overflow"><p class="moji-c">表示したい文字列</p></div>

として(全部続けて記述)、追記部分に本来掲載したい文章を記述します。
但し(元々全文・要約表示の併用は出来ませんので)ソースはテンプレート本体には組み入れられないので、その都度記述の必要が有ります。m(__)m
画像が無ければそのまま『本文は触りをちょっと&追記に掲載したい文章』で良いかと思います。

>②エントリー記事(プラグイン3)の上部にショッピングリサーチャーの広告が表示される
…GoogleChromeの拡張機能ですか?使った事が無いので当方にはよく分かりませんが、同じくGoogleChromeの拡張機能で『Adblock Plus』を入れれば広告が出なくなるようです。(当方、リサーチャーは入れてませんがAdblockは入れてます。)
『Adblock Plus』
https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb?utm_source=chrome-ntp-icon

これで試してみて頂けますか?
2019-02-14 * aki [ 編集 ]

はじめまして。

綺麗なテンプレートでしたのでお借りさせて頂いてます。

2点ほどご教授頂きたいのですが
①エントリー記事の全文表示記事と通常?表示をおりまぜる事は可能でしょうか?
(追記がある記事は通常表示、そうでない場合は全文表示といった感じ)
または追記は同ページで表示(折りたたんでる感じです)
②エントリー記事(プラグイン3)の上部にショッピングリサーチャーの広告が表示されるのですが、表示しないように出来るのでしょうか?
(chromeアプリのリサーチャーONの場合でも)

大変お手数ですがご教授頂けると幸いです。



2019-02-14 * ハルカ [ 編集 ]

どなるど 様へ

同世代…は失礼かな?妹世代くらいでは。^^;
切り抜き下敷きもやりました!明星平凡もですけど、よく読んだのはMyBirthday、なぜか流行った。
自分のサイン、どこでデビューする気だったんだか…今更ながら笑えます。(#^.^#)
毎日、年齢相応な色んな悩みも有りましたけど それなりに楽しい日々だったなぁ~・・(遠い目)
懐古res、失礼しました。m(__)m
貴ブログはコメント・メールが出来ないので、是非また遊びに来て下さいね♪
2019-01-20 * aki [ 編集 ]

ありがとうございます。

私も昨日は、うーん何故だろう?と独り言いいながら凝視してました。
細かい文字は、ほんと見えにくくなって…(^。^;)
修正お疲れ様ですm(_ _)m

p.s.
なめ猫!懐かしいですね〜グッズの免許証持ってました(^-^)
中学生の頃は明星とか平凡などで好きなアイドルを切り抜きして、下敷きに入れてました。自分のサインとか皆あって女子は卒業式にサイン帳をまわしたりして…w
あっ!話が長々、失礼しました(≧∇≦*)
2019-01-20 * どなるど [ 編集 ]

どなるど 様へ

こちらこそ、明けましておめでとうございます。本年も宜しくお願い致します。m(__)m

早速のご指摘!有難うございます!
実は丁度、全文表示を施した見本用複製テンプレを見ていて「あれ~~?」なんて思ってたところでして、カスタマイズ記事内のHTMLを凝視しておりました。^^;
見付けて頂き有難うございます♪早速記事を修正致しました。
そして…見本用複製テンプレの不具合も無事に直りました。(;´∀`) 有難うございました!

先程、どなるど様のブログを拝見して、私は実家の在る新潟の『中越地震』を思い出しました。
2004年10月、車で自宅の駐車場に戻って来た時、富山に居る旦那と携帯で話している時に突然の地震!
周りの車が皆上下にジャンプを始めて、車中から旦那に電話で実況してたのを思い出します…。
その後の余震もマジで怖かった…。
月日の経つのは早いけど、心の中に深く刻まれている事が有ります。ずっと。
忘れられないし、忘れたくないし、忘れません。

読んでて、(旦那様との所)とっても良い話だなぁ~と思いました。(^-^)

p.s. 同世代ですか?なめ猫や横浜銀蝿は中学生の頃でしたが。www
去年、カラオケでピンクレディーメドレーを歌って踊ったら、歌と振り付けは覚えているのに身体が付いていけない『年齢という重石』を感じてしまいました。(;'∀')
2019-01-19 * aki [ 編集 ]

ちょっとした不具合

あけましておめでとうございます。今年も宜しくお願いいたします。
テンプレートの更新、お疲れ様です。

テンプレートが更新されたので入れ替えてカスタマイズもやり直したのですが、追記にあるコピペ用のソースの不具合を見つけました。

「<a href="<%topentry_link>>Read More</a>」
とあるのですが、<%topentry_link>の後の「"」が抜けていて表示が崩れてしまいます。

取り急ぎご報告までm(_ _)m

p.s.
古い記事を拝見してて、年齢が近いのかな〜と思いました。
ピンクレディーの振り付けは私も覚えました(うふっ♪)
2019-01-19 * どなるど [ 編集 ]

どなるど 様へ

こちらこそ、この度は有難うございました。
今後とも末永く 宜しくお願い致します。m(__)m

p.s. 猫なんてそんなもの、という悟りが開けるまで…まだまだ遠いです…。(^-^;
それと、貴殿コメントのURLが当ブログになってます。暫くcookie(FC2)で残っていると思いますので、次回FC2ブログで記述の際はお気を付け下さい。res不要です(^^)
2018-12-09 * aki [ 編集 ]

ありがとう御座いました。

akiさん、こんにちは。確認お疲れ様でした。
これからも応援してます。本当にありがとう御座いました(^-^)

p.s. 猫ちゃん、ウサギちゃん、可愛いですね♪
わかります、夜の大運動会の寝不足はツラいですよね。
そのうち気にならなくなって、ぐぅぐぅ寝られるようになりますヾ(≧∇≦)
2018-12-08 * どなるど [ 編集 ]

どなるど 様、有難うございます。m(__)m

どなるど様、修正及びご連絡頂き、有難うございます。
先程、当方も症状の検証がてら画像高速表示の広告を適用してみました。
で、…出ますね。仰る通りです。^^;
確かに高速表示広告が有ると追記下に文字が出て広告もダブルで出ます。(無ければ出ないようです。)
干渉しているのは、HTML内に有るコメントアウトした文言に有る『FC2ブログの独自単変数』<%topentry_more>の左右山括弧と、自動で挿入される広告タグのようですね。
試しにコメントアウトの山括弧を削除してみたら…追記開閉OK・広告重複表示無し・「を入れる -->」の文字も無し、になりました。
本来コメント内にHTMLタグを挟むことも可能なため、独自タグも大丈夫かな~と思ってたので(認識が)甘かったみたいです。(-_-;)

画像高速表示用広告+コメントアウト内の山括弧 で起きる事象(だと思う)は、他の方も成り得るものなので、この度の貴殿からのご連絡は大変有益な情報です。
後程、当方の記事も追記・修正させて頂きます。
改めまして、本当に有難うございました。m(__)m
また何かお気付きの点などがございましたら、何なりとお声掛け下さいませ。
拙いテンプレートですが、今後とも末永くお付き合い下さいます様 宜しくお願い致します。

p.s. ブログを拝見して、ご長寿の猫ちゃん達が幸せそうです。(^-^)
うちは大人野良猫を保護してもうすぐ1年、まだまだ未熟な飼い主なので、毎夜の雄叫びと運動会で寝不足状態。(;^_^A
永く生活されている猫飼い様を尊敬しちゃいます。。
2018-12-08 * aki [ 編集 ]

解決しました。

色々ありましたが何とか解決しました。
一応顛末を整理しておきます。
1.最初から全文表示にしたくて提示されていたソースをコピペ
2.全文表示にはなったけど追記部分を展開すると表示崩れ
(スポンサーサイトが二重表示 & コメント文の「を入れる -->」文字が出現)
3.追記部分の開閉は無くても良かったので、その部分も削除
(水平区切りは残したかったのでHRタグだけ残しました)
4.無事解決
(常時全文表示 & Read Moreを押すと追記部分を開いた上で単独表示)
恐らく2の状態ではスポンサーサイトの挿入時にタグの構成が崩れるのだと思います。
今回は追記部分の開閉機能も削除することで解決しましたので、全文表示 & 追記部分の開閉アリを実現したい場合は依然として不具合があると思います。
2018-12-07 * どなるど [ 編集 ]

Read More の件です

どなるど様、
先ずは下記の画像をご覧頂いて、HTML編集枠を修正して下さい。
https://blog-imgs-123-origin.fc2.com/s/o/r/sorauta1/ct-customize2.gif

記事ページの追記開閉不要の部分を削除したのだと思いますが、削除が不十分です。
貴殿のブログソースを拝見すると、

<!-- 記事ページの追記開閉が不要の場合はここまでを削除し、この部分に

という文言・及びその後の

を入れる -->

という文字が削除されていません。削除された後のこの部分は、

<!--more-->
<%topentry_more>
<!--/more-->
</div>

になっていなければいけません。
この部分がキレイに削除されていないため変な表示をしているのだと思います。
修正してご確認頂けますか?宜しくお願い致します。m(__)m
2018-12-07 * aki [ 編集 ]

新たな問題が…

akiさん、こんにちは。
スマホの件は解決したのですが、
追記した時の表示に問題が見つかりました。

私のブログを確認していただければ、
問題の箇所がわかりやすいと思いますが
『Read More』を開くとスポンサーサイトが二重になって表示され
一番下に「を入れる -->」と表示されます。

画像の表示を早くしたかったので設定を『する』にしたのですが、
このスポンサーサイトの表示が何やらテンプレートに悪さしてるようです。
改善策はありますでしょうか?度々申し訳ありませんm(_ _)m
2018-12-07 * どなるど [ 編集 ]

解決しました。

akiさん、こんばんは。
書き換えて更新したら、無事に解決しました。

私が使ってるパソコン・iPhone・iPad・Androidは
全部確認してOKでした。

素敵なテンプレートを本当にありがとう御座いますm(_ _)m
2018-12-07 * どなるど [ 編集 ]

どなるど 様へ

どなるど様、初めまして。
数あるテンプレートの中からご利用頂き、誠に有難うございます。m(__)m

症状なのですが、当方の持っているandroidスマホで閲覧すると全文表示になるので安心しておったのですが…で、実機の横幅400px以上だったので全文表示出来たのかもと思いまして、ひょっとしてスマホの幅の問題なのかな?と。
実機での確認は必要では有るけど、これだけ色んなサイズが有るとやっぱり無理が有りますね。^^;

改善方法なのですが、下記の方法を試してみて頂けますか?
スタイルシート編集枠下段の方(上から9/10位)に
@media only screen and (max-width:400px) {
という部分が有ります。その下を見ていくと

.kiji1{
display:block; /* 要約表示時記事非表示 */
margin:0;
}

という部分が有りますので、ここの display:block; を display:none; にして更新してみて下さい。

この方法で改善できましたら、全文表示カスタマイズの記事を修正させて頂きたいのですが…如何でしょうか?
宜しければ結果をお教え下さいませ。m(__)m
2018-12-07 * aki [ 編集 ]

スマホの表示が

はじめまして、こちらのテンプレートをお借りして全文表示のカスタマイズをしました。パソコンとiPadとiPhoneは思った通りに表示したのですが、Androidのスマホで確認したところ、省略表示と全文表示が両方続けて表示されてしまいました。Androidのバージョンは8.0で、ブラウザはChrome、Firefoxを試しましたが、どちらもダメでした。何かアドバイスありますでしょうか?
2018-12-06 * どなるど [ 編集 ]