SimplicityはWordPressの無料テーマの１つです。
サイトの外観もデフォルトの状態で十分に綺麗ですし、自分なりにカスタマイズもできるのも素晴らしいですよね。
ブログカードのソースコードを編集することによって、自分のサイトに合ったブログカードに仕上げることができます。
Simplicityのブログカードとは？
バージョン1.6.0で追加された機能のブログカード。
バージョン1.7.8では外部リンクにも対応するなど素晴らしい性能となりました。
Simplicityのブログカードで表示すると以下のようになります。
デフォルトの状態でも綺麗ですね（笑）
本当に素晴らしい機能を実装してくださいました。
このようなキレイなスタイルを変更するのは忍びないですが、ブログカードのソースコードを編集して、自分のWebサイトに合ったスタイルにしてみようと思います。
ブログカード内のタイトルのリンク色を変更する
タイトルのリンク色を変更してみましょう。
デフォルト状態で＃000000(黒色)なので、これを#CC0033（淡い赤色）に変更してリンクタイトルに強調感を出してみようと思います。
以下のソースコードを「外観」→「テーマの編集」→「style.css」に貼り付けてください。
.blog-card-title a {
color: #cc0033; /* リンク色の指定 */
}
いかがでしょうか？
以下のように文字が淡い赤色で表示されると成功です。
リンク色のカスタマイズは簡単でしたね。
次はタイトルのリンクに動作を付けてみましょう。
hoverメソッドを使用して「マウスカーソルが乗った場合のアクション」を追加していきます。
リンクにマウスカーソルが乗ったときにフェードさせる
マウスカーソルを載せたときにタイトルリンクにアクションを付けてみましょう。
ゆっくりとリンク色を変化するようにしてみます。
hoverメソッドでフェードしたい要素を選択してから、transitionメソッドでフェード時間を指定します。
フェード前のリンク色には#3d3f44（灰色）を指定し、フェード後は#CC0033（淡い赤色）を指定しています。
.blog-card-title a {
color: #3d3f44; /* リンク色の指定（フェード前） */
}
.blog-card-title a:hover {
transition: 0.5s; /* フェードさせる秒数を指定する */
color: #cc0033; /* リンク色の指定（フェード後） */
}
transitionの値を変更することで簡単にフェードする秒数を指定することができます。
「s」は秒数を表しているので上記のソースコードだと、フェード時間を0.5秒（0.5s）に指定していることになります。
以下のようにタイトルリンク色がhoverすれば成功です。
ブログカードの背景色を変更する
背景色を変更してブログカード自体に強調感を出してましょう。
backgroundメソッドを用いて背景色を＃DCDCDC（灰色）に設定します。
サイトの背景色が白色に近い場合は、ブログカードの背景色を灰色に指定することで、訪問者から見て違和感のない自然なブログカードを演出することができます。
.blog-card{
background:#DCDCDC;
}
以下のようにブログカード全体の背景色が灰色に変更されていたら成功です。
イメージが凄く変わりましたね。
まとめ
いかがでしたか？
Simplicityはデフォルトの状態でも素晴らしく綺麗に表示してくれます。
しかし、少しソースコードを変化させるだけで「自分のサイトに合ったスタイル」にすることができます。
カスタマイズも簡単にできるのがSimplicityの特徴だと言えるでしょう。
皆さんも、カスタマイズの参考にしてくださいね。
