本文内で自動段組みされたコンテンツを作成する方法

公開日:2024(令和6)年9月8日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



パソコンの文書作成ソフト(Microsoft Wordなど)には、段組みといって、ページ内に列を設ける機能がありますよね。

例えば2列で段組みすると、左上から始まって、ページ末に来ると勝手に右上に移動するような感じです。

これをWordPressの本文などでできるようにするというのが本ページのテーマです。

それなら「カラム」ブロック使えばいいのでは?と思った方、半分正解です。

というのは、カラムブロックは内包するコンテンツを予め〇列に分けてラップするという機能で、それぞれのカラム(列)の内容は自身で調整しなければならず、文書作成ソフトのように、勝手に文章を〇列で表示してくれるというものではないからです(イメージつかみにくいですね..)。

まあ、あまり利用されることはないと思いますが、興味のある方は以下の方法で簡易的に実装してふーーんと思っていただければと思います。

そして面白そう!と思った方は、続きのWordPressとして便利に段組みを使えるようにする方法を読んでいただければ

簡易的に段組みを実現する方法

まずはどんな風になるのかを試してみましょう。

自身のサイトで投稿を1つ新規作成する、またはテスト用の投稿があればその編集画面を開いてください。

そこへ「カスタムHTMLブロック」を追加して、以下のコードをそのままコピペし、下書き保存後にプレビューしてみてください。

<p class="test-3-colmns">
この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。この文章は本文内で自動的に3列に分割されて表示されます。
</p>

<style>
.test-3-colmns {
  column-count: 3;
}
</style>

すると以下のように3列に段組みされたものが表示されると思います(ならなかったらゴメンナサイ)。

本文内で自動段組みされたコンテンツを作成する方法|Personal WP Customization Notes (PWCN)

上記コードでは「この文章は本文内で自動的に3列に分割されて表示されます。」というのを繰り返し書いているだけなのであまりイメージ湧かないかも知れません。試しに文章を変えてみてください。

..ね!カラムブロックと違って、文章全体が自動で3列になるのを体験いただけたと思います。

コードが少しでも分かる方なら、「column-count」というCSSプロパティ1つで、このような表現になることにびっくりされると思います(私もびっくりしました)。

参考:段組みレイアウトの使用

参考:「column-count」プロパティが使えるブラウザCan I use

もちろん、pタグではなくdivで括って、それにスタイルコードを紐づければ、その間に画像を入れたりしたものも、下図のように自動で3列表示されます。

本文内で自動段組みされたコンテンツを作成する方法|Personal WP Customization Notes (PWCN)

ただ、これを使うたびにカスタムHTMLブロック追加して、コンテンツをHTMLで書いてというのはブロックエディターらしくない(笑)し、編集画面側にもスタイルを追加しないとブロックエディター上では1列のままでちょっと面白くないので、次項でWordPressらしい実装方法を紹介していきます。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
QA Analytics QA Analytics

WordPressとして便利に段組みを使えるようにする方法

WordPressにはいろいろなブロックをまとめてdivタグなどで囲むことのできる「グループ」ブロックというのがあります。

さらにWordPressでは比較的簡単なコードで、ブロックを選択した状態で右側のツールバーを表示させ「スタイル」という項目からボタンをクリックすると一発で指定したスタイル(見た目)に切り替えられる機能があり、WordPressのデフォルトで例を挙げると、テーブルブロックを挿入した時に「デフォルト」と「ストライプ」が選択できるようになっているのを確認いただけると思います。

今回はこの機能を拡張して、「段組み」というボタンを追加し、グループ化した複数のブロックをボタン一発で段組みにできるようにします。

といっても簡単で、以下のコードをテーマのfunctions.phpへ追加するだけです。

/*** グループブロック 段組み ***/
function pwcn_register_block_styles_group_column() {

/* 2列 */
register_block_style( 'core/group',
	array(
	'name' => 'pwcn-group-column2',
	'label' => __( '2列段組み','' ),
	'inline_style' => '
					.is-style-pwcn-group-column2{column-count: 2;}
					body.post-php .is-style-pwcn-group-column2{column-count: 2;}
					',
	)
);

/* 3列 */
register_block_style( 'core/group',
	array(
	'name' => 'pwcn-group-column3',
	'label' => __( '3列段組み','' ),
	'inline_style' => '
					.is-style-pwcn-group-column3{column-count: 3;}
					body.post-php .is-style-pwcn-group-column3{column-count: 3;}
					',
	)
);

/* 4列 */
register_block_style( 'core/group',
	array(
	'name' => 'pwcn-group-column4',
	'label' => __( '4列段組み','' ),
	'inline_style' => '
					.is-style-pwcn-group-column4{column-count: 4;}
					body.post-php .is-style-pwcn-group-column4{column-count: 4;}
					',
	)
);

}
add_action('init','pwcn_register_block_styles_group_column');

