カテゴリー最新記事の日付表示をカスタマイズ

このブログでは、「部長ナビ」や「寝ログ」の記事などを参考にしながら、Simplicityのカスタマイズにも取り組んでいます。

サイドバー見出しに下線をつけたはずなのに、うまく表示されないという状況が改善できたので、ついでにブログ全体の配色を見直しました。

ところが、「主要カテゴリー最新記事」を表示した結果、ブログ全体の雰囲気が重く感じるようになりました。

そこで、「主要カテゴリー最新記事」の日付表示の背景色を見立たなくすることにしました。

スポンサーリンク

日付表示の配色をカスタマイズ

この部分の表示設定については、「部長ナビ」にある次の記事を参考にして行っています。

こんにちは。部長ナビ(@nabi_1080)です 今日も、ちゃぼPプロデュースのSimplicityカスタマイズコードを紹介します! どうしてもやりたかった、gori.me風「主要カテゴリ最新記事一覧」 gori.meでは、主要カテゴリの最新記事が一番上に表示されています。コレをやりたかったのですが、やり方がわからず悶...

「部長ナビ」では、この日付表示の配色を淡い赤系色に設定しています。ブログ全体を眺めても、違和感はありません。しかし、私のブログで同じようにすると、この日付表示部分の色が少々うるさく感じたのです。

そこで、まず配色を変更することにしました。そのために、「主要カテゴリー最新記事」に関する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]

スポンサーリンク

まとめ

この日付表示部分の色が少々うるさく感じたので、配色と表示位置を変更してみました。
まだまだごちゃごちゃしている印象ですが、少しは改善されたように思います。