Seesaaブログで全文表示をやめて「続きを読む」を追加するカスタマイズ


Seesaaブログに追記を使わず「続きを読む」を設置
http://blog.kantan-life.com/article/read_more.html


このページに倣って記事ページ以外での全文表示をやめて、「続きを読む」リンクを入れるようHTMLを変更しました。


readmore_2016_01.png

前提としてSeesaaブログには記事投稿ページには本文と追記とに分けて書けるようになっています。書き出しを本文に書いて、追記にその後を書けば、トップページなどで記事全文が長々と表示されることはありません。ですが、私はSeesaaブログを使い始めたときからずっと、ひとつの記事を書くのに分けて書くのは気持ち悪いと思い、全て文章は本文側に書いています。そういう私みたいなわがままな人にとって便利なカスタマイズです。

記事ページ以外のトップページや過去ログページでも記事の全文が表示されるのは、別に望んだわけではなく結果的にそうなってしまっていただけで、変えたいとは思っていました。トップページなどでは記事タイトルと書き出しが少し見えるくらいのほうが一覧性が高くて、少ないスクロールで多くの記事が見れてサイトとして使いやすいですから。


実際に行う変更は簡単なもので数行の変更で済みます。このブログに適用する際に少しカスタマイズしました。



記事コンテンツのHTMLを編集する。elseの下のこの辺りの部分を変更します。

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><br />


<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) | text_summary(300) %><br />
<div class="readmore"><a href="<% article.page_url %>">続きを読む</a></div><br />


記事コンテンツ以外の本文表示をどうするかという部分で、text_summary変数で最初の何文字分だけ表示させるかを指定します。その後ろで全文を見たい場合に開く記事ページのリンクを追加してあります。

私は300byte分表示させることにしました。私のブログで表示される本文が5行を超えて10行弱になるくらいでした。

続きを読むリンクはdivで囲み、CSSで位置や余白を調整できるようにしました。


こんな感じです。
readmore_2016_02.jpg
(クリックすると大きな画像で見れます。ページ全体のスクリーンショットを取るのはFirefoxが便利。)


表示させる文字数を変える以外にも、「続きを読む」の文言を変えたり、デザインを変えたり、「続きを読む」のリンクを文字ではなく画像にしてしまうなど、カスタマイズの余地はいろいろありますね。


今日紹介したカスタマイズの元記事の方は既にSeesaaブログを使っていないようですが、私がやりたかったことにドンピシャでとても役に立ちました。私も何年か前に抜粋表示にトライしたのですがその時は結局うまくできず今まで全文表示させたままになっていました。



最近ブログカスタマイズ熱が上がっていて、記事ページの前後の記事へのリンクを表示させるよう戻してデザインを試行錯誤しています。もしかしたら近いうち記事にするかも。


夜のピクニック(新潮文庫)
新潮社 (2015-04-03)
売り上げランキング: 929


この記事へのコメント