Twenty Ten のメイン部分のCSSについて見ていくことにします。トップページのソースを見てみましょう。前にも見た通り、メインの部分はmain＞container＞content　という入れ子になっています。

その下に「nav-above」というidをもったひとかたまりの記述があります。

div id="nav-above" class="navigation"

この中に「nav-previous」「nav-next」というクラス名のついたナビゲーションがあります。これは、よく「← 古い投稿」とか、「新しい投稿 →」とか「←記事名」のように表されるナビゲーションの部分です。

トップページで隠れている「nav-above」

ところが、トップページをブラウザで見てみると、「nav-above」の中身が表示されていません。これはどうしたことでしょう。Twenty Ten のCSSを調べてみます。848行目あたりから「=Navigation」とあり、このナビゲーション関係の記述が始まっています。875行目あたりにあやしい部分があるようです。

#nav-above {
	margin: 0 0 18px 0;
}
#nav-above {
	display: none;
}
.paged #nav-above,
.single #nav-above {
	display: block;
}

「nav-above」が、

display: none;

で消されています。

「あれ？他のページではあるよね？？」

と思うでしょうが、それが次の

.paged #nav-above,
.single #nav-above {
	display: block;
}

の部分です。「paged」「single」のクラス名の中の「nav-above」は表示します、と上書きしているのです。

「paged」というクラス名はなんだろう？

「single」というクラス名については、Twenty Tenでページごとにデザインを変えるためにで調べたように、シングルページの「body」につくクラス名です。「paged」はなんでしょう？まぎらわしいですが、「page」とは違うようです。

これは、色々なページのソースを見比べてみるとこの「paged」はカテゴリーの一覧などのようにたくさんの投稿があって１ページにおさまらずに分割したときに、現れるクラス名のようです。

たしかにトップページや分割しているページの１ページ目の一番上にこういうナビゲーションはいらないですね。

「nav-below」もあるよ

記事の下の方に同じようなナビゲーションが表示されると思いますが、これは、id「nav-below」になります。こちらはいつも表示されているようですね。

「nav-previous」と「nav-next」は上下共通

「← 古い投稿」につくクラス名が「nav-previous」、「新しい投稿 →」につくクラス名が「nav-next」です。これは上下共通になっていますので、上下のidと組み合わせると、いろいろとCSSで制御できそうです。

「nav-previous」と「nav-next」の表示を変えてみる

「nav-previous」と「nav-next」はfloatで左右に振り分けられています。普段はこれでもよいのですが、ブログによっては記事のタイトルが長くなってしまい、このナビゲーションの表示がみにくくなることもあるかもしれません。そんなときは思い切ってfloatを取ってしまいましょう。

.nav-previous {
	float: none;
	width: 100%;
}
.nav-next {
	float: none;	
	width: 100%;
	text-align: right;
}

「float」を 「none」で外し、幅を100%にします。これで、2行になるので、「nav-next 」を

text-align: right;

で右に寄せます。後は見やすいようにmarginやpaddingなどで調整してみて下さい。