日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月4日日曜日

Bloggerのナビゲータ「次の投稿-ホーム-前の投稿」 の並び順に違和感を感じたので左右を交換

イントロダクション

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>


そこで、Blogger のテンプレートの HTML を編集にて、class="blog-pager"が記載されている場所を特定します。
特定すると、以下のような記述になっていました。


<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>

タグの並び順は、「次の投稿-前の投稿-ホーム-...」となっていました。
これは、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








関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...