そらいろくらげが浮き輪で海に浮いているイラスト

FC2ブログで記事の要約を表示させる

FC2ブログの表示を記事の要約とサムネイル表示にする方法です。

くらげ模様では、トップページの記事表示数を10件に設定しています。しかし、ブログ記事が長くなるとその記事だけでトップページが長くなってしまい、以降の記事を読むのが億劫になります。
そこで、記事が長くなる場合は出だしの部分だけを本文に書いて、それ以降は追記に書いていました。しかし、追記には画像を挿入できないため、一度全文を本文に書いたあとに追記部分にコピペするという面倒なことをしていたのです。

先日、ブログデザインをいじいじしていると、要約だけを表示されるFC2変数があることが判明。そこで、このくらげ模様のデザインにも取り入れることにしました。要約だけでは寂しいので、記事内に使っている画像をサムネイルで表示させる変数も使用します。

htmlは、FC2の公式テンプレート、basic_whiteを参照しています。

要約を表示させる方法

記事の要約を表示させる変数は、<%topentry_description>を使います。この変数を使うと、本文の要約200文字分を表示してくれます。変数を挿入する部分は、<!–topentry–>内です。
くらげ模様の場合は、こんな感じ。

<!--topentry-->      <!--ここからtopentryエリア-->
<div class="entry">            <!--ここはentryというクラス名をつけますよ-->
<h2 class="entry-head">   <!--H2テキストが入ります。クラス名はentry-headです-->
<a href="<%topentry_link>"><%topentry_title></a>
</h2> <!--タイトルをクリックすれば記事に飛びます-->
<!--index-->     <!--ここからインデックスエリア-->
<div class="index">   <!--ここはインデックスというクラス名を付けますよ-->
<span class="date"><%topentry_year>.<%topentry_month>.<%topentry_day>
</span>        <!--クラス名はdate--><!--それぞれ年月日を表示する変数 年.月.日-->
<span class="category">    <!--クラス名はcategory-->
<%topentry_category>      <!--クラス名はcategory-->  <!--カテゴリーを表示する変数-->
</span>
</div>                               <!--ここまでインデックスエリア-->
<!-- /index -->                    <!--ここまでindexというクラス名が付いています-->

<div class="entry-content">               <!--ここからエントリー記事というクラス名が付きます-->
<!--not_permanent_area-->                 <!--ここから個別記事のみで表示-->
<div class="entry_body">                   <!--ここからentry-bodyというクラス名が付きます-->
<!--body_img-->                                 <!--サムネイル載せるよ-->
<div class="thumbnail">                      <!--クラス名はthumbnail-->
<%topentry_image_w300></div>      <!--サムネイル用変数-->
<div class="entry_description">          <!--クラス名はentry_description-->
            <%topentry_description> </div>         <!--記事の要約を表示する変数-->
<!--/body_img-->                                   <!--ここまでサムネイル部分-->
<!--body_img_none-->                            <!--記事に画像がない場合の表示-->
<%topentry_description>         <!--記事の要約を表示させる変数-->
<!--/body_img_none-->                            <!--ここまで記事に画像がない場合の表示-->
<p class="entry_more">          <!--クラス名はentry_more-->
<a href="<%topentry_link>" title="<%template_abs_link>"> <!--クリックすると本文開示-->
<%template_extend></a></p>           <!--続きを読む-->
</div>                                                     <!--ここまでentry_body-->
<!--/not_permanent_area-->                       <!--ここまで個別記事のみで表示-->
<!--permanent_area-->                               <!--個別記事ページで表示させない-->
<%topentry_body>                                    <!--本文を表示-->
<br />                                                       <!--改行-->
<!--more--><%topentry_more><!--/more-->      <!--more  追記がある場合は表示-->
<!--/permanent_area-->                               <!--ここまで個別記事表示で表示させない-->
</div><!-- /entry-content -->                            <!--ここまでentry_content-->
<!--途中省略-->
</div><!-- /entry -->                                     <!--ここまでentry-->
<!--/topentry-->                                              <!--ここまでtopentry-->

サムネイル表示にすると、いちいちサムネイル画像を探したり作ったりする手間がありますが、あるとないのとでは印象が全く変わります。
記事の一つ一つに興味を持ってもらうためにも、サムネイル表示はぜひともおすすめな方法ですので、試してみてください。

コメントを残す


This site uses Akismet to reduce spam. Learn how your comment data is processed.

goToTop