【Simplicity】ブログカードをカスタマイズするCSSセレクタ

WordPressのブログカードをちょっとカスタマイズしてみました。

Simplicityのカスタマイズ内ではほとんど変更が出来ませんからね。

今回は、実際にカスタマイズした例をもとにCSSセレクタを紹介していきます。

Simplicityのカスタマイズ画面内で出来ること

まずはsimplicityのカスタマイズ内で出来ることを確認。

ご覧の通り、デザイン的な変更はちょっとしか出来ません。やるとすればサムネイルの位置くらいですね。

とりあえず自分の好きなように調整してみましょう。

SimplicityのブログカードをカスタマイズするCSSセレクタ

それでは、ブログカードをカスタマイズするCSSセレクタを見ていきましょう。

実際のカスタマイズを例に紹介していきます。

1、ブログカードを横幅いっぱいにカスタマイズ

.entry-content .hover-card,.blog-card{
    width: 100%;
}

カード全体をリンク化している場合は「.blog-card」というブログカードの大枠を、aタグの「.hover-card」で囲んでいる構造。

「.hover-card」と「.blog-card」の2カ所に「width: 100%;」を適用することで、横幅いっぱいのデザインにすることが出来ます。

2、背景色をふわっと変更させる

.internal-blog-card, .external-blog-card {
    padding: 12px;
    padding-bottom: 12px;
    padding-bottom: 6px;
    border: 1px solid #ddd;
    word-wrap: break-word;
    border-radius: 2px;
    background-color: #f6fcff;
}
.entry-content .hover-card .blog-card:hover{
    background-color:#d2ebf6;
　　-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}

先ほどブログカードの大枠のセレクタを見ましたがさらに細かくすると、内部リンクは「.internal-blog-card」、外部リンクは「.external-blog-card」に分かれます。

これを使ってもOK。

背景の色を変えつつ、疑似クラス「:hover」を使ってふわっと背景色を変更するCSSを組み込んでみました。

最後に

最終的にこんな感じにまとまりました。試しにコピペで使ってみてはどうでしょう。

/*ブログカード
===================================*/
.entry-content .hover-card {
    width: 100%;
}
.entry-content .hover-card .blog-card:hover{
    background-color:#d2ebf6;
　　-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
.blog-card{
    width: 100%;
}
.hover-card .blog-card-title{
   color:#4d4d4d;
}
.internal-blog-card, .external-blog-card {
    padding: 12px;
    padding-bottom: 12px;
    padding-bottom: 6px;
    border: 1px solid #ddd;
    word-wrap: break-word;
    border-radius: 2px;
    background-color: #f6fcff;
}