CODEタグとはその名の通り、プログラムのソースコードを示すためのタグです。
このブログの場合、スーツとか就活関連の記事であればあまり使うことはないですが、WordPressやCSS、PHPなどの記事を書こうとすると、使用頻度は高いです。
ただ、STORKテーマのデザインそのままだと、CODEタグで囲ったコードがちょっと見えづらい（視認性があまり良くない）ので、今回は<code>内のテキストをもっと見やすく表示する3つの方法を紹介したいと思います。
目次
STORKテーマでのCODEタグの視認性を上げる方法
まずはSTORKテーマでの標準的なCODEタグの見え方です。
STORKテーマのデフォルトのCODEタグ
wp_enqueue_scriptswpcf7_main_validation_filterこれをもう少し見やすくするために、以下の3通りの方法を試してみることにします。
方法❶ font-weight:boldで太文字表示
まず最初が、font-weight:boldでCODEタグ内のテキストを太文字表示させる方法です。
管理画面左メニューの「外観」>「カスタマイズ」>「追加CSS」へ進み、以下のスタイルをまず追加して、
code {
font-weight : bold
}文字を太くするので、だいぶ見えやすくなったと思います。
font-weight:boldで太文字表示したCODEタグ
wp_enqueue_scriptswpcf7_main_validation_filter方法❷ コントラストを調整
こちらは背景と文字のコントラストを調整する方法です。
方法❶と同様、管理画面の「追加CSS」から、以下のようなスタイルを追加します。
code {
color : #000;
background : #f2f2f2;
font-family : normal;
}
color : #000;
background : #f2f2f2;
font-family : normal;
}
テキストカラーを濃くするなどしたことで、幾分、視認性が上がったんじゃないかと思います。
コントラストを調整したCODEタグ
wp_enqueue_scriptswpcf7_main_validation_filter方法❸ 文字色を変える
標準のグレー色のテキストカラーを、別の色に変更する方法です。
方法❶❷と同様、「追加CSS」で以下のスタイルを指定します。
code {
color : #e31e77;
background : transparent
font-family : normal;
}
color : #e31e77;
background : transparent
font-family : normal;
}
Bootstrap4のように、ピンク系の色にするとわかりやすくて良い感じですね。
CODEタグの文字色を変える
wp_enqueue_scriptswpcf7_main_validation_filter
方法❷❸ではfont-familyも合わせて変えていますが、これによりだいぶ見やすくなると思います。
・・・
他にもブログのデザインに合わせて、いろんな見せ方ができると思いますが、ぜひ参考にしてもらえると嬉しいです★
最後まで読んでいただき、ありがとうございました。
