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

  • このエントリーをはてなブックマークに追加
  • 0
Twenty Eleven

Twenty Eleven で個別記事のページを開いたときに、上の方に前の記事や次の記事へのナビゲーションが表示されるかと思いますが、これって、あなたのブラウザではちゃんと表示されていますでしょうか?

もしかしてこんな感じに見えていませんか?

ナビゲーションの「前へ」と「次へ」がズレている

ぼくは Mac を使ってますが、Safari も Chrome も「次へ→」という部分の「次へ」と矢印部分がなぜか改行されて見えてしまうのです。IE環境での表示は確認してませんが、Firefox のみちゃんと一列に表示されています。

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

つまりこうしたいわけです。

Twenty Elevenのナビゲーションの理想型

これは CSS をちょっと変更すればうまく整いました。

まず Twenty Eleven のテーマファイルの【style.css】を開いてだいたい 1700 行目に差し掛かる辺りから【=Navigation】という部分がでてきます。その最後の方に【Singular navigation】という項目がありますが、その一部を以下のように変更します。

【該当箇所】

【変更後】

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

ナビゲーションの「前へ」と「次へ」が狭まってしまった

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

でも、よくよく見ると、「←前へ」と「次へ→」の間が、以前より狭まってしまっていると思いませんか? なので、この間隔を若干広げたいと思います。

先ほどの箇所のすぐ下にある以下の部分【#nav-single .nav-next】の padding をちょっとだけ広げてみてください。ぼくの場合は 0.5em だったのを 1em にしました。

これで、このように「前へ」と「次へ」間隔が広がって、元の間隔と同じくらいの表示なります。

Twenty Elevenのナビゲーションの理想型

以上です。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメント

  1. Retoric より:

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

  2. carinsurancedays より:

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

  3. danosteel より:

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

  4. donclaytonmusic より:

    I’m so glad I found my solution online.

  5. faskefoods より:

    Shoot, so that’s that one supposes.

  6. ingfam より:

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

  7. auto insurance より:

    BION I’m impressed! Cool post!

コメントをどうぞ

メールアドレスが公開されることはありません。