Wordなど)には、段組みといって、ページ内に列を設ける機能がありますよね。2列で段組みすると、左上から始まって、ページ末に来ると勝手に右上に移動するような感じです。これをWordPressの本文などでできるようにするというのが本ページのテーマです。それなら「カラム」ブロック使えばいいのでは?と思った方、半分正解です。いうのは、カラムブロックは内包するコンテンツを予め〇列に分けてラップするという機能で、それぞれのカラム(列)の内容は自身で調整しなければならず、文書作成ソフトのように、勝手に文章を〇列で表示してくれるというものではないからです(イメージつかみにくいですね..)。利用されることはないと思いますが、興味のある方は以下の方法で簡易的に実装してふーーんと思っていただければと思います。面白そう!と思った方は、続きのWordPressとして便利に段組みを使えるようにする方法を読んでいただければ簡易的に段組みを実現する方法まずはどんな風になるのかを試してみましょう。自身のサイトで投稿を1つ新規作成する、またはテスト用の投稿があればその編集画面を開いてください。そこへ「カスタムHTMLブロック」を追加して、以下のコードをそのままコピペし、下書き保存後にプレビューしてみてください。class="test-3-colmns">この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。3;}</style>すると以下のように3列に段組みされたものが表示されると思います(ならなかったらゴメンナサイ)。上記コードでは「この文章は本文内で自動的に3列に分割されて表示されます。」というのを繰り返し書いているだけなのであまりイメージ湧かないかも知れません。試しに文章を変えてみてください。..ね!カラムブロックと違って、文章全体が自動で3列になるのを体験いただけたと思います。コードが少しでも分かる方なら、「column-count」というCSSプロパティ1つで、このような表現になることにびっくりされると思います(私もびっくりしました)。useもちろん、pタグではなくdivで括って、それにスタイルコードを紐づければ、その間に画像を入れたりしたものも、下図のように自動で3列表示されます。これを使うたびにカスタムHTMLブロック追加して、コンテンツをHTMLで書いてというのはブロックエディターらしくない(笑)し、編集画面側にもスタイルを追加しないとブロックエディター上では1列のままでちょっと面白くないので、次項でWordPressらしい実装方法を紹介していきます。本ページ掲載のコードを使用するときは本ページで掲載しているコードは、以下に了承した上で使用くださいコードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いませんコードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでくださいコードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがありますコードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください掲載しているのは参考コードです。🡅WordPressとして便利に段組みを使えるようにする方法WordPressにはいろいろなブロックをまとめてdivタグなどで囲むことのできる「グループ」ブロックというのがあります。WordPressでは比較的簡単なコードで、ブロックを選択した状態で右側のツールバーを表示させ「スタイル」という項目からボタンをクリックすると一発で指定したスタイル(見た目)に切り替えられる機能があり、WordPressのデフォルトで例を挙げると、テーブルブロックを挿入した時に「デフォルト」と「ストライプ」が選択できるようになっているのを確認いただけると思います。今回はこの機能を拡張して、「段組み」というボタンを追加し、グループ化した複数のブロックをボタン一発で段組みにできるようにします。いっても簡単で、以下のコードをテーマのfunctions.phpへ追加するだけです。4;}',));}add_action('init','pwcn_register_block_styles_group_column');このコードでは、ブロックにスタイル用ボタンを追加するための関数「register_block_style()」を使っており、「inline_style」パラメーターでスタイルコードを直接出力するようにしています。ちなみに、この「register_block_style()」を使えば今回のグループブロックだけでなく、いろいろなブロックに独自のスタイルを持たせたボタンを追加することができますヨ。段組み機能のサンプル以下は実際に上記の方法で実装した3列の段組みでの表示サンプルです。複数の段落ブロックを入れ、間に画像ブロックを入れてもきちんと3列に表示されているのを確認いただけると思います。このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。コンテンツはどんなデバイスで表示させても3列表示されますこのコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。一工夫(パソコン表示時のみ段組みする)ここまでのコードだと、パソコン・タブレット・モバイルなどデバイスに関係なく段組みが適用されるので、幅の狭いデバイスで読む際には逆に見にくくなってしまうことがあります。これを解消するために、モバイル(タブレット含む)では段組みが適用されないようにすると便利かも知れません。実現するために、まずはテーマのfunctions.phpへ以下のコードを追加し、閲覧環境がパソコンの場合は「is-pc」というCSSクラスを、タブレットとモバイルの場合には「is-mobile」というCSSクラスをbodyタグのCSSクラスとして追加するようにします。レスポンシブテストツール」を使うと便利です)CSSクラスが追加されるのを確認できたら、前項でグループブロックにボタンを追加するためにテーマのfunctions.phpへ追加したコードを以下に置き換えます。4;}',));}add_action('init','pwcn_register_block_styles_group_column');段組み機能のサンプル以下は実際にこの機能を使って3列に段組みしたものです。段落ブロックと段落ブロックの間に画像ブロックを入れ、グループ化してパソコン表示時のみ3列になるようにしたものです。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。本ページで掲載した内容や、紹介した参考コードなどがお役に立てたようでしたら、ページ末尾のコメント欄よりコメントを残す、SNS等で拡散するなどしていただけましたら幸いです。本ページ掲載の方法やコード等はあくまでも最終更新日時点での私の環境において動作確認等を行ったものです。動作不良やカスタマイズの詳細な方法などをコメント欄よりいただきましても原則回答は致しませんのでご了承ください。WordPressのカスタマイズに関するご要望はココナラにてお受けしております。お問い合わせ方法など詳しくはこちらをご覧ください。最後までお読みいただきありがとうございました。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。コメントをキャンセルメールアドレスが公開されることはありません。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。Monitorプラグインからの離脱方法メモ(ちょっと大変かも..)。