イントロダクション
Blogger の記事の下部に、次の投稿と前の投稿に移動するナビゲータがあります。しかしこれ、よくよく並び順を考えると、左側が「次の投稿」で、右側が「前の投稿」って感覚的に逆のように思います。
ナビゲータ「次の投稿-ホーム-前の投稿」
例えば、世の中のいろいろな事例を見てみましょう。
- ブラウザの前のページ・次のページへ移動するナビゲータの並びは（←前のページ）（次のページ→）となっている。
- 検索エンジンの検索結果の画面で前の検索結果・次の検索結果に移動するナビゲータの並びは、（<前へ)(次へ>）となっている。
- いろいろなブログを見ていると、（←前の投稿）（次の投稿→）となっているケースが多いように感じる。
ということで、Blogger のナビゲータ「次の投稿-ホーム-前の投稿」 は世の慣例とは逆のパターンになっているように思います。
そこで、Blogger のテンプレートの HTML を編集して、このナビゲータを「次の投稿-ホーム-前の投稿」から「前の投稿-ホーム-次の投稿」へ変更してみました。
カスタマイズ
Blogger のテンプレートの HTML を編集にて、ナビゲータ「次の投稿-ホーム-前の投稿」を作成している箇所を見つけ出します。
ナビゲータ「次の投稿-ホーム-前の投稿」を Chrome の要素を検証にて、要素を確認すると、次のように<div class="blog-pager" id="blog-pager"></div>に囲まれた領域であることがわかります。
<div class="blog-pager" id="blog-pager">
<span id="blog-pager-newer-link">
<a class="blog-pager-newer-link" href="http://upa-pc.blogspot.jp/2014/05/blogger-atom.html" id="Blog1_blog-pager-newer-link" title="次の投稿">
次の投稿
</a>
</span>
<span id="blog-pager-older-link">
<a class="blog-pager-older-link" href="http://upa-pc.blogspot.jp/2014/05/hydravision-wallpaper.html" id="Blog1_blog-pager-older-link" title="前の投稿">
前の投稿
</a>
</span>
<a class="home-link" href="http://upa-pc.blogspot.jp/">
ホーム
</a>
</div>
特定すると、以下のような記述になっていました。
<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>
タグの並び順は、「次の投稿-前の投稿-ホーム-...」となっていました。
これは、HTMLタグ以外の方法で並び順が制御されているに違いない！
もう一度、ナビゲータ「次の投稿-ホーム-前の投稿」を Chrome の要素を検証にて、要素を確認すると、次の投稿、前の投稿 には次のようなスタイルシートが適用されていることがわかりました。
次の投稿
#blog-pager-newer-link {
float: left;
}
前の投稿
#blog-pager-older-link {
float: right;
}
かつこれらは、（Bloggerユーザが設定を変更できない）外部のスタイルシートによって定義されているということがわかりました。
それならば、話は簡単です！
スタイルシートの優先順位は「インラインCSS > <head>内のCSS > 外部CSS」となるようなので(*1)、テンプレートのカスタマイズより、上級者向け→CSS を追加にて、カスタム CSS を追加します。
次のように、次の投稿と前の投稿の float の left と right を逆にしてブログに適用しました。
#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}
変更後ナビゲータ「前の投稿-ホーム-次の投稿」
これで、世間一般的なナビゲーションの並びに変更することが出来ました!
まとめ
Bloggerのナビゲータ「次の投稿-ホーム-前の投稿」 の並び順に違和感を感じたので左右を交換してみました。「次の投稿」、「前の投稿」の表示位置はスタイルシートの float によって指定されているので、カスタム CSS を追加し、希望の float を指定してあげることで、ナビゲータを「前の投稿-ホーム-次の投稿」の順番に変更できました。
参考文献
*1
優先順位と上書きルール/CSS Tips/2Step CSS - リアルタイムCSSレイアウト講座 -http://www.2step-css.com/Tips/Description/item_101.html
*その他
スタイルの優先順位－CSSの基本http://www.htmq.com/csskihon/007.shtml
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について