Seesaa™ブログの投稿で「続きを読む(read more)を表示する方法

2013/11/25 2014/11/22

Seesaa™ブログで「続きを読む」「read more」などの表示を行う方法をご紹介します。
ブログサービスを閲覧していて、最近主流になりつつある
「続きを読む」「続きはこちら」「本文を読む」「read more」で
投稿が抜粋で表示されるページがあると思います。
その表示と同じようにSeesaaブログでも表示することができます。

はじめに

この「続きを読む」や「read more」の仕組み。

記事を複数ページで分けていうるようなページでは、
読むのが結構面倒くさいなと感じています。

しかしTOPページなどでは、この表示はとても便利です。

当サイトではTOPページやカテゴリ、タグ、月別アーカイブ、検索結果などで表示しています。
http://algorhythnn.jp/blg/

こうした仕組みは、構築されたブログシステムによって様々ですが、
関連する投稿を一覧化してご提示させて頂くには便利な機能です。

本文の抜粋部分のみを表示させて頂いて、
内容に興味が持てそうかを選んでもらう方式です。

さて、今回はSeesaaでこの抜粋表示を実現する方法です。

なぜ必要か

SeesaaのブログでTOPページを開くと、
TOPページには最新の投稿がざーっと３投稿(変更可能)ほど表示されます。

TOPからの流入は閲覧される方の興味は未知

最近は直接TOPページからアクセスしてくださる方は減ってはいますが、
TOPにアクセスしてきたということは、興味を持っている話題がまだ絞れていません。

そんな時に偶然表示された１記事に興味を持ってもらうことができるでしょうか。

スクロールすれば、３記事見れるとしても、延々と続く記事をスクロールしてくれるでしょうか。

そんな時にこそ抜粋表示が便利です。

最新の３記事を１０記事に増やして表示したとしても、
抜粋表示なら少ないスクロールで網羅してもらうことができます。
１つぐらい興味を持っていただけて、読んでくれるかもしれません。

広告表示も羅列される場合がある

抜粋表示を利用せずに、TOPページにすべてを表示してしまうと、
各投稿の本文中に広告などを挿入している場合に、
TOPページにはその表示された記事の数だけ、広告も表示されます。

また、ヘッダーやフッターに対しても広告を挿入しているような場合には、
以下のような状態になってしまいます。

広告ユニットは３つまで

これ、Google™AdSenseなどをサイトに設置している場合には致命的です。
３個以上のコンテンツ広告表示はポリシー違反になります。
（その他リンクユニット３個、検索ユニット２個まで可）

まぁAdSenseのような配信型の広告を毎回記事の間に挿入されるのは、
手間がかかりますし、スクリプトコードが散乱することになりますのでお勧めはしません。

でも、意図があってそうした設置方法を好まれる方もおられるわけです。

そんな時には、TOPページには表示されない、
でも記事の個別ページには表示される仕組みが必要になります。

それも、抜粋表示で実現が可能です。

投稿の入力先を変えるだけで対応可能

Seesaaブログで抜粋表示を行う場合、特定のタグを挿入するという考え方ではなく、
抜粋表示を考慮した投稿方法を選択する必要があります。

投稿の方法

Seesaaの記事を作成する投稿画面は以下のような画面になっています。
ここで[本文]と[追記]というタブがあります。

投稿画面の本文と追記

このそれぞれの入力タブが「抜粋」と「本文」に対応しています。
それぞれに入力して記事を投稿します。
記入が終了したら、保存して公開します。

投稿を本文と追記に分割

ブログのトップページを確認すると、
「本文」に入力した記事がTOPページ上で表示され、
[追記]に入力した内容は表示されていません。

代わりに「続きを読む」が表示されるようになります。

続きを読むの表示

記事の投稿の方法を２つのフィールドに分割することで、
Seesaaブログではこの「続きを読む(read more)」として表示されるようになります。

過去の投稿に適用しにくい

過去の投稿で「続きを読む(read more)」を利用していない場合には、
過去投稿を抜粋部のみ「本文の編集」に対して残し、
残りを[追記の編集]に移動させる必要があります。

仕組みの確認

こうした表示はすべてのテンプレートで対応しているのか確認する必要があります。
Seesaaにおいて、テンプレート内の変数などについては詳細が公開されていないようなのですが、
この「続きを読む」の部分に関しては、以下で定義されています。

コンテンツ－記事内のHTML

記事コンテンツのHTML内には、以下のようなソースが存在しています。

<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>

<% if:page_name eq 'article' -%>

<% else -%>

<% /if -%>

これは、最初の<% if:page_name eq ‘article’ -%>にて、
個別記事の画面であるかを判定しているようです。

投稿記事である場合には、article.entire_bodyを表示、
それ以外（<% else -%>）の場合には、article.first_bodyを表示という記述であると思われます。

このことによって「続きを読む」の機能の実装はテンプレートの仕様に影響を受けるものではなく、
記事コンテンツが出力するように設定されていれば、表示されます。

「続きを読む」の文字を変更する場合

初期状態で追記を利用して投稿を行った際には「続きを読む」が表示されます。

先ほどの出力処理を確認しても「続きを読む」の部分を変更はできそうにありませんでしたが、
Seesaaブログでは「続きを読む」を変更することができるようになっています。

最初にご紹介したサイドメニューの[設定]をクリックして開いた設定画面で[記事設定]をクリックします。

記事設定画面で[続きを読む文言]という行がありますので、
そこの入力されていないフィールドに、表示したい文言を入力します。
入力が完了したら[保存]をクリックして設定を反映します。

記事設定から続きを読むを変更

この続きを読むの文言変更ですが、ブログの表示に反映するためには、
何か投稿を１つ保存して、更新するなりの投稿操作を行う必要がありました。
既にある投稿を開いて保存すれば、すべての投稿に対して有効になります。

実際にブラウザから表示を確認すると、変更した文言に変更されています。

続きを読むが変更されて表示

こうして、変数(article.first_body)から得られる投稿の内容に対して、
「続きを読む」の文言が含まれて出力されてくるようなので、
これ以上の変更はちょっと難しいかなといった印象でした。

さいごに

こうして続きを読むをうまく活用することで、
TOPページなどの投稿の繰り返し時には表示したくない内容を隠しておくことができるようになります。

これによってGoogleAdSenseなどを投稿の本文に挿入した場合であっても、
TOPページの繰り返し表示される広告を回避することができるようになります。

トップページの表示改善

参考

追記機能: ブログ・ヘルプ

Seesaaはシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。