WordPressで技術系の記事を書いていると、本文中に width や height、loading="lazy" などの短いコードを入れたい場面があります。

しかし、通常の本文と同じ見た目のままだと、どこがコードなのか分かりにくくなります。

特に、HTMLやCSSの解説記事では、本文の中に出てくる短いコードを見やすくするだけで、記事全体の読みやすさが大きく変わります。

この記事では、WordPressの本文中に表示されるインラインコードをCSSで見やすく整える方法を、初心者にも分かりやすく解説します。

追加CSSに貼り付けるだけで使えるコードも紹介しますので、CocoonなどのWordPressテーマを使っている方も参考にしてください。

インラインコードとは

インラインコードとは、文章の中に入れる短いコードのことです。

たとえば、次のような文章で使います。

width と height を指定しておくと、画像が読み込まれる前に表示領域を確保できます。

この中の width や height がインラインコードです。

長いHTMLやCSSをまとめて表示するコードブロックとは違い、インラインコードは本文の一部として短く表示されます。

主に、次のような言葉を説明するときに使います。

・HTMLタグ
・CSSプロパティ
・属性名
・関数名
・ショートコード
・ファイル名
・設定値

たとえば、画像の遅延読み込みを説明する記事であれば、loading="lazy" のような短いコードを本文中に入れると、読者が内容を理解しやすくなります。

インラインコードが見にくい原因

WordPressの初期状態やテーマのデザインによっては、インラインコードの見た目があまり目立たない場合があります。

本文と同じような文字色で表示されると、読者はどこがコードなのかすぐに判断できません。

特に、次のような記事ではインラインコードが見にくいと読みにくさにつながります。

• WordPressの使い方を解説する記事
• HTMLやCSSのカスタマイズ記事
• Gutenbergブロックの操作説明
• Cocoonの設定解説
• 画像最適化やSEO設定の記事
• JavaScriptやPHPの入門記事

たとえば、本文中に width と height とだけ書かれていると、通常の英単語なのかコードなのか分かりにくくなります。

しかし、width や height のように背景色や枠線を付けて表示すると、読者は一目で「これはコードの説明だ」と理解できます。

インラインコードを見やすくするメリット

インラインコードをCSSで整えるメリットは、単に見た目がよくなるだけではありません。

読者が記事の内容を理解しやすくなり、離脱を防ぎやすくなります。

特に技術解説記事では、少しの見づらさが原因で読者が途中で読むのをやめてしまうことがあります。

インラインコードを見やすくすると、次のような効果があります。

• 本文とコードの違いが分かりやすくなる
• 重要な設定名や属性名が目に入りやすくなる
• 記事全体が整理されて見える
• 初心者でも読み進めやすくなる
• コードブロックとの役割分担が明確になる

たとえば、次のような文章を見比べると分かりやすいです。

width と height を指定しておくと、画像が読み込まれる前に表示領域を確保できます。

width と height を指定しておくと、画像が読み込まれる前に表示領域を確保できます。

後者の方が、どの部分がコードなのか分かりやすくなります。

WordPressでインラインコードを使う場面

WordPressの記事でインラインコードを使う場面は多くあります。

特に、ブログでWeb制作やWordPressカスタマイズの記事を書く場合は、インラインコードを使う機会が増えます。

たとえば、画像の表示最適化について説明する場合は、次のようなコードを本文中で使います。

• width
• height
• loading="lazy"
• aspect-ratio
• object-fit

これらを普通の文字として書くよりも、インラインコードとして表示した方が、記事の内容が伝わりやすくなります。

また、WordPressのショートコードやCSSクラス名を説明するときにも便利です。

• entry-content
• post-content
• wp-block-image
• alignwide
• alignfull

このような用語は、本文中で目立たせることで読みやすくなります。

追加CSSに貼るだけで使えるインラインコード用CSS

以下のCSSを、WordPressの「外観」から「カスタマイズ」に進み、「追加CSS」に貼り付けます。

