HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
記事一覧ページを、デザインにあわせてプチ整形したいと思います。タブのついた、罫線で囲まれたあれです。かなり簡単にカスタマイズできちゃいます。
ブログの共通設定を少し変更するだけで実現
記事一覧部分の色の指定は、右図のような各クラスに対して行われています。実はこれらの各クラス、編集可能CSSの「(3-10) コメント欄、トラバ欄、記事一覧などの一覧」の各設定。
ブログの共通設定ですので、同じような表現を使っているページのデザインも同時に変更されることになります。
スキンの選択で「CSS編集用デザイン」を指定している場合、その部分の最初のCSSの内容は下記のようになっています。
/* (3-10) コメント欄、トラバ欄、記事一覧などの一覧
--------------------------------------------*/
/* 背景色 */
.skinBgColor,.skinBaseBgColor,.skinBlock{
background-color:#ffffff;
}
/* 弱い背景色 */
.skinWeakBgColor,.skinBaseWeakBgColor{
background-color:#f7f7f7;
}
/* 強い背景色 */
.skinStrongBgColor,.skinBaseStrongBgColor{
background-color:#f7f7f7;
}
/* 枠線の色 */
.skinBorderColor,.skinBaseBorderColor,.skinBlock{
border-color:#dddddd;
}
/* 境界線の色 */
.skinBorderHr,.skinBorderList li{
border-color:#b3b3b3;
}
それを以下のように修正してみました。
/* (3-10) コメント欄、トラバ欄、記事一覧などの一覧
--------------------------------------------*/
/* 背景色 */
.skinBgColor,.skinBaseBgColor,.skinBlock{
background-color:#ffffff;
}
/* 弱い背景色 */
.skinWeakBgColor,.skinBaseWeakBgColor{
background-color: #f1ffeb;
}
/* 強い背景色 */
.skinStrongBgColor,.skinBaseStrongBgColor{
background-color:#f7f7f7;
}
/* 枠線の色 */
.skinBorderColor,.skinBaseBorderColor,.skinBlock{
border-color: #bbf276;
}
/* 境界線の色 */
.skinBorderHr,.skinBorderList li{
border-color: #cccccc;
}
.themeListTitle h1 em {
padding-right: 0.3em;
font-size: 120%;
color: #ff9600;
}手を入れたのは、黄色い文字の部分。最初の画像と比較すれば、どこがどこに対応しているかが分かると思います。
最後の全部黄色になっている部分が追加設定分。
一覧ページを表示させた場合、何のリストか直感的に分かりにくいと前から思っていましたので、h1タグがついていて、かつemタグで強調されているテーマタイトルに当たる部分を目立たせています。
結構簡単にできてしまいますので、サイトの色目なんかを変更した場合は、その色にあわせて調整されてみてはいかがでしょうか？