Violet@Tokyo

【WordPressテーマ・ColorMag】blockquoteの問題

約3分



前回、ColorMagの個別記事で一番気になった箇所としてアイキャッチ画像の問題を記述しました。

それ以外にもちょっと気になる箇所が出てきたのでここでまた記述しておきます。それは引用、つまりblockquoteの問題です。

ColorMagのデフォルトはブルーになっています。その色がウィジェットタイトルの背景色やリンクテキストの色になっています。それらの色は「ダッシュボード」→「外観」→「カスタマイズ」→「Design Options」→「Primary color option」で以下のように変更できます。

image2

私はグリーンに設定しました。するとこの色がblockquoteの背景色になってしまいます。このグリーンは、ポイントとして使うには良いけれど、比較的大きな面積を占めるblockquoteのベースカラーには不向き、しかもリンク色も同じ色になってしまうということは、引用部分にリンクを貼るとその文字が見えなくなります。そこで「ダッシュボード」→「外観」→「カスタマイズ」→「Design Options」→「Custom CSS」に以下のコードを記述をして背景色と文字色を変更しました。

BLOCKQUOTE {color: #ccc; background-color: #F5F5F5; }

背景色を変更すれば、blockquote内にリンクがあっても文字が見えなくなることはありません。

image3

背景色を薄いグレーにしたことでデフォルトの状態よりも目に優しく文字が読みやすいと思います。

image

ついでにblockquoteの枠を角丸にしてシャドーをつけてみました。参考にしたサイトは以下です。

コピー・ペーストでかんたんに実装できます。ぐっと洗練されたデザインに仕上がったのではと、かなり満足しております。

現在はハミングバードにテーマを変更しています。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でvioletをフォローしよう!

Pick Up


About The Author

violet
はじめまして。このブログを執筆しているViolet(ヴィオレ)です。
このブログは私が日々感じたこと、考えたことに独自の視点を交えて書き留めている忘備録です。読者の方に少しでも楽しんでいただけたら幸いです。
Follow :