サイドバーの各一覧表示部の奇数行と偶数行の背景色を別の色にする方法

サイドバーの各一覧表示部の奇数行と偶数行の背景色を別の色にする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロの新デザイン(CSS編集用デザイン)で、サイドバーの『最近の記事』『テーマ』『このブログの読者』『お気に入りブログ』など、各一覧表示部の奇数行と偶数行の背景色を別の色にして見やすくするカスタマイズ方法をご紹介します。

例えば↓こんな感じや、

↓こんな感じに表示することができます。

CSS3の機能を利用してカスタマイズする方法

まず、CSS3で定義される「nth-child擬似クラス」という機能を使う方法です。

CSS3をサポートしていないInternet Explorer 8(IE8)などでは無視されますが、単純明快で短いCSSのコードで記述できます。

この方法で実施するには、以下のコードをユーザーCSSに追加してください。

/* サイドバーの一覧部の偶数行と奇数行の背景色を
   変えて見やすくする方法 (CSS3) */

.skinSubList li:nth-child(odd) { /* 奇数行 */
  background-color: #F0F0F0;
}
.skinSubList li:nth-child(even) { /* 偶数行 */
  background-color: #FFFFF0;
}
.skinSubList li { /* 余白調整 */
  margin: 0;
  padding: 3px 0;
}

赤太字部が奇数行の背景色、紫太字部が偶数行の背景色となります。

なお、CSS編集用デザインの初期状態では行間に空白部分があるため、行背景を設定した場合に行間が空いてしまいますが、余白調整の部分でこれを解消しています。

もし既にこういった調整を行っている場合など、不要な場合はこの部分は省いてください。

IE8以下も対応のCSSでカスタマイズする方法

次に、IE8以下にも対応し、かつCSSのみで実施する方法です。

コードが長く、あまりスマートなやり方とは言いがたいですが、CSS3に対応していないIE8でも問題なく反映されます。

この方法で実施するには、以下のコードをユーザーCSSに追加してください。

/* サイドバーの一覧部の偶数行と奇数行の背景色を
   変えて見やすくする方法 (IE8対応) */

.skinSubList li { /* 全ての行 */
background-color: #F0F0F0
}
/* 偶数行 */
.skinSubList li:first-child+li,
.skinSubList li:first-child+li+li+li,
.skinSubList li:first-child+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
.skinSubList li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{
background-color: #FFFFF0;
}
.skinSubList li { /* 余白調整 */
  margin: 0;
  padding: 3px 0;
}

CSS3の場合と同様、赤太字部が奇数行の背景色、紫太字部が偶数行の背景色となります。

余白調整部分も同様です。

なお、上記コードは、対象の一覧が51行以下であることが前提ですが、更に「+li+li」を増やしたセレクタを追加することで52行め以降も対応可能です。

以上、アメブロのサイドバーの各一覧表示部の奇数行と偶数行の背景色を別の色にするカスタマイズ方法をご紹介しました。

もしよかったらお試しください。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