Blogger:投稿の上部へ関連記事へのジャンプを追加して、閲覧者の使いやすさの向上！

イントロダクション

このブログでは、関連記事を表示するために Linkwithin を使用しています。
Linkwithin を使用することで、ブログの制作者は各ページに関連記事へのリンクを設定しなくても、Linkwithin が自動的に関連記事へのリンクを表示してくれます。

今回は、記事の上部をみているときに、すぐに関連記事へジャンプできるように、関連記事へのジャンプ用のリンクを記事の上部へ追加してみます。

コード

HTML

Blogger のテンプレートの HTML の編集より、記事のヘッダーを見つけ、その部分に以下のコードを追加します。

<!-- 関連記事へのジャンプ追加&#65306;ここから -->
<!-- 投稿ページにのみ表示 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='post-relation-posts-jump'>
  <a href='#lws_0'>&gt;&gt; 関連記事へ</a>
 </span>
</b:if>
<!-- 関連記事へのジャンプ追加&#65306;ここまで -->

私の場合、Linkwithin は投稿ページにのみ表示しているため、<b:if cond='data:blog.pageType == &quot;item&quot;'> と </b:if> を追加して、関連記事へのジャンプも投稿ページにのみ表示するようにしています。


記事のヘッダーは、テンプレートを <div class='post-header'> にて検索して場所を特定し、その中の <div class='post-header-line-1'/> 要素内に上記コードを挿入しました。

なお、 <div class='post-header'> はモバイル表示用とパソコン表示用の 2 箇所あります。私は Linkwithin をパソコン表示用でのみ表示させているため、パソコン表示用の箇所にのみ上記コードを挿入しました。
（<b:includable id='post' var='post'>内がパソコン表示用です。<b:includable id='mobile-post' var='post'>内がモバイル表示用です。）


リンクのアンカーとして、lws_0 を使用している理由は、記事「あまりにも自然すぎて気が付かなかった! Linkwithin による関連記事の表示は、そこが見えるようになってから行われる」を参照してください。

スタイルシート

関連記事へのジャンプを右寄せしておくと、操作しやすく、わかりやすいと思い、以下のスタイルシートを追加しています。（Blogger のテンプレート→カスタマイズ→上級者向け→CSSを追加）

/* 関連記事へのジャンプ */
span.post-relation-posts-jump {
    float: right;
}

結果

以下のように、投稿の上部へ関連記事へのジャンプが追加されます。

関連記事へのジャンプ

この「>> 関連記事へ」のリンクをクリックすると、Linkwithin による関連記事へジャンプできます。