WordPressでコードブロックをmonospaceフォントに：Highlighting Code Blockプラグインで実現するシンプルな解決策

by

コードブロックの表示に関する課題

WordPressでプログラミング関連の記事を書くとき、コードブロックの見た目が気になることがあります。特に、コードが通常の文章と同じフォントで表示されると、プログラムコードとしての可読性が大幅に低下してしまいます。

コードを読みやすくするには、等幅フォント（monospaceフォント）1が必要です。等幅フォントとは、すべての文字が同じ幅で表示されるフォントのことで、文字の配置が揃うため、プログラムコードの構造を把握しやすくなります。まるで方眼紙にきれいに文字を書いたような感覚で、コードの階層や対応関係が一目で分かるようになります。

プラグイン選択の検討

WordPressでコードブロックにシンタックスハイライト（色分け表示）を適用するプラグインは数多く存在します。その中でも、シンプルで軽量なソリューションとして「Highlighting Code Block」2が注目されます。

このプラグインの特徴は、必要最小限の機能に絞られている点です。多機能なプラグインはさまざまな用途に対応できる反面、サイトの読み込み速度に影響を与える可能性があります。一方、Highlighting Code Blockは軽量性を重視した設計になっており、基本的なシンタックスハイライト機能を効率的に提供します。

プラグインの主な機能として、Gutenbergブロックエディタ3との統合、40以上のプログラミング言語への対応、複数のカラーテーマからの選択、行番号表示機能などがあります。これらの機能は、日常的なブログ執筆において十分な機能セットを提供します。

プラグインのインストールと基本設定

Highlighting Code Blockのインストールは標準的な手順で行えます。WordPress管理画面の「プラグイン」メニューから「新規追加」を選択し、「Highlighting Code Block」で検索します。検索結果に表示されたプラグインをインストールし、有効化します。

有効化後、WordPress管理画面の「設定」メニューに「Highlighting Code Block」という項目が追加されます。設定画面では、主にカラーテーマの選択が可能です。テーマは記事の雰囲気やサイト全体のデザインに合わせて選択できます。

プラグインを有効化すると、Gutenbergエディタでコードブロックを挿入した際に、自動的にシンタックスハイライトが適用されます。特別な操作は必要なく、通常通りコードブロックを使用するだけで色分け表示が実現されます。

monospaceフォントの適用方法

プラグインによってシンタックスハイライトは適用されますが、フォントの種類については別途設定が必要な場合があります。コードブロックを等幅フォントで表示するには、CSSでフォントファミリーを指定する必要があります。

最もシンプルで確実な方法は、使用中のテーマのstyle.cssファイルに直接CSSを追加することです。この方法では、以下のCSSコードを追加します。

.wp-block-code code,
pre code,
code {
    font-family: monospace !important;
}
Code language: CSS (css)

このCSSコードは、WordPressのコードブロック要素に対して等幅フォントを強制的に適用します。!important宣言により、テーマやプラグインの既存スタイルを上書きして、確実に等幅フォントが適用されます。

CSSセレクタの詳細を見ると、.wp-block-code codeはGutenbergのコードブロック内のcode要素、pre codeは一般的なpreformatted要素内のcode要素、codeは単体のインラインcode要素をそれぞれ対象としています。これにより、あらゆる形式のコード表示に対して等幅フォントが適用されます。

より詳細なフォント設定

基本的な等幅フォント指定に加えて、特定のフォントを優先して使用したい場合は、フォントファミリーの指定をより詳細に行えます。現代的なシステムでは、それぞれのOSに最適化された等幅フォントが用意されています。

macOSでは「SF Mono」や「Monaco」、WindowsでS「Cascadia Code」や「Consolas」、Linuxでは「Liberation Mono」などが代表的な等幅フォントです。これらのフォントを優先順位をつけて指定すると、各環境で最適な表示が実現されます。

フォント指定の例として、以下のようなCSSが考えられます。

.wp-block-code code,
pre code,
code {
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", "Courier New", monospace !important;
}
Code language: CSS (css)

この指定では、利用可能なフォントを順番に確認し、最初に見つかったフォントを使用します。最後のmonospaceは、どのフォントも利用できない場合のフォールバックとして機能します。

実装結果と効果の確認

Highlighting Code Blockプラグインの導入とmonospaceフォントの適用により、コードブロックの可読性が大幅に向上します。シンタックスハイライトによる色分け表示と等幅フォントの組み合わせにより、プログラムコードの構造が明確に表現されます。

特に、インデント（字下げ）が重要な意味を持つPythonやYAMLなどの言語では、等幅フォントによる正確な字揃えが不可欠です。また、JavaScriptやPHPなどの言語でも、括弧の対応関係や変数名の区別がしやすくなります。

プラグインの軽量性により、サイトの読み込み速度への影響も最小限に抑えられます。Highlighting Code BlockはCDNからhighlight.jsライブラリ4を読み込むため、サーバーへの負荷も軽減されます。

Highlighting Code Blockプラグインと等幅フォントの組み合わせにより、WordPressでのコードブロック表示が実用的なレベルまで改善されます。シンプルな設定でありながら、プロフェッショナルな外観のコード表示が実現できる効果的なソリューションです。

  1. 等幅フォントは、アルファベット、数字、記号のすべての文字が同じ幅で表示されるフォントです。通常のフォント（プロポーショナルフォント）では「i」と「m」で幅が異なりますが、等幅フォントでは同じ幅になります。これによりコードの縦の配置が揃い、可読性が向上します。 – 等幅フォント – Wikipedia
  2. Highlighting Code Blockは日本人開発者（@yahman-ina）によって開発されたWordPressプラグインで、highlight.jsライブラリを使用してコードブロックにシンタックスハイライトを適用します。軽量性と使いやすさに重点を置いた設計が特徴です。 – Highlighting Code Block – WordPress.org
  3. Gutenbergは、WordPress 5.0から導入されたブロックベースのエディタです。従来のクラシックエディタとは異なり、段落、見出し、画像、コードブロックなどを個別のブロックとして管理し、直感的なコンテンツ作成を可能にします。 – Gutenberg – WordPress.org
  4. CDN（Content Delivery Network）は、コンテンツを効率的に配信するためのネットワークです。highlight.jsなどのライブラリをCDNから読み込むことで、サーバーの負荷を軽減し、世界中のユーザーに高速でコンテンツを提供できます。 – What is a CDN? – Cloudflare