個別ページの前後記事表示をタイトル名に変更する方法

2013年4月10日水曜日

個別ページの前後記事表示をタイトル名に変更する方法

Bloggerブログでの、
個別記事下部に表示される前後の投稿記事表示は、
「次の投稿」、「前の投稿」と表示され、
クリックしないと前後の記事タイトルすら分かりません。

そこで、
上記の「次の記事」「前の記事」と表示されている部分を、
記事タイトルが表示されていれば、
ユーザビリティの向上とその記事だけ読んでおしまい。
という直帰率改善に貢献できるのではと考えられます。

個別記事下部に前後記事のタイトル表示

こんな感じだとわかりやすいですよね。

そこで、
zerippeさんの作成したjQueryプラグイン
『bLinker』を使用すると上記リンク先の
記事タイトルを表示できます。

リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker"

方法はリンク先にもありますが、
わかりやすく（備忘録として自分に）記載しておきます。

テンプレート＞HTML の編集から

<head> タグ内にjQueryを読み込む以下のCodeを追加。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

bLinker v1.0

<head> タグ内にbLinkerを読み込むCodeを追加

<script src="（ファイルのURL）/blinker.js"></script>

ウィジェットのテンプレートを展開にチェックし、以下のように変更する

通常多くのテンプレートでは、
「b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'」を検索し、
"a"要素に"blinker"クラスを追加し、
bLinkerをロードするコードを追加すればOKです。

私のテンプレートにおいては、
上記部分が存在しなかった為、
『nextprev』にて検索し、
（２箇所在り）
『nextprev』を含む一番上の部分の
"a"要素に"blinker"クラスを追加しました。

この部分を変更します。

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

"a"要素に"blinker"クラスを追加し、bLinkerをロードするコードを追加

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blinker blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blinker blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

<script>$(function(){$.blinker().load();});</script>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

以上でも動作しますが、

CSSによって表示の調整も可能です。

このBlogで使用しているCSS

#blog-pager-newer-link, #blog-pager-older-link {
    background: -moz-linear-gradient(center top , #657E95 0%, #586D84 40%, #586D84 60%, #657E95 100%) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #657E95), color-stop(40%, #586D84), color-stop(60%, #586D84), color-stop(100%, #657E95)) repeat scroll 0 0 transparent;
    background-color:#586D84;
    border-radius: 3px 3px 3px 3px;
    font-size: 60%;
    padding: 5px;
    height: auto;
    width: 35%;
}
#blog-pager-newer-link a, #blog-pager-older-link a {
    color: #FFFFFF;
    display: block;
    height: 30px;
}
#blog-pager-newer-link:hover, #blog-pager-older-link:hover {
    opacity: 0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}
#blog-pager-newer-link a:hover, #blog-pager-older-link a:hover {
    text-decoration: none;

}

参考にして見てください。