ブログノウハウ

【WordPress】コピペOK!キャプション文字と記事内太字のCSSカスタマイズ

投稿日:2018年8月19日 更新日:

こんばんは、ごぼう氏です。

当ブログはWordPressというオープンソースのソフトウェアで書かれています。

WordPressはカスタマイズの自由度が高い半面、初心者にはとっつきにくいといところもあるので、私自身の備忘録も兼ねてカスタマイズの内容を記事にしておきます。

以下の内容はブロガー向けの記事なので、興味の無い方はスルーしてください!

画像のキャプション文字のフォントを変更する

カスタマイズするのは下図のような、画像のキャプション文字です。

デフォルトでは文字色がグレーで白背景ではコントラストが弱くて見づらいので、これを適当な色に変更します。

 

カスタマイズの手順は WordPressのダッシュボード > 外観 > カスタマイズ > 追加CSS に下記のコードをコピペするだけ。

これにより画像のキャプション文字は下記のようになります。

 

文字サイズはデフォルト12pxですが、ここでは14pxとしました。

またここでは文字色は茶色としましたが、 colorの後のカラーコードを書き換えると任意の色に変更することができます。

 



記事内の太字に蛍光ペン風の装飾を加える

カスタマイズするのは下図のような、記事内の太文字です。

 

サンプル記事:太字のみ

 

強調したい部分は太字になっているのでこのままでも良いといえば良いのですが、黒々とした文字の羅列はやはり見ていると疲れるので、強調したい部分には蛍光ペン風の装飾を加えて見やすくしたいと思います。

 

カスタマイズの手順は WordPressのダッシュボード > 外観 > カスタマイズ > 追加CSS に下記のコードをコピペするだけ。

これによりさきほどのサンプル記事は下記のようになります。

 

サンプル記事:太字+蛍光ペン

 

どうですか?少し華やかになったのではないでしょうか?

これで忙しい読者の方もサクサクと要点だけ飛ばし読みできるようになり、ブログのUXが向上します。



-ブログノウハウ
-

Copyright© EV Journal , 2018 All Rights Reserved.