ブログの配色を部分的に変更してみました【Simplicity2】

2016年5月8日

年度末事務の締め切り続きで落ち着かない毎日なのに、急に春らしくなってしまい、なんとなく少々ブルーな気持ちです。

By: Chris Harrison

こんな気分で、自分のブログを眺めていると、黒系に赤という配色がとても重く感じるようになりました。

そこで、赤系にしている箇所の配色を青系に変更することにしました。

ホバー色の変更

これはSimplicityのカスタマイズ機能を利用することで簡単に変更することができます。次の箇所です。

  • カスタマイズ>色>リンクホバー色
  • カスタマイズ>色>グローバルナビリンクホバー色

トップページ「記事を読む」配色の変更

トップページの記事一覧表示にある「記事を読む」の配色も変更しました。これは、子テーマのstyle.cssにある次の箇所にある色指定に関する記述を好みの色に変えることで可能です。

.entry-read a{
color:#006082;
font-size:14px;
background-color:#ffffff;
border:1px solid #006082;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}

.entry-read a:hover{
color:#FFF !important;
background-color:#00A0DA;
border:1px solid #006082;
}

ランキング順位背景色の変更

サイドバーにあるアクセスランキング順位の配色も、style.cssの記述を変更して行いました。ここでも、色指定に関する記述を好みの色に変えるだけです。

.wpp-list {
counter-reset: number;
list-style: none;
}

.wpp-list li:before {
color: #FFFFFF;
content: counter(number);
counter-increment: number;/
text-align: center;
opacity: .999;
float: left;
line-height: 30px;
width: 30px;
height: 30px;
background-color: #00A0DA;
border-radius: 2px;
-moz-border-radius: 2px;
margin-right: -30px;
}

まとめ

気分でブログの配色を一部変更してみました。そのうち、元気がでてきたら、またリンクホバー色を赤系にもどすかもしれません。タイトルなどのダーク系色にも重苦しい感じがするので、もしかすると、元に戻す前に、こちらを変更するかもしれません。
本来ならば、記事を書くことに目がいけばいいのでしょうが、ブログのデザインが気になってしまう今日このごろです・・・早く、脱出しようと思います。