Cocoonで技術ブログを書き始めた当初、私は「いかに標準機能だけで頑張るか」に固執していました。しかし、どんなにCSSをいじっても「左上にファイル名、右上にコピーボタン」という理想のデザインには辿り着けませんでした。
結論から言うと、技術ブログを書くなら「Highlighting Code Block」一択です。
なぜCocoon標準のハイライト機能ではダメなのか、その具体的な理由と、競合を避けて正しくプラグインを導入する完全な手順を、私の失敗談を交えてご紹介します。
意地を張って標準機能で頑張っていた過去の自分に、「早くこのプラグインを入れろ！」と教えてあげたいです。
前提
この記事では、WordPressの無料テーマ「Cocoon（コクーン）」を使っていることを前提に進めていきます。
Cocoonは本当に素晴らしいテーマですが、餅は餅屋と言うように、コード表示に関しては「専用のプラグイン」に任せたほうが幸せになれます。もし他のテーマを使っている場合は、設定画面の場所が少し違うかもしれないので、そこだけご注意くださいね。
推奨理由
「Cocoonにもコード機能があるのに、なんでわざわざプラグインを入れるの？」と思いますよね。理由は大きく分けて2つあります。
1つ目は、標準機能の限界です。
Cocoon標準の機能だと、コードの左上に「ファイル名」を表示できません。また、背景色を変えることはできても、読者がワンクリックでコードをコピーできる「コピーボタン」が付かないんです。これだと、記事を読んでくれた人が手動で選択してコピーしなければならず、ちょっと不親切ですよね。
2つ目は、圧倒的な見た目の良さです。
今回使う「Highlighting Code Block（以下HCB）」というプラグインを入れると、Macの黒い画面（ターミナル）のようなカッコいいデザインが、インストールするだけで手に入ります。もちろんコピーボタン付きです。
「ただの文字の羅列」から「プロっぽいコード画面」へ。これだけでブログの信頼感がグッと上がりますよ。
導入手順
それでは、実際にプラグインを入れて、Cocoonと喧嘩しないように設定していきましょう。5分もあれば終わります。
インストール
まずはプラグインをWordPressに追加するところからです。
- WordPressの管理画面から「プラグイン」を開き、「新規追加」をクリックします。
- 検索窓に「Highlighting Code Block」と入力してください。
- 作者名が「LOOS WEB STUDIO」になっているのを確認して、「今すぐインストール」、そして「有効化」をクリックします。
競合回避
ここが今回の一番のポイントです。
CocoonもHCBも「コードをきれいに見せよう」とする機能を持っているので、そのままだと両方が動いて表示が崩れてしまいます。なので、Cocoon側の機能をオフにしてあげましょう。
- 管理画面の「Cocoon設定」を開きます。
- たくさんタブが並んでいますが、「コード」というタブを選んでください。
- 「ソースコードをハイライト表示する」という項目のチェックを外します。
- 最後に「変更をまとめて保存」をクリックするのを忘れずに。
これで、コード表示の担当がCocoonからプラグインに切り替わりました。
配色設定
最後に、デザインを整えます。執筆中の画面と、公開される画面の色を統一して「ダークモード」にしておくと作業がしやすいです。
- 管理画面の「設定」の中に「Highlighting Code Block」というメニューができているのでクリックします。
- 設定画面で、以下の2箇所を変更します。
- コードカラーリング（フロント側）：Dark
- コードカラーリング（エディター側）：Dark
- 「変更を保存」をクリックします。
これで準備完了です！記事を書いている最中も、黒背景でコードが確認できるようになりました。
執筆手順
設定お疲れ様でした。ここからは、実際に記事を書くときの手順を見ていきましょう。
ブロック配置
記事を書く画面（ブロックエディタ）での操作です。
- 「＋」ボタンを押して、ブロック検索で「high」と入力してみてください。
- 「Highlighting Code Block」というブロックが出てくるので選択します。
ここで注意なのが、Cocoon標準の「コード」というブロックも検索に出てくること。アイコンが似ているので間違えないように、「Highlighting…」の方を選んでくださいね。
詳細設定
ブロックを置くと、コードを入力する黒い箱が表示されます。このままでも使えますが、右側の設定パネル（もしくはブロック上のメニュー）を使うともっと便利になります。
- Lang（言語）：
ここ重要です。コマンドなら「Bash」、設定ファイルなら「Text」などを選ぶと、文字色がカラフルになって見やすくなります。 - File Name（ファイル名）：
ここに入力した文字が、ブロックの左上に表示されます。「oisystem-batch.sh」とか「/etc/nginx/nginx.conf」のように書いてあると、読者が「あ、このファイルをいじればいいんだな」と直感的にわかります。
運用注意点
最後に、読者に「親切だな」と思ってもらうためのちょっとしたコツをお伝えします。
記号の扱い
コマンドを紹介するとき、行の先頭に $ や # を付けたくなりますが、これらは書かないのがベストです。
理由はシンプルで、読者がコピーボタンを押したとき、この記号まで一緒にコピーされてしまうからです。そのまま貼り付けて実行するとエラーになってしまい、「このブログの通りにやったのに動かない！」となってしまいます。
コマンドだけをポンと置いてあげるのが、一番の優しさです。
更新頻度
プラグインのページを見ると、最終更新日が数年前になっていることがあって「大丈夫かな？」と不安になるかもしれません。
でも安心してください。このプラグインは機能としてすでに完成されていて、今のWordPressでも問題なく動きます。有名な技術ブロガーさんたちもこぞって愛用している鉄板プラグインなので、自信を持って使い続けて大丈夫です。
まとめ
Cocoonで技術ブログを書くなら、コード表示を見やすくするのは必須のマナーと言ってもいいかもしれません。
- Highlighting Code Blockをインストールする。
- Cocoon設定の「コードハイライト」を必ずオフにする。
- 設定で「Dark」モードを選ぶ。
たったこれだけで、あなたのブログは「個人のメモ書き」から「プロの技術情報」へと生まれ変わります。ぜひ、過去の記事のコードブロックも、時間があるときにこの新しいブロックに書き換えてみてください。きっと、自分のブログを読み返すのが楽しくなるはずです！
コメント