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件のフィードバック

carinsurancedays へ返信する コメントをキャンセル

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