Blogger:記事概要「もっと読む」のリンクから#moreを消す

イントロダクション

Google のブログサービス「Blogger」では、1 ページ内に複数の投稿が表示されるページがあります。(*1)

*1:
メインページ、ブログアーカイブ、ラベルページ、検索ページでは、1 ページ内に複数の投稿が表示されます。

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-summary.html

そのような投稿が複数表示されるページにおいては、投稿に追記の区切りが設定されていれば、それよりも前の部分のみ本文が表示され、あとは省略されます。

投稿の概要

追記の区切りの前までの本文が表示され、
全文を読みたい場合には「もっと読む」をクリックして、
投稿のページへ移動する

そして、続きから読みたい場合には、「もっと読む »」というリンクをクリックします。

投稿の本文を続きから読むことができる「もっと読む »」リンクの仕組み

投稿の概要に表示される「もっと読む »」リンクには、その投稿のページへのリンクに、「#more」というアンカーが付与されています。

例）投稿「コンピュータゲームを誰かとプレイするときの準備：アップデートを済ませておきましょう！」の場合
http://upa-pc.blogspot.jp/2015/02/game-need-update.html#more

通常リンクを開くとページの先頭が表示されますが、この # から始まるアンカーが付与された URL を開くと、その URL のページに移動した後、アンカーに対応したページの部分を表示させることが出来るのです。

つまり、ページの途中から閲覧者に見てもらうことが可能になるのです。

この「#more」というアンカーは、Blogger では追記の区切りを入れた箇所に、次の形で挿入されています。

<a name='more'></a>

そのため、「もっと読む »」リンクをクリックすると、その投稿のページに飛んだあと、追記の区切りを入れた箇所までページがスクロールします。

従って、投稿の概要にて読んだ本文の続きから、その投稿のページにて読み進めることが出来るわけです。

余談ですが、Blogger で投稿を編集しているときには、追記の区切りは HTML 上では、



で表現されています。

投稿を公開すると、 が <a name='more'></a> に変わるようです。

「もっと読む »」リンクから #moreを消す

さて、Bloggerブログの運営者によっては、「もっと読む »」リンクをクリックをクリックしたときに、URL に「#more」というアンカーがついていない方がうれしいという人もいるかと思います。

この「#more」というアンカーを消すには、Blogger のテンプレートの HTML を編集する必要があります。

Blogger のテンプレートの HTML を編集

Blogger の設定の、テンプレートの HTML の編集より、表示された Blogger のテンプレートの HTML より、「もっと読む »」リンクを表示している以下の箇所を見つけ出します。

                                  <b:if cond='data:post.hasJumpLink'>
                                    <div class='jump-link'>
                                      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
                                        <data:post.jumpText/>
                                      </a>
                                    </div>
                                  </b:if>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'> の部分が、「もっと読む »」へリンクを設定している部分です。

そのリンクの URL の設定部分である、expr:href='data:post.url + "#more"' から、#more を URL に付与している部分である、以下の文字列を削除します。

+ "#more"

すると、次のような表記になります。

                                  <b:if cond='data:post.hasJumpLink'>
                                    <div class='jump-link'>
                                      <a expr:href='data:post.url' expr:title='data:post.title'>
                                        <data:post.jumpText/>
                                      </a>
                                    </div>
                                  </b:if>

このテンプレートの HTML を保存すれば、「もっと読む »」リンクに #more が付与されなくなります。

その結果、「もっと読む »」リンクをクリックしても、追記の区切りの部分に自動的にジャンプしなくなり、ブログの投稿の先頭から内容を読むことが出来るようになります。

「もっと読む »」リンクの Blogger テンプレートの HTML についての解説

