Blogger の「前の投稿」「次の投稿」を記事タイトルに変更する

この Blog もそうなのですが、Blogger で記事を閲覧すると、画面下のほうに「次の投稿」「ホーム」「前の投稿」というリンクが表示されます。

この「次の投稿」「前の投稿」を、記事のタイトル名に変えられたらいいなーと思ったのですが、実は JQuery を使えばちょいちょいと変更できることを知りました（テンプレートの編集は不要です）。

手順

Blogger の管理画面で「レイアウト」を開き、「ガジェットを追加」をクリックします（「ガジェットを追加」はどれを選んでも構いません）。

「HTML/JavaScript」を追加します。

「コンテンツ」に、以下の JavaScript をコピー＆ペーストします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

※このスクリプトは How to Replace Older Posts and Newer Posts Links with Blogger Post Titles より引用しています。

ちょいと改造

基本的にはこのスクリプトで何ら問題無く動作するのですが、記事名が長すぎる場合などに見映えが損なわれる場合があるので、次のように改造してみました。あと、async は単なる気休めです(笑)。

<script async='async' type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script async='async' type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
if( olderLinkTitle.length > 16 ) {
    olderLinkTitle = olderLinkTitle.substr(0, 16) + "...";
}
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
if( newerLinkTitle.length > 16 ) {
    newerLinkTitle = newerLinkTitle.substr(0, 16) + "...";
}
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Blogger の小枝