PR PR
宝島社
¥990 (2023/12/22 16:35時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

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

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年4月10日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

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』にて検索し、
(2箇所在り)
『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;

}

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

スポンサーリンク
タイトルとURLをコピーしました