このブログでは、「部長ナビ」や「寝ログ」の記事などを参考にしながら、Simplicityのカスタマイズにも取り組んでいます。
サイドバー見出しに下線をつけたはずなのに、うまく表示されないという状況が改善できたので、ついでにブログ全体の配色を見直しました。
ところが、「主要カテゴリー最新記事」を表示した結果、ブログ全体の雰囲気が重く感じるようになりました。
そこで、「主要カテゴリー最新記事」の日付表示の背景色を見立たなくすることにしました。
日付表示の配色をカスタマイズ
この部分の表示設定については、「部長ナビ」にある次の記事を参考にして行っています。
「部長ナビ」では、この日付表示の配色を淡い赤系色に設定しています。ブログ全体を眺めても、違和感はありません。しかし、私のブログで同じようにすると、この日付表示部分の色が少々うるさく感じたのです。
そこで、まず配色を変更することにしました。そのために、「主要カテゴリー最新記事」に関するcssを次のように変更しました。
＜変更前＞
[css]
background-color: #FF837B;
border:1px solid #FF837B;
[/css]
＜変更後＞
[css]
background-color: #110F0B;
border:1px solid #110F0B;
[/css]
日付表示の位置をカスタマイズ
また、表示位置を右上から右下に変更しました。そのために、「主要カテゴリー最新記事」に関するcssを次のように変更しました。
＜変更前＞
[css]
top:0px;
[/css]
＜変更後＞
[css]
bottom:0px;
[/css]
二つをまとめて記述すると、style.cssはこのような変更となります。
＜変更前＞
[css]
.up-date1{
position:absolute;
top:0px;
right:0px;
background-color: #FF837B;
border:1px solid #FF837B;
color: #ffffff;
display: inline-block;
font-size: 12px;
line-height: 1.5;
margin: 0;
padding: 2px 5px 0;
}
[/css]
＜変更後＞
[css]
.up-date1{
position:absolute;
bottom:0px;
right:0px;
background-color: #110F0B;
border:1px solid #110F0B;
color: #ffffff;
display: inline-block;
font-size: 12px;
line-height: 1.5;
margin: 0;
padding: 2px 5px 0;
}
[/css]
まとめ
この日付表示部分の色が少々うるさく感じたので、配色と表示位置を変更してみました。
まだまだごちゃごちゃしている印象ですが、少しは改善されたように思います。