このコードでは、ブロックにスタイル用ボタンを追加するための関数「register_block_style()」を使っており、「inline_style」パラメーターでスタイルコードを直接出力するようにしています。

ちなみに、この「register_block_style()」を使えば今回のグループブロックだけでなく、いろいろなブロックに独自のスタイルを持たせたボタンを追加することができますヨ。

段組み機能のサンプル

以下は実際に上記の方法で実装した3列の段組みでの表示サンプルです。複数の段落ブロックを入れ、間に画像ブロックを入れてもきちんと3列に表示されているのを確認いただけると思います。

我が家のアイドル「モモ」のかわいい写真

このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。本文内で自動段組みされたコンテンツを作成する方法|Personal WP Customization Notes (PWCN)コンテンツはどんなデバイスで表示させても3列表示されます

このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。このコンテンツはどんなデバイスで表示させても3列表示されます。

さらにもう一工夫(パソコン表示時のみ段組みする)

ここまでのコードだと、パソコン・タブレット・モバイルなどデバイスに関係なく段組みが適用されるので、幅の狭いデバイスで読む際には逆に見にくくなってしまうことがあります。

これを解消するために、モバイル(タブレット含む)では段組みが適用されないようにすると便利かも知れません。

実現するために、まずはテーマのfunctions.phpへ以下のコードを追加し、閲覧環境がパソコンの場合は「is-pc」というCSSクラスを、タブレットとモバイルの場合には「is-mobile」というCSSクラスをbodyタグのCSSクラスとして追加するようにします。

function pwcn_pc_mobile_body_class( $classes ) {
    if ( wp_is_mobile() ) {
        $classes[] = 'is-mobile';
    }else{
		$classes[] = 'is-pc';
	}
    return $classes;
}
add_filter( 'body_class', 'pwcn_pc_mobile_body_class' );

このコードを追加したら、自身のサイトのどこかの投稿などを表示させ、ソース表示やデベロッパーツールなどを使ってbodyタグ内に「is-pc」または「is-mobile」が追加されているかを確認してください
(パソコン上でモバイルの状況を確認するにはChromeの拡張機能「モバイルシミュレーター – レスポンシブテストツール」を使うと便利です)

CSSクラスが追加されるのを確認できたら、前項でグループブロックにボタンを追加するためにテーマのfunctions.phpへ追加したコードを以下に置き換えます。

CSSの部分でPCとモバイルを判定させる条件(body.is-pc)を追加している点以外コードは同じです

/*** グループブロック 段組み ***/
function pwcn_register_block_styles_group_column() {

/* 2列 */
register_block_style( 'core/group',
	array(
	'name' => 'pwcn-group-column2',
	'label' => __( '2列段組み','' ),
	'inline_style' => '
					body.is-pc .is-style-pwcn-group-column2{column-count: 2;}
					body.post-php .is-style-pwcn-group-column2{column-count: 2;}
					',
	)
);

/* 3列 */
register_block_style( 'core/group',
	array(
	'name' => 'pwcn-group-column3',
	'label' => __( '3列段組み','' ),
	'inline_style' => '
					body.is-pc .is-style-pwcn-group-column3{column-count: 3;}
					body.post-php .is-style-pwcn-group-column3{column-count: 3;}
					',
	)
);

/* 4列 */
register_block_style( 'core/group',
	array(
	'name' => 'pwcn-group-column4',
	'label' => __( '4列段組み','' ),
	'inline_style' => '
					body.is-pc .is-style-pwcn-group-column4{column-count: 4;}
					body.post-php .is-style-pwcn-group-column4{column-count: 4;}
					',
	)
);

}
add_action('init','pwcn_register_block_styles_group_column');

段組み機能のサンプル

以下は実際にこの機能を使って3列に段組みしたものです。段落ブロックと段落ブロックの間に画像ブロックを入れ、グループ化してパソコン表示時のみ3列になるようにしたものです。

我が家のアイドル「モモ」のかわいい写真

このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。

このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。このコンテンツはパソコン閲覧時のみ3列表示されます。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法