THE THOR ザ・トール ブログカード / サイトカード 背景色を変更する

THR THOR の便利な機能のひとつ

ショートコードで挿入ができる内部リンク用のサイトカードと外部リンク用のブログカードがあります。


とても便利な機能ですがサイトカード(ブログカード)は背景がうっすら透明になっています。

 

背景が白の場合は特に問題ありません。

背景に画像やちょっとした色を入れている場合、ブログカード(サイトカード)の背景が少し透明になっているのでうっすらと下の背景が透けてしまい見にくくなる場合があります。※格好良く見える場合もあります。

THE THOR ブログカード サイトカード の背景色を変更する

ブログカード(サイトカード)を使用すると全体の背景と合わず見えづらくなる。

そんな時にはブログカードの背景色を変更して見た目と視認性をアップしましょう。


↓背景色を設定していない状態

サイトカードサンプル

まだら模様がうっすら見えてスッキリしない印象です。

今回は、ブログカードの背景をスッキリ白に変更します。

ブログカード サイトカード の背景色を変更するCSS

ちょっとしたコードを追加します。追加する場所は追加cssでokです。
外観 → カスタマイズ → 追加css

cssは以下の通りです。

※カスタマイズは自己責任でお願いします

/*内部リンクの背景色*/
.content .sitecard {
        background-color: #ffffff;
}
/*外部リンクの背景色*/
.content .blogcard {
        background-color: #ffffff;
}

背景色は#ffffffの部分を変更すれば好きな色にできます。

これでブログカードまたはサイトカードの背景色が好きな色に変更できます。是非お試しください。

あとがき

僅かなことですが印象は大きく変わるし、色の設定によってはブログカード(サイトカード)をもの凄く目立たせたりすることも出来ると思います。

当サイトではキャッチ画像に色を多く使うので、それ以外の部分は控えめにしています。(気分でガラリと変えるかも)簡単で見た目の効果は抜群なのでオススメです。

THE THOR 記事一覧

ブログカードのカスタマイズ背景色
呟くのよ・・・私の棒ストが