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』こちらからプラグインをDownloadして外部ファイルとして置く
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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;
}
参考にして見てください。
