Twenty Elevenのナビゲーションの「次へ」と「→」がズレてしまう件

Twenty Eleven で個別記事のページを開いたときに、上の方に前の記事や次の記事へのナビゲーションが表示されるかと思いますが、これって、あなたのブラウザではちゃんと表示されていますでしょうか?
もしかしてこんな感じに見えていませんか?
ナビゲーションの「前へ」と「次へ」がズレている
ぼくは Mac を使ってますが、Safari も Chrome も「次へ→」という部分の「次へ」と矢印部分がなぜか改行されて見えてしまうのです。IE環境での表示は確認してませんが、Firefox のみちゃんと一列に表示されています。

ナビゲーションの「次へ」と「→(矢印)」を
一列に表示したい!

つまりこうしたいわけです。
Twenty Elevenのナビゲーションの理想型
これは CSS をちょっと変更すればうまく整いました。
まず Twenty Eleven のテーマファイルの【style.css】を開いてだいたい 1700 行目に差し掛かる辺りから【=Navigation】という部分がでてきます。その最後の方に【Singular navigation】という項目がありますが、その一部を以下のように変更します。
【該当箇所】

#nav-single .nav-previous,
#nav-single .nav-next {
float: none;
width: auto;
}

【変更後】

#nav-single .nav-previous,
#nav-single .nav-next {
float: left; /* 左に回り込むように指定 */
width: auto;
}

ナビゲーションの「前へ」と「次へ」に関する部分の回り込みが【none】となっていたので、【float: left;】というように左に回り込ませています。こうすると、ナビゲーションの「←前へ」と「次へ→」が一列にきれいに表示されるようになります。
ナビゲーションの「前へ」と「次へ」が狭まってしまった

ちょっと気になる点が・・・

でも、よくよく見ると、「←前へ」と「次へ→」の間が、以前より狭まってしまっていると思いませんか? なので、この間隔を若干広げたいと思います。
先ほどの箇所のすぐ下にある以下の部分【#nav-single .nav-next】の padding をちょっとだけ広げてみてください。ぼくの場合は 0.5em だったのを 1em にしました。

#nav-single .nav-next {
padding-left: 1em;
}

これで、このように「前へ」と「次へ」間隔が広がって、元の間隔と同じくらいの表示なります。
Twenty Elevenのナビゲーションの理想型
以上です。


投稿日

カテゴリー:

投稿者:

コメント

“Twenty Elevenのナビゲーションの「次へ」と「→」がズレてしまう件” への7件のフィードバック

  1. Retoricのアバター
    Retoric

    Kick the tires and light the fires, problem ofilifalcy solved!

  2. carinsurancedaysのアバター
    carinsurancedays

    I love reading these articles because they’re short but informative.

  3. danosteelのアバター
    danosteel

    Full of salient points. Don’t stop believing or writing!

  4. donclaytonmusicのアバター
    donclaytonmusic

    I’m so glad I found my solution online.

  5. faskefoodsのアバター
    faskefoods

    Shoot, so that’s that one supposes.

  6. ingfamのアバター
    ingfam

    That’s not just the best answer. It’s the bestest answer!

  7. auto insuranceのアバター
    auto insurance

    BION I’m impressed! Cool post!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です