「プログラミング学習の記録や技術ブログを書きたいけれど、コードをそのまま貼ると読みづらい…」「おしゃれな技術ブログでよく見る、あの黒い枠はどうやって作るの？」
今回は、初心者でも今すぐ導入できる「ソースコードを綺麗に見せる方法」を解説します。可読性が上がれば、読者の滞在時間もアップしますよ！
1.おすすめプラグイン「Highlighting Code Block」とは？
WordPressでソースコードを表示するなら、このプラグインが最も有力な選択肢です。
- 開発者: SWELL開発者の了さん（@ddryo_loos）
- 特徴: 非常に軽量で動作が速く、設定がシンプル。
- デザイン: ダーク（黒系）とライト（白系）の2つのテーマが標準搭載。
- 機能: 言語表示、行番号表示、ワンクリックコピーボタンなど、必要な機能がすべて揃っています。
プラグイン：Highlighting Code Blockの導入から設定まで
① プラグイン：Highlighting Code Blockインストール
WordPress管理画面の「プラグイン」＞「新規追加」から「Highlighting Code Block」を検索してインストールしましょう
「今すぐインストール」をクリックしたら、「有効化」します。
② 基本的な設定をカスタマイズする
Highlighting Code Blockは、基本的にインストールした直後のデフォルト状態のままでも十分綺麗に使用できます。
「とりあえず使いたい」という方はそのままでもOKですが、自分のブログのデザインに合わせて調整したい方のために、設定項目を整理しました。
詳細設定一覧（カスタマイズしたい方へ）
| 設定項目 | 内容 | デフォルト設定 |
| 言語の表示 | コードの右上に「HTML」等を表示するか | 表示 |
| 行数の表示 | コードの左端に行番号を表示するか | 表示 |
| コピーボタン | クリックでコードをコピーできるボタン | 表示 |
| フォントスムージング | 文字を滑らかに表示する機能 | オフ |
| コードカラーリング | フロント側・エディター側の配色 | Light |
| フォントサイズ | PC・スマホそれぞれの文字サイズ | 14px / 13px |
| フォントファミリー | 使用するフォント（書体）の種類 | 設定済み |
細かくこだわりたい方はここをチェックしましょう。
私が行った唯一のカスタマイズ：配色を「Dark」に！
私はそれ以外はデフォルトのまま使用していますが、唯一「コードカラーリング」だけはDarkに変更しました。黒背景の方が「プログラミングコードっぽさ」が出て、読みやすく感じたからです。
変更の手順は以下の通りです。
- 管理画面の「設定」から「HCB設定」をクリック。
- 設定変更(デフォルト状態でも問題ないです！)
- 一番下の「変更を保存」をクリック。
※コードカラーリングのフロント側・エディター側とは、フロント側が公開された記事の見え方、エディター側が編集画面での見え方のことです。
Highlighting Code Blockをブログで使う手順
設定ができたら、実際に記事の中でコードを紹介してみましょう。ブロックエディターを使えば、わずか数クリックで挿入できます。
- 投稿画面の「＋（ブロックを追加）」ボタンをクリック。
- 検索窓に「HCB」と入力するか、ブロック一覧の「テキスト」カテゴリから「Highlighting Code Block」を選択します。
ブロックが表示されたら、紹介したいソースコードを枠内に貼り付けます。 その後、右側の設定パネル（またはブロック下部）にある「Lang Select」から、そのコードの言語（HTML、CSS、JavaScriptなど）を正しく選択しましょう。 ※言語を選ぶことで、コードが最適な色にハイライトされます。
⚠️ ここで注意！エディター上の見た目について
編集画面（エディター）では、行番号やコピーボタン、コードの色分け（ハイライト）は表示されず、非常にシンプルな入力枠のままです。 「設定が反映されていない？」と不安になるかもしれませんが、プレビュー画面や公開後のページでは、しっかりデザインが適用されるので安心してくださいね。
「ここの行に特に注目してほしい！」という時は、「data-line属性値」という機能が非常に便利です。右下の専用枠に数字を入れるだけで、特定の行の背景色を変えて強調できます。
- 特定の1行だけ：その行番号を入力（例：
4） - 範囲を指定して：開始行と終了行をハイフンで繋ぐ（例：
1-3） - 離れた複数行：コンマで区切る（例：
1,5）
💡 実装イメージ たとえば、リストの2〜4行目を目立たせたい場合は「2-4」と入力します。これだけで、読者の視線を迷わせずに重要なポイントへ誘導できます。
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">私たちについて</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>まとめ：見やすいコードでブログの質を上げよう
今回は、ブログ記事にソースコードをプロっぽく、かつ使いやすく掲載できるプラグイン「Highlighting Code Block」をご紹介しました。
このプラグインを使うメリットを改めて振り返ると：
「今はまだコードを載せる予定がない」という方も、今のうちに導入しておけば、いざという時にスムーズに技術記事を書き始められますよ。
コメント