「記事一覧」を目立たせる

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

前々から気になっていた目立たない「記事一覧」。今回は、この部分を目立たせるための小ネタです。

カスタマイズの準備

この部分は初心者の方は読み飛ばしてもらってもいいかと思います。カスタマイズのための準備調査です。

「記事一覧」部分のHTML

結構単純です。以下のようになっています。

<a class="pagingList skinPagingListColor" href="<a href="http://ameblo.jp/jalan2-net/entrylist.html">http://ameblo.jp/jalan2-net/entrylist.html</a>">記事一覧</a>

つまり、pagingListとskinPagingListColorの2つのクラス設定がされているというわけですか。じゃぁ、この部分のスタイル設定はどうなっているんでしょう？

「記事一覧」部分のCSS設定

.pagingPrev,
.pagingNext,
.pagingList {
	display:inline-block;
	vertical-align:middle;
}
.pagingList {
	margin-top:5px;
}

なるほど。ページングナビ共通の設定がされているだけですね。では、「<< 前のページ」「次のページ >>」のリンクの部分はどうでしょうか？

まず、HTML…

<a class="skinSimpleBtn pagingNext" href="<a href="http://ameblo.jp/jalan2-net/page-2.html">http://ameblo.jp/jalan2-net/page-2.html</a>次のページ >></a>

次はCSS…

.skinSimpleBtn:hover,
.skinSimpleBtn:focus {
	text-decoration:none;
}
.pagingPrev,
.pagingNext {
	position:absolute;
	top:0;
	white-space:nowrap;
	padding:4px 14px 3px;
	border-radius:6px;
}
.pagingPrev {
	right:280px;
}
.pagingNext{
	left:280px;
}
.listPagePaging .pagingPrev {
	right:260px;
}
.listPagePaging .pagingNext {
	left:260px;
}

なるほど。border-radius:6px;この部分がミソですかね。あと、「<< 前のページ」「次のページ >>」と文字の表示位置をあわせるために、margin-top:5px;の設定がありますので、これを上書きしないとだめですね。あと、上下ボーダー分の各1px分の高さも合わせないといけません。

背景を黒にして目立たせる

ここからが、この記事の本題です。ここから読んでいただければ、同様のカスタマイズは簡単にできちゃいます！

私は、「記事一覧」部分の表示を、背景を黒色、リンク色を白、マウスを乗っけたときとクリックしたときの色を黄色にして目立たせたいと思います。

/* ■「記事一覧」の表示を目立たせる設定■ */

.pagingList {
	margin-top:0; /*←元々5px設定だったのを上書き */
	white-space:nowrap;
	padding:5px 14px 4px;
	border-radius:6px;
}
.skinPagingListColor {
	background: #000000;
}
a.skinPagingListColor,
a:link.skinPagingListColor,
a:visited.skinPagingListColor {
	color: #ffffff;
}
a:hover.skinPagingListColor,
a:active.skinPagingListColor {
	color: #ffff00;
	text-decoration: none;
}

はい。これで完成です。上のソースコードをコピーして、CSSの最後の部分に追加すれば完了です。背景の色とリンク色等は、お好きな色を設定してくださいませ。