クラシックエディタでも使える、HTMLとCSSだけのカラムの作り方です。画面幅に応じて1列・2列・3列に切り替わります。
クラシックエディタのテキストモードにHTMLを、子テーマのスタイルシートまたは追加CSSにCSSを記載します。
ブロックエディタではカスタムHTMLブロックでも使えます。
ブラウザーの表示領域の幅が600px未満なら1列、600px以上960px未満なら2列、960px以上なら3列です。
幅を変えて確認できる見本
HTMLとCSS
<div class="waza-columns"><div>内容1</div><div>内容2</div><div>内容3</div><div>内容4</div><div>内容5</div><div>内容6</div></div>.waza-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.waza-columns>div{min-width:0;overflow-wrap:anywhere;border:1px solid #ccc;padding:10px;box-sizing:border-box}.waza-columns img{max-width:100%;height:auto}@media(min-width:600px){.waza-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:960px){.waza-columns{grid-template-columns:repeat(3,minmax(0,1fr))}}Gridでもメディアクエリでブレイクポイントを指定できます。
旧記事の「指定できない」という説明を訂正しました。
gapを手計算で各列から引く必要がなく、1列表示でも幅いっぱいに配置できます。
配置と戻し方
クラスをwaza-columnsに限定しているため、他のカラムへ自動適用しません。
表示順はHTMLの順番です。
見た目だけのorder変更を避け、リンクがある場合はTabの移動順も確認してください。
この例のメディアクエリは、カラムの配置場所ではなくブラウザーの表示領域の幅を判定します。
幅のあるPC画面では、狭いサイドバーに置いても3列になるため、配置先に合わせて列数を調整してください。
長いURLや画像も入れて横はみ出しを確認します。
導入前に既存のHTMLとCSSを保存し、旧コードと重ねて適用しないでください。
元に戻す場合は今回追加したHTMLとCSSを取り除き、導入前の内容に戻します。
GitHubのMOTOKI-LLC/WAZA-codeに置いている旧版のコードとは内容が変わっています。本記事のコードを基準にしてください。
確認した範囲
2026年10月1日のブラウザー検証では、幅390・768・1280pxでそれぞれ1・2・3列になり、ページ全体に横はみ出しがないことを確認しました。
他テーマへの組み込みと、クラシックエディタでの入力・保存操作は今回確認していません。
導入先では保存後の公開ページで表示を確認してください。
メディアクエリの判定対象は、仕様の参照資料であるMDNのメディアクエリ解説でも確認できます。
ブロックエディタのカラムブロック側でブレイクポイントを変えたい場合はWordPress│カラムブロックのブレイクポイントを変更する方法、列の並び順をCSSで変えたい場合はWordPress│CSSを使ってカラムブロックの表示を並び替えをする方法をご覧ください。
よくある質問：WordPressでクラシックエディタでも使えるカラムを作成するとき
この方法は、クラシックエディタでも使えますか？
使えます。記事では、クラシックエディタでも使える、HTMLとCSSだけのカラムの作り方です。クラシックエディタのテキストモードにHTMLを、子テーマのスタイルシートまたは追加CSSにCSSを記載します。ブロックエディタではカスタムHTMLブロックでも使えます。
画面幅によって、何列になりますか？
記事では、ブラウザーの表示領域の幅が600px未満なら1列、600px以上960px未満なら2列、960px以上なら3列です。幅390・768・1280pxでそれぞれ1・2・3列になり、ページ全体に横はみ出しがないことを確認しています。
Gridでは、ブレイクポイントを指定できませんか？
指定できます。記事では、Gridでもメディアクエリでブレイクポイントを指定できると訂正しています。gapを手計算で各列から引く必要がなく、1列表示でも幅いっぱいに配置できます。
他のカラムにも、自動で適用されますか？
適用されません。記事では、クラスをwaza-columnsに限定しているため、他のカラムへ自動適用しません。導入前に既存のHTMLとCSSを保存し、旧コードと重ねて適用しないでください。
狭いサイドバーに置いても、列数は変わりますか？
変わりません。記事では、この例のメディアクエリは、カラムの配置場所ではなくブラウザーの表示領域の幅を判定します。幅のあるPC画面では、狭いサイドバーに置いても3列になるため、配置先に合わせて列数を調整します。
表示順は、どう決まりますか？
記事では、表示順はHTMLの順番です。見た目だけのorder変更を避け、リンクがある場合はTabの移動順も確認します。
公開前に、何を確認しますか？
記事では、長いURLや画像も入れて、横はみ出しを確認します。導入先では、保存後の公開ページで表示を確認します。
どこまで検証されていますか？
記事では、2026年10月1日のブラウザー検証で幅390・768・1280pxの表示を確認しています。一方、他テーマへの組み込みと、クラシックエディタでの入力・保存操作は確認していません。元に戻す場合は、今回追加したHTMLとCSSを取り除き、導入前の内容に戻します。