/* インラインコードを見やすく整える */
.entry-content :not(pre) > code,
.post-content :not(pre) > code,
.article :not(pre) > code {
  display: inline-block;
  padding: 0.15em 0.45em;
  margin: 0 0.1em;
  font-size: 0.92em;
  font-family: Consolas, Monaco, "Courier New", monospace;
  line-height: 1.5;
  color: #c7254e;
  background-color: #f7f3ec;
  border: 1px solid #e5dccf;
  border-radius: 4px;
  vertical-align: baseline;
  word-break: break-word;
}

/* コードブロック内のcodeには影響させない */
.entry-content pre code,
.post-content pre code,
.article pre code {
  display: block;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
}

このCSSを入れると、本文中の短いコードだけに背景色や枠線が付きます。

一方で、長いコードブロックの中にあるコードには影響しないようにしています。

これが重要です。

インラインコード用のCSSを雑に書いてしまうと、コードブロックの中まで装飾されてしまい、長いHTMLやCSSが読みにくくなる場合があります。

そのため、:not(pre) > code を使って、pre の中にあるコードを対象外にしています。

CSSコードの意味を初心者向けに解説

ここからは、先ほどのCSSが何をしているのかを分かりやすく解説します。

まず、対象にしているのは次の部分です。

.entry-content :not(pre) > code,
.post-content :not(pre) > code,
.article :not(pre) > code

これは、記事本文の中にある code 要素を指定しています。

WordPressテーマによって、本文エリアのクラス名が異なることがあります。

そのため、よく使われる本文エリアのクラスを複数指定しています。

entry-content は、多くのWordPressテーマで使われる本文エリアのクラスです。

post-content は、テーマによって使われることがある本文エリアです。

article は、Cocoonなどのテーマで本文周辺に使われることがあります。

複数指定しておくことで、さまざまなテーマで反映されやすくなります。

display:inline-blockで余白を付けやすくする

display: inline-block;

これは、インラインコードを文章の中に置きながら、余白や高さを調整しやすくするための指定です。

通常のインライン要素のままだと、上下の余白が思ったように反映されにくいことがあります。

inline-block にすることで、本文の流れを崩さずに、背景色や枠線をきれいに表示できます。

インラインコードをボタンのように少し囲って見せたい場合に有効です。

paddingでコードの内側に余白を作る

padding: 0.15em 0.45em;

padding は、文字と枠線の間の余白です。

この指定では、上下に少し、左右にやや広めの余白を入れています。

たとえば、width という文字のまわりに余白があることで、本文の中でも見やすくなります。

余白が少なすぎると窮屈に見えます。

反対に、余白が大きすぎると本文の流れを邪魔してしまいます。

そのため、インラインコードでは小さめの余白にするのがおすすめです。

font-sizeで本文より少し小さくする

font-size: 0.92em;

インラインコードは、本文より少し小さく表示すると自然に見えます。

本文と同じサイズでも問題ありませんが、コード用のフォントは横幅が広く見えることがあります。

そのため、少しだけ小さくすることで、本文の中に馴染みやすくなります。

ただし、小さくしすぎると読みにくくなるため、0.9em から 0.95em 程度がおすすめです。

font-familyでコードらしい見た目にする

font-family: Consolas, Monaco, "Courier New", monospace;

これは、コード用の等幅フォントを指定しています。

等幅フォントとは、文字の幅がそろっているフォントです。

プログラムやHTML、CSSのコードは等幅フォントで表示した方が読みやすくなります。

Consolas や Monaco は、コード表示でよく使われるフォントです。

最後に monospace を入れておくことで、指定したフォントが使えない環境でも等幅フォントで表示されやすくなります。

background-colorで背景色を付ける

background-color: #f7f3ec;

背景色を付けることで、本文とコードの違いが分かりやすくなります。

今回のCSSでは、やや薄いベージュ系の背景色にしています。

背景色は濃すぎると本文中で目立ちすぎます。

インラインコードは補助的に目立たせるものなので、淡い色にするのがおすすめです。

技術系の記事では、薄いグレーや薄いベージュが使いやすいです。

borderでコードの範囲を分かりやすくする

border: 1px solid #e5dccf;

枠線を付けることで、インラインコードの範囲が分かりやすくなります。

背景色だけでもコードらしく見せることはできますが、枠線があるとより整理された印象になります。

