Blogger Widgetで「続きを読む」を自動化。-- 3

Bloggerでのトップページ等で、複数記事を表示している場合に「続きを読む」リンクを付けて要約(記事の冒頭部分)のみを表示する機能に関して、あれやこれやとJavascriptを使って後加工で強引に自己満足な機能拡張をしてきましたが、どうやらMore Betterな回答が得られたようです。

結論から書きますと、WidgetでJavascriptなんて使わずにTemplateで対応するのが良さそうというか、手間も自由度も高いです。既にこの記事を書いている段階で適応済みですが、前回の記事の時と出力されるHTMLには際がないので、これを読んでいる方には何が変わったのかわからないかと思います。

ちなみに、「この続きを読む」に機能の基本は、クリボウさんのページとかEnvyさんページを参考にして下さい。

結果としては無駄になったJavascriptなコードでしたが、その作成過程で色々なテンプレートを眺めたりした事が功を奏したようで、新BloggerのTemplateに対しての理解が随分と深まりました。まだBlogger Templateのマニュアルとかドキュメントは読んで無いってあたりがアレですが・・。

今回私がテンプレートに対して加えた変更は以下のような感じです。(着色部分)

テンプレートをHTML(XML)で直接編集してコードを書き加えています。全てのテンプレートが同じ要素を同様に表現しているとは限らないので、私とまったく同じやり方で対応できるとは限りませんが、それなりに参考にはなるかと思います。

ポイントはテンプレートの中から<div class='post-body'>を探して、その次に<p><data:post.body/></p>とかpost-bodyの出力を指示している部分を探し、その次の部分に「続きを読む」のリンクを追加する事です。その際に記事が単体で表示されている時を考慮して、blog.pageTypetがindexの時のみに追加する様に条件文(if文)も加えます。

「続きを読む・・」の表示方法自体は普通のHTML構文ですから文言を変えたり、画像を使ったりも問題なく可能です。

また以前までの方法で記事中に<div class="readmore">なタグを書き込んでいた方は、テンプレートでのstyle指定でそちらを隠す事で二重に表示される事を防ぐ事ができるかと思います。

変更の手順は以下のような感じです。テンプレートの編集はやや難易度が高いというか失敗すると困るので事前の保存は欠かさずに。

以上のような感じて結果としてBloggerの機能で対応出来たのですが、これにしても何処かにドキュメントとかあってそれを見逃してる・見つけられなかっただけなんだろうなとか思っています・・・・。

関連のありそうな記事