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

  • 2019年2月9日
  • 2019年4月11日
  • THE THOR

THE THOR 記事一覧

ブログの背景色は白っぽい色に設定している人が多いと思います。

当サイトも白系です。

まっ白だと、のっぺりしてしまうので若干のテクスチャを入れています。

背景をよーく観てください。少しまだらな模様のようなモノが見えますよね?

テクスチャがちょっとした高級感というか重厚感というか落ち着きというか・・・

物足りなさを解消してくれます。

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

ブログカード(サイトカード)を使用すると前述の背景テクスチャが、まるで透けているかのように表示されてしまいます。

見づらさと安っぽさが出てしまうので、ブログカード(サイトカード)に背景色を設定して視認性をアップしましょう。

※背景色より少し明るい色、少し暗い色などにしても面白いかもしれません。

 

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

サイトカードサンプル

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

外観 → CSS編集

追加CSSに以下を記述します。

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

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

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

 

↓出来上がり

出来上がりサンプル

キャンペーン価格3ヶ月99円だったので、 2018年11月にAmazon Music Unlimited に加入しました。 もう少しで3ヶ月経つのでプランを変更しようと思ったら、意外とわかりづらかったので忘れないよう記事にします[…]

AmazonMusicUnlimited解約プラン変更

 

あとがき

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

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

当サイトではキャッチ画像に色を多く使うので、それ以外の部分は控えめにしています。(気分でガラリと変えるかも)

簡単で見た目の効果は抜群なのでオススメです。

THE THOR 記事一覧