ただし、枠線の色が濃すぎると目立ちすぎます。

本文中のインラインコードでは、背景色より少し濃い程度の色にするのが自然です。

border-radiusで角を少し丸くする

border-radius: 4px;

border-radius は角丸の指定です。

角を少し丸くすると、インラインコードが柔らかい印象になります。

WordPressの記事内で使う場合、4px程度であれば自然に見えます。

もっと丸くしたい場合は、6pxや8pxにしてもよいですが、コード表示としては4px前後が扱いやすいです。

word-breakで長いコードのはみ出しを防ぐ

word-break: break-word;

インラインコードには、長い文字列が入ることがあります。

たとえば、URLや長いクラス名、属性の組み合わせなどです。

そのまま表示すると、スマホ画面では横にはみ出してしまうことがあります。

word-break: break-word; を入れておくと、必要に応じて折り返されるため、スマホでも表示崩れを防ぎやすくなります。

コードブロックに影響させない指定が重要

次のCSSは、コードブロックへの影響を防ぐための指定です。

.entry-content pre code,
.post-content pre code,
.article pre code {
  display: block;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
}

WordPressの記事では、短いインラインコードだけでなく、長いコードブロックも使います。

たとえば、HTMLやCSSをまとめて紹介するときは、コードブロックを使います。

このコードブロックの中までインラインコード用の装飾が反映されると、見た目が崩れる場合があります。

そのため、pre code に対して装飾をリセットしています。

インラインコードとコードブロックをきちんと分けることで、記事全体の読みやすさが安定します。

落ち着いたデザインにしたい場合のCSS

赤系の文字色が少し強く感じる場合は、落ち着いたグレー系のデザインにするのもおすすめです。

/* インラインコード：落ち着いたデザイン */
.entry-content :not(pre) > code,
.post-content :not(pre) > code,
.article :not(pre) > code {
  display: inline-block;
  padding: 0.12em 0.4em;
  margin: 0 0.08em;
  font-size: 0.92em;
  font-family: Consolas, Monaco, "Courier New", monospace;
  line-height: 1.5;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  vertical-align: baseline;
  word-break: break-word;
}

/* コードブロックは除外 */
.entry-content pre code,
.post-content pre code,
.article pre code {
  display: block;
  padding: 0;
  margin: 0;
  color: inherit;
  background: transparent;
  border: none;
}

このデザインは、シンプルなブログやビジネス系サイトにも合わせやすいです。

本文の邪魔をせず、必要なところだけ自然に目立たせることができます。

Cocoonでインラインコードを整える場合

Cocoonを使っている場合も、基本的には追加CSSに貼り付けるだけで使えます。

手順は次の通りです。

1. WordPress管理画面を開く
2. 「外観」をクリック
3. 「カスタマイズ」をクリック
4. 「追加CSS」を開く
5. CSSを貼り付ける
6. 「公開」をクリック

これで、記事本文中のインラインコードにデザインが反映されます。

もし反映されない場合は、キャッシュが原因の可能性があります。

Cocoonのキャッシュ削除、ブラウザの再読み込み、サーバーキャッシュの削除などを試してください。

インラインコードとコードブロックの使い分け

インラインコードとコードブロックは、使い分けが大切です。

短いコードはインラインコード、長いコードはコードブロックにします。

たとえば、本文中で width や height のような単語を説明する場合は、インラインコードが向いています。

一方で、HTML全体やCSS全体を紹介する場合は、コードブロックを使います。

悪い例として、長いHTMLを無理に本文中へインラインコードとして入れると、非常に読みにくくなります。

インラインコードに向いているものは、次のような短いコードです。

• width
• height
• loading="lazy"
• aspect-ratio
• object-fit
• display: block;
• wp-block-image

長いコードや複数行になるコードは、コードブロックで表示しましょう。

実際の記事ではこのように使う

たとえば、画像の読み込み最適化について説明する記事では、次のように使えます。

画像には width と height を指定しておくのがおすすめです。

これにより、画像が読み込まれる前に表示領域を確保できるため、ページ表示中のレイアウトシフトを防ぎやすくなります。

また、画像が多い記事では loading="lazy" を使うことで、画面外の画像を遅延読み込みできます。

