WordPressでインラインコードの見た目を変える方法

雑談

はじめに

WordPressでブログを書いているとき、文中にバッククォートで文字を囲うとインラインコードになります。

インラインコードを含む段落(設定変更前)

デフォルトではどれが通常の文字で、どれがコードなのか判断するのが難しいので見た目でコードだというのをわかりやすいように設定をいじってみたいと思います。

手順

WordPressの設定方法

WordPressの管理画面を開き、外観→カスタマイズの順にクリックします。

WordPress設定→外観→カスタマイズ

開いたら一番したまでスクロールして、追加CSSをクリックします。

一番下の追加CSS

CSSが表示されるので、これまた一番下までスクロールして設定を追加します。

最終行に追加

実際に追加するコードは下からコピーしてください。ご自分のブログに合わせて内容を変えていただけると。

/* インラインコード */
code {
	background-color: #d3d3d3;
	border-radius: 5px;
	font-size: 14px;
	font-family: 'Noto Sans Japanese', sans-serif;
 	font-weight: bolder;
	padding: 0px 8px;
}

CSS設定補足

background-color
背景色
silver(c0c0c0)だと少し濃いかな?と思い、lightgray(d3d3d3)にしてみました。

border-radius
背景の四隅の丸み度合

font-size
フォントサイズ

font-family
フォントの種類
こだわりすぎると沼が深そうなので参考サイトと同じにしました。

font-weight
太字

padding
コンテンツの詰め具合(余白と考えても良いかも)
引数が2つの場合、1つ目が上下、2つ目が左右の指定です。昔論文を書くときに見た目のために半角スペース入れる等のルールがあり苦労しましたが、設定でカバーできればいちいち気にする必要がなくて楽できます。

設定後

設定が完了すると以下のような見た目になります。

インラインコードを含む段落(設定変更後)

小さくなりますが変更前後を左右で比較してみました。どこがコードに値する部分か一目でわかるようになりました!

変更前
変更後

さいごに

これまでWordPressの設定に関してほとんど変更してこなかったのですが、インラインコード1つとっても見やすさが全然違いますね。これからも細かな所含めて見やすいブログを目指して改良していきたいと思います。

参考

【WordPress】インライン表示のコードの背景をグレーにしたい | たけちゃの日記
https://bambootuna.com/wordpress/75/

WEB色見本 原色大辞典 - HTMLカラーコード
https://www.colordic.org/

border-radius - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

padding - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/padding