WordPressで技術系の記事を書いていると、HTMLやCSS、JavaScriptなどのコードを貼り付けたい場面がありますよね。
でも、単にコードをそのまま貼っても、見た目が整わず読みにくくなりがちです。

この記事ではプラグインを使わずに、WordPressで見栄えのよいコードブロックを表示する方法を紹介します。

コードを表示する基本のタグ

まずはHTMLの基本的な構文を押さえましょう。

<pre><code>
ここにコードを記述
</code></pre>

<pre>は改行や空白をそのまま表示し、<code>はコンピュータコードであることを示します。

WordPressで使うときの注意点

投稿エディターに直接<や>を打つと、HTMLとして解釈されてしまいます。以下のようにエスケープ（置き換え）する必要があります。

• < → <
• > → >
• & → &

コードをきれいに表示するCSS

テーマによってはコードがそのまま無装飾で表示されます。見やすく整えるために、CSSを追加しましょう。

pre code {
  display: block;
  padding: 1em;
  background-color: #f4f4f4;
  border-left: 4px solid #3498db;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

このCSSを外観 → カスタマイズ → 追加CSSに貼り付ければ、全体の見た目が整います。

テーマに合わせたクラスを追加する

サイトのデザインに合わせて、枠や色を変更したい場合は独自クラスを付けて調整可能です。

<pre class="my-code"><code>
コード内容
</code></pre>

その上で、CSSに以下を追加します：

.my-code {
  background-color: #2d2d2d;
  color: #eee;
  border-radius: 6px;
}

プラグイン不要のメリット

• サイトが軽くなる：余計なJavaScriptやCSSが読み込まれない
• 表示崩れが少ない：テーマに合わせて柔軟に調整可能
• セキュリティ面でも安心：外部製の古いプラグインによる脆弱性リスクがない

おわりに

プラグインを使わなくても、<pre><code>タグとCSSを使えば、きれいなコードブロックを表示することができます。
エスケープ処理を忘れずに行い、テーマに合ったスタイルを適用するだけで、初心者でもすぐに実践できます。

技術ブログやメモ記事を書く方は、ぜひこの方法を取り入れて、読みやすく見やすい記事にしていきましょう！