WordPressのコードブロックをCSSだけでエディタ風に整える

先日、当ブログに構造化データを追加した実装記事を書いたのですが、掲載されたコードブロックが ふつうの本文と見分けがつかない状態でした。技術記事としては読みにくく、正直「これは書き直したい……」と思ったので、コードブロックだけエディタ風スタイルに差し替えました。今回はその過程と、書いた CSS を共有します。

問題：コードが本文に埋もれる

WordPress の Gutenberg コードブロック（wp-block-code）は、テーマが特にスタイリングを持たない場合、地味なグレー背景か、あるいは本文と同じ書体・同じサイズで表示されます。うちの cielo-theme もエディタ用のスタイルは特別に持っておらず、結果的にコード行が段落の一部のように見える状態でした。

技術ネタを扱う記事にとって、これは致命的です。読者からすると「どこからどこまでがコードで、どこがコメントで、どこが本文なのか」を目で判断する必要があり、集中力を消耗します。まずは「ここはコードですよ」という視覚的な区別を強くつける必要がありました。

方針：VSCode／ターミナルっぽいエディタ風に

今回はシンタックスハイライトのライブラリを入れずに、CSSだけで「明らかにコードだ」と分かるエディタ風UIに仕上げる方針を取りました。理由は次の通りです。

• 言語が多岐にわたる（PHP・JS・シェル・YAML等）ので、ハイライト精度に振り回されたくない
• Prism.js / highlight.js を入れるとページ重量とレンダリングコストが上がる
• 「暗い背景の等幅フォント」だけでもコードとしての識別性は9割達成できる

加えて、ちょっと遊びで macOSウィンドウ風の3つの丸（🔴🟡🟢）を左上に、右上にCODEラベルを添えて、エディタらしさを印象付けました。技術記事の温度感が上がる副作用も期待しています。

実装：CSS だけで完結する

コードは自作プラグイン cielo-blog の内蔵スタイルに追記しました。テーマではなくプラグインに置いた理由は、以前の記事にも書いた通り「テーマ差し替えに強くしたい」からです。要点だけ抜粋します。

/* エディタ風コンテナ */
.single-blog .wp-block-code {
    position: relative;
    background: #1e1e2e;
    color: #d4d4d8;
    border-radius: 10px;
    padding: 3em 1.2em 1.2em;
    margin: 2em 0;
    font-family: 'SF Mono','JetBrains Mono','Fira Code','Menlo',monospace;
    font-size: .88rem;
    line-height: 1.7;
    overflow-x: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border: 1px solid #2a2a3d;
    white-space: pre;
}

/* macOSウィンドウ風の3つの丸（左上） */
.single-blog .wp-block-code::before {
    content: '';
    position: absolute;
    top: 14px; left: 16px;
    width: 12px; height: 12px;
    background: #ff5f57;
    border-radius: 50%;
    box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
}

/* 右上にラベル */
.single-blog .wp-block-code::after {
    content: 'code';
    position: absolute;
    top: 10px; right: 14px;
    font-size: .7rem;
    color: #6b7280;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* インラインコード */
.single-blog code:not(pre code) {
    background: #f2f4f8;
    color: #d94f6f;
    padding: .12em .4em;
    border-radius: 4px;
    font-size: .88em;
    border: 1px solid #e5e8ee;
}

ポイントを3つに絞ってお伝えします。

• .single-blog でスコープする：WordPress が単一記事表示時に body に付与する single-{post_type} クラスを利用。これで他ページ（固定ページ・NEWSページ）のコード表示に影響を出さない
• 擬似要素で装飾を作る：::beforeで3つの丸、::afterでラベル。HTMLに何も足さずにエディタ風UIを完成させられる
• インラインコードは別配色に：本文中の <code> は控えめな赤系にして、コードブロックの暗いUIとの役割の違いを視覚的に区別

結果：技術記事の”読める率”が明らかに上がる

反映後、以前の JSON-LD 実装記事を見直してみると、スクロールしながら「あ、ここはコードだな」と一瞬で分かるようになりました。読者にとってこれは大きな違いです。技術記事は情報量が多く、読者は最終的に「自分の環境に落とし込めるか」を判断しながら読みます。その判断コストを下げるのが、こういう地味な視覚的仕込みの役割です。

ちなみに、シンタックスハイライトが本当に欲しくなったら、後から Prism.js を後付けすることも可能です。今回はまず「ハイライトなしのエディタ風スタイル」で運用してみて、必要性が明確になったタイミングで導入判断する方針にしました。作りすぎないのもまた、UI設計の作法だと思っています。

まとめ

コードブロックが本文に埋もれる問題は、CSS だけで読者体験が段違いに変わる領域です。シンタックスハイライトのライブラリを入れなくても、「暗い背景・等幅フォント・エディタっぽい装飾」の3点だけで、コードとしての識別性は十分に確保できます。技術記事を書くWordPressサイトを持っている方には、真っ先に手を入れる価値があるポイントです。

私たちシエロデザインは、こうした「見た目の細かい気配り」から「事業の意思決定への伴走」まで、幅広くお客様のWebに関わっています。作って終わりではなく、読まれて、使われて、成果につながるところまでを見届けたいという想いを、今回のような小さな改修にも込めています。

この記事を書いた人

WEBディレクター

佐藤 広樹 Sato

仕事を通じて出会った方から「人から学ぶ」ことを大切に、AIやWEBから得られない知見を吸収するよう意識しています。

スタッフ紹介はこちら →