Home > FC2ブログ > basic_white > basic_whiteテンプレート リスト表示の記事冒頭文を指定文字数だけ表示する

basic_whiteテンプレート リスト表示の記事冒頭文を指定文字数だけ表示する

 basic_whiteテンプレートのトップページなどの一覧ページでリスト表示の際に表示される記事冒頭文を指定した文字数だけ表示する方法です。

 記事本文部分のテキストが200文字以上であれば200文字以上表示することもできます。

1:HTML

 場所はCtrl+Fキーで『</head>』を検索。「</head>」のすぐ前にある「</script>」の直前にコードを追加します。

<!--not_permanent_area-->
jQuery(function(){ // リスト表示冒頭文文字数指定
if(location.search.indexOf('preview')==-1){var no=300;
jQuery('#main_contents .content:not(.p_area,#e) .list_desc').each(function(){
var str=jQuery(this).text().replace(/<[\w\/].*?>/g,'');if(str.length>no){str=str.substring(0,no)+'...';}
jQuery(this).html(str);});}}); // END
<!--/not_permanent_area-->


</script>

</head>

 文字数は「no=300;」の数値で指定します。「no=250;」にすると250文字まで表示します。数値は半角で入力してください。

※記事冒頭文として利用できるのは記事本文に書かれたテキストのみです。追記部分に書かれたものについては対象外になります。記事本文が200文字の場合は300を指定しても200文字のみ表示します。また、機能の仕様上、プレビューページでは動作しません。

2. HTML

 場所はCtrl+Fキーで『%topentry_image』を検索。次の強調部分のコードを追加します。

<!--body_img-->
<div class="entry_image"><%topentry_image></div>
<div class="entry_discription grid_desc"><%topentry_discription><%topentry_desc></div>
<div class="entry_discription list_desc"><%topentry_body></div>
<!--/body_img-->

<!--body_img_none--><div class="grid_desc">
<%topentry_discription><%topentry_desc>
</div>
<div class="list_desc"><%topentry_body></div>

<!--/body_img_none-->

テンプレートを利用し始めた時期によっては「_discription」が「_description」になっている場合もありますが、追加する部分は同じです。

 「<div class="grid_desc">」は必ず「<!--body_img_none-->」の直後に入れ、「</div><div class="list_desc"><%topentry_body></div>」は「<!--/body_img_none-->」の直前に入れてください。

3. スタイルシート

 スタイルシートに以下のコードを追加します。

 以上で完成です。

※文字数は指定できませんが、リンクや改行などのタグを有効にする場合はリスト表示で記事本文部分を完全な形式で表示のカスタマイズをご利用ください(グリッド表示は対象外です)。

グリッド表示の冒頭文

 グリッド表示の冒頭文も文字数指定の対象にする時は追加したスタイルシートの「list_desc」を「grid_desc」に変更してください。

#main .grid_content .grid_desc,#main .list_content .grid_desc {display: none;}

 ただしグリッド表示は冒頭部分の高さが設定されているので指定した文字数が必ず表示されるわけではありません。

 高さを調整する時はスタイルシートにある以下の部分を変更してください。

#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  width: 50%;
  height: 310px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}
#main_contents .grid_content .fc2blomaga_buy_area {
  display:none;
}
#main_contents .grid_content .entry_body {
  overflow: hidden;
  height: 5.8em;
}

 「310」の数値を「340」などに増やすと記事全体の高さが増え、「5.8」を「7.1」などに増やすと表示行数が増えます。逆に減らすと高さや行数が減ります。

※他のカスタマイズなどで高さを指定している場合はそちらを調整してください。

関連記事
スポンサー リンク
コメント
#247 : No title
mayさん、こんにちは。

文字数を200文字未満に指定すると続きを読むのリンクまでの距離がかなり開いてしまうのですが、これを解消する方法がありましたら教えてくださると幸いです。
#251 : Re247: 続きを読むとの間隔
コンバンハ。
「リスト表示のレイアウト調整・変更」記事にあるスタイルシートのコードを利用すれば続きを読むとの間隔はなくなるかと思います。
文字数を少なくするだけならスクリプトを使用するこのカスタマイズをやめて、そちらで冒頭文の行数を2~3行にしたコードを貼り付けた方がいいかもしれません。
画像の最大横幅を変更する時はリスト表示調整の数値を増減させてください。

上記コードを利用せずに、サムネイルには絶対に横長の画像しか使わない場合は以下のコードを追加すれば間隔を抑えることができます。
#main_contents .list_content .entry_body .entry_discription {/* リスト表示高さ調整 */
min-height: 130px;
}
数値を増やすと間隔が増えます。縦に長い画像の場合は画像が記事枠からはみ出ることがあります。
#254 : No title
mayさん、#247です。

ご回答ありがとうございました。
おかげさまで、問題を解決することができました。
感謝いたします。
#266 : No title
こんにちわ。
いつもカスタマイズ記事作成、ご苦労様です。

分からないことがあったので質問させてください。
この記事とは真逆になりますが、記事本文をTOPページ上ではまったく表示させないようにすることはできませんか?

現在、リスト表示形式を採用しているんですが、TOPページには記事タイトルとサムネイル、ユーザータグだけを表示させ、記事本文は個別記事ページでのみ表示させたいと考えてます。

こちらのカスタマイズを参考に、「no=300;」の部分を「no=0;」としてみましたが、上手くできませんでした。

もし、リスト表示においてTOPページ上での記事本文表示を消す方法があるならば教えていただけないでしょうか?

どうぞよろしくお願いいたします。
#267 : Re266: リスト表示の本文非表示
コンバンハ。
このページのカスタマイズは使用せずに、以下のコードをスタイルシートに追加することで表示されなくなるかと思います。
#main_contents .list_content .entry_body .entry_discription, /* リスト冒頭文非表示 */
#main_contents .list_content .entry_body .entry_description {display: none;}
#main_contents #e .entry_discription,#main_contents #e .entry_description {display: block;}

ただし本文を非表示にすると、このテンプレートの仕様上、高さが不足してサムネイル画像がはみ出る可能性があるので、その場合は以下のコードを追加して最小の高さを確保してください。
「200」の数値を増減して調整します。
#main_contents .list_content{min-height: 200px !important;}/* リスト高さ調整 */
※カスタマイズでサムネイルをfloat配置などにしている場合は必要ありません。必要なくなった場合はリスト高さ調整のコードを必ず削除してください。

もし<div class="entry_description">内に表示するテキストがある場合は
<div class="entry_description">
(何らかのテキスト)
<span class="lt-none"><%topentry_description><%topentry_desc></span>
</div>
のように「<%topentry_description><%topentry_desc>」をspanで挟んで以下をスタイルシートに追加してください。
#main_contents .list_content .entry_body .lt-none {display: none;} /* リスト冒頭文非表示 */
#main_contents #e .entry_body .lt-none {display: inline;}
※冒頭で紹介したリスト冒頭文非表示コードは使わない
#269 : No title
may様、こんばんわ。
本文非表示について質問しただいです。

早速の回答、ありがとうございます。

カスタマイズを試してみた結果、二つ目のカスタマイズ(spanを用いるやり方)が表示のズレもなく、上手くできました。

ただ、これだけではmay様が仰ったとおりサムネの下辺がはみ出てしまったので、リスト高さ調整のコードを挿入するとすべてキレイに表示されました。

ちなみに、一つ目のカスタマイズ方法だと、ユーザータグの表示がズレる不具合が生じました。
私は、「リスト表示で画像横に記事タイトル表示」のカスタマイズと「TOPページ上にもユーザータグを表示」のカスタマイズを施していたので、どれかと干渉したのかもしれないですね。

とにかく、私の希望通りのレイアウトができて満足しております。
お忙しい中、どうもありがとうございました。

では。

だい

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered