頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

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

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

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

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

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

なぜ必要か

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

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

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

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

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

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

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

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

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

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

13_広告ユニットは3つまで

広告ユニットは3つまで

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

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

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

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

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

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

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

投稿の方法

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

01_投稿画面の本文と追記

投稿画面の本文と追記

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

02_投稿を本文と追記に分割

投稿を本文と追記に分割

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

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

03_続きを読むの表示

続きを読むの表示

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

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

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

仕組みの確認

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

コンテンツ-記事内のHTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

06_トップページの表示改善

トップページの表示改善

参考

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


Seesaaはシーサー株式会社の登録商標(第5049965号)であり、
Seesaaロゴはシーサー株式会社の登録商標(第5137457号)です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Seesaa , ,

  関連記事