CSSでは、aspect-ratio を使って画像の比率を保つ方法もあります。

このように、本文中に出てくる短いコードをインラインコードにすると、読者が重要な設定名を見つけやすくなります。

インラインコードを使いすぎないことも大切

インラインコードは便利ですが、使いすぎると逆に読みにくくなります。

文章の中にインラインコードが多すぎると、本文が細切れに見えてしまいます。

そのため、すべての英単語をインラインコードにする必要はありません。

コードとして読者に認識してほしい部分だけに使いましょう。

特に、次のような部分に絞ると効果的です。

• 読者が実際に入力する部分
• 設定画面で探す項目名
• HTMLやCSSの属性名
• 関数名やクラス名
• 間違えると動作に影響する値

記事全体の読みやすさを考えながら、必要なところだけインラインコードにするのがおすすめです。

インラインコードが反映されないときの確認ポイント

CSSを追加しても反映されない場合は、いくつか確認するポイントがあります。

まず、貼り付けたCSSに入力ミスがないか確認してください。

特に、セミコロンや波括弧が抜けていると、CSSが正しく反映されないことがあります。

次に、テーマ側のCSSが強く効いている可能性があります。

その場合は、指定する範囲を少し具体的にすると反映されやすくなります。

また、キャッシュが残っている場合もあります。

WordPress、テーマ、プラグイン、ブラウザ、サーバーのいずれかにキャッシュが残っていると、CSSを変更してもすぐに反映されないことがあります。

反映されない場合は、次の順番で確認するとよいです。

1. 追加CSSを保存できているか確認する
2. ブラウザを再読み込みする
3. Cocoonなどのテーマキャッシュを削除する
4. キャッシュ系プラグインを削除または更新する
5. 別のブラウザやシークレットウィンドウで確認する

これでも反映されない場合は、テーマの本文エリアのクラス名が違う可能性があります。

その場合は、ブラウザの検証ツールで本文エリアのクラス名を確認し、CSSのセレクタを調整します。

SEO記事では読みやすさが重要

インラインコードの見た目は、SEOにも間接的に関係します。

検索順位は、単にキーワードを入れれば上がるものではありません。

読者が記事を読みやすいと感じ、最後まで読んでくれることが重要です。

特に、WordPress カスタマイズ、Cocoon CSS、インラインコード CSS、コード表示 デザイン、追加CSS カスタマイズといったキーワードで記事を書く場合、読者は具体的な解決策を求めています。

そのため、本文中のコードが見やすいことは、読者満足度に直結します。

読みやすい記事は、滞在時間や読了率の改善にもつながります。

結果として、検索エンジンからも評価されやすい記事に近づきます。

まとめ

WordPressの記事内で width や height、loading="lazy"、aspect-ratio などの短いコードを説明するときは、インラインコードを見やすく整えることが大切です。

本文と同じ見た目のままだと、読者はどこがコードなのか判断しにくくなります。

追加CSSで背景色、文字色、余白、枠線、角丸を整えることで、インラインコードが自然に目立つようになります。

おすすめは、短いコードはインラインコードで表示し、長いHTMLやCSSはコードブロックで表示する使い分けです。

まずは、次のCSSを追加CSSに貼り付けて試してみてください。

.entry-content :not(pre) > code,
.post-content :not(pre) > code,
.article :not(pre) > code {
  display: inline-block;
  padding: 0.15em 0.45em;
  margin: 0 0.1em;
  font-size: 0.92em;
  font-family: Consolas, Monaco, "Courier New", monospace;
  line-height: 1.5;
  color: #c7254e;
  background-color: #f7f3ec;
  border: 1px solid #e5dccf;
  border-radius: 4px;
  vertical-align: baseline;
  word-break: break-word;
}

.entry-content pre code,
.post-content pre code,
.article pre code {
  display: block;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
}

インラインコードを整えるだけでも、WordPress記事の読みやすさは大きく変わります。

特に、HTML、CSS、WordPress設定、Cocoonカスタマイズの記事を書く場合は、本文中の短いコードを見やすくしておくことで、初心者にも伝わりやすい記事になります。