「もっと読む »」リンクを表示している部分の Blogger のテンプレートの HTML は、次のようになっています。(#more を削除する前）

                                  <b:if cond='data:post.hasJumpLink'>
                                    <div class='jump-link'>
                                      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
                                        <data:post.jumpText/>
                                      </a>
                                    </div>
                                  </b:if>

一見、Blogger のテンプレートを見たことが無い人には、何をしているのかわからないものですが、仕組みがわかれば簡単です。

上記の、「もっと読む »」リンクを表示している部分の Blogger のテンプレートの HTML について 1 行ずつ解説していきます。

<b:if cond='data:post.hasJumpLink'>

Blogger のテンプレートの HTML にて、cond に記載された条件によってこのタグの内側の要素を HTML ソースに出力するかどうかを決定します。

cond に記載された条件が成立している場合、このタグの内側の要素が HTML ソースに出力されます。cond に記載された条件が成立していない場合には、このタグの内側の要素が HTML ソースに出力されません。

ここで記載されている cond の条件は、data:post.hasJumpLink です。
この data:post.hasJumpLink は、Blogger のデータを示す名前であり、Bloggerのサーバ側にて、Blogger のテンプレートの HTML を解釈して、実際の HTML ソースコードに変換するときに、状況に応じて何らかの値を持ちます。

この data:post.hasJumpLink は、名前からして「もっと読む »」リンクを持っている投稿かどうかを示している値だと考えられます。

追記の区切りを設定していない投稿の場合、「もっと読む »」リンクを持っていないため、cond='data:post.hasJumpLink' の条件は成立せず、その内部の「もっと読む »」リンクの HTML を生成している部分が出力されません。

「もっと読む »」リンクを持っている投稿では、cond='data:post.hasJumpLink' の条件が成立するため、その内部の HTML が出力されます。

この辺りの Blogger の仕組みについては、次の公式ドキュメントが参考になります。

レイアウト用ウィジットタグ - Blogger ヘルプ
https://support.google.com/blogger/answer/46995?hl=ja

レイアウトデータタグ - Blogger ヘルプ
https://support.google.com/blogger/answer/47270?hl=ja

<div class='jump-link'>

class 属性として jump-link を持った、div タグです。

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>

リンクを設定するための a タグを出力しています。

ここで、見慣れない expr:href や expr:title という表記があります。
expr: がつかない属性の場合には、属性の値がそのまま HTML ソースコードとして出力されますが、この expr が付与された属性の場合、その属性の値に対して Blogger の解析処理が行われて、その結果が expr: の後の属性の値として HTML ソースコードに出力されます。

ここでは、expr:href として、'data:post.url + "#more"' が設定されていますが、この値は Blogger によって、data:post.url が実際の投稿の URL に置き換えられて、+ 演算子によってその後ろの "#more" と連結されています。

その結果、例えば、次のような値が、a タグの href 属性に指定されます。

例） expr:href='data:post.url + "#more"' の出力結果
http://upa-pc.blogspot.jp/2015/02/game-need-update.html#more

同様に、expr:title='data:post.title' では、data:post.title が実際の投稿のタイトルに置き換えられて、a タグの title 属性に設定されます。

<data:post.jumpText/>

data:post.jumpText は Blogger のデータの名前であり、実際の HTML ソースコードには、「もっと読む »」といった文字列で出力されています。

この「もっと読む »」は、Blogger のレイアウトの設定にて、ブログの投稿の編集の中で、別の文字列を指定することが可能です。

</a>

a タグの閉じタグです。

</div>

div タグの閉じタグです。

</b:if>

b:if タグの閉じタグです。

※ 重要：Blogger のテンプレートの HTML を編集する上での注意事項

テンプレートの HTML の編集に失敗すると、ブログが正常に表示されなくなります。

テンプレートの HTML を編集する前には、（何か問題が生じた場合に直ぐに戻せるように）編集前のテンプレートの HTML をテキストエディタなどに張り付けて保存しておきます。

テンプレートの HTML を編集したら、必ずプレビューを確認して、ブログが正常に表示されることを確認します。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/blogger-html-edit-ref.html

Dr.ウーパのコンピュータ備忘録

2015年2月9日月曜日