クラシックエディターで極める！WordPressのHTML直接編集とCSS連携術

さて、WordPressの世界はブロックエディターへと進化を続けていますが、私を含め、コードを愛する制作者にとって「クラシックエディター（テキストモード）」の自由度は何物にも代えがたいものがあります。

昨日はHTMLの基本タグについて解説しましたが、それを最も活かせるのは、やはりこの「真っ白な画面にタグを打ち込んでいく瞬間」ではないでしょうか。

1. テキストモードこそ「制作者の聖域」

ビジュアルモードの便利さも分かりますが、意図しない <p> タグや空の <div> が勝手に入るのに悩まされたことはありませんか？テキストモード（HTML直接入力）を使えば、昨日学んだHTMLの構造を完璧にコントロールできます。
参考：HTMLの基本タグ解説！初心者でも迷わない正しい構造の作り方

2. クラシック派を悩ませる「自動整形」との付き合い方

WordPressには wpautop という、改行を勝手に段落タグに変換する機能があります。コードを綺麗に書きたい制作者にとっては、これがお節介になることも。
現場では、子テーマの functions.php に以下の1行を加えることで、この「自動整形」を制御するのが一般的です。
参考：WordPressの子テーマとは？初心者でも安全にカスタマイズする方法

// 記事編集画面での自動成形（pタグ自動挿入）を停止
remove_filter( 'the_content', 'wpautop' );

3. クラス設計とCSSのシンクロ

クラシックエディターでHTMLを書く最大のメリットは、独自のクラスを自由に付与できることです。これにより、カスタマイザーの「追加CSS」や子テーマのスタイルシートと完全に連携できます。

<!-- テキストタブに記述するコード例 -->
<div class="custom-card">
  <h3>注目コンテンツ</h3>
  <p>ここに詳細なテキストを記述。角丸で仕上げます。</p>
</div>

これに対して、先週学んだ border-radius などを当てることで、ブロックエディターでは再現できない絶妙なデザインが完成します。
参考：CSS border-radius活用術！おしゃれな角丸デザイン3選

4. 画像形式とクラシックエディター

画像を挿入する際も、 <img> タグを直接書くことで、 loading="lazy" や alt 属性を正確に管理できます。水曜日の記事で紹介したWebP形式も、タグで指定すれば確実です。
参考：画像形式の使い分け術！サイト高速化の必須知識

5. クラシックの未来

「いつまでクラシックエディターが使えるのか？」という不安はあるかもしれません。しかし、たとえプラグインが必要になったとしても、HTMLを直接操る技術は不滅です。岐路に立った時、自分の軸（コード）を持っている人は強い。これは制作学習においても同じですね。
参考：Web制作学習を挫折しないコツ！講師が教えるマインド術

まとめ：一文字のコードに宿る「プロの誇り」

クラシックエディターでHTMLを叩くことは、単なる作業ではなく、サイトという名の建築物を一から組み上げる「職人の仕事」です。意図した通りの構造、洗練されたクラス名。そこに宿るこだわりが、クライアントの信頼に繋がります。

ついに明日は毎日投稿30日目。この「コードの力」を信じて、最高のフィナーレを迎えましょう！