マルチカラムレイアウトの作成は、HTMLの知識や開発者の助けが必要でしたが、もう必要ありません。✨
WordPressのコンテンツ編集機能のテストを通じて、コードに触れることなくコンテンツを列に分割するユーザーフレンドリーな方法を見つけました。
これらのレイアウトは、特に機能の比較、長所と短所のリスト作成、または大量のテキストの整理を行う際に、投稿を読みやすく、視覚的に魅力的にすることができます。
このガイドでは、WordPressの投稿に複数列のコンテンツを追加するための最も簡単な方法をご紹介します。
💡クイックアンサー：WordPressで複数列のコンテンツを追加する方法
ここでは、WordPressの投稿やページに列を追加するためにカバーする簡単な方法の概要を説明します。
- ブロックエディターの使用：最も簡単な方法は、組み込みの「カラム」ブロックを使用して、プラグインなしでレイアウトを作成することです。
- クラシックエディターの使用：古いエディターを使用しているユーザー向けに、Column Shortcodesプラグインを使用してグリッドレイアウトを追加する方法を説明します。
WordPressにマルチカラムコンテンツを追加する理由
複数列のコンテンツを追加する主な理由は、投稿をよりスキャンしやすく、視覚的に整理することで、読者のエンゲージメントを維持することです。
シングルカラムのレイアウトはオンラインで一般的ですが、グリッドレイアウトはユーザーエクスペリエンスを向上させる強力なツールです。WordPressで複数カラムレイアウトを使用する主な利点は次のとおりです。
- 可読性の向上：新聞や雑誌のように、カラムは長いテキスト行を分割し、訪問者がコンテンツを読みやすく、素早くスキャンできるようにします。
- より良い整理：情報を横並びに整理するのに最適です。これは、製品比較、長所と短所のリスト、またはテキストの説明の横に画像を表示するのに理想的です。
- 重要な情報の強調：カラムレイアウトを使用して、記事の最も重要な部分に読者の注意を引くことができます。
- エンゲージメント向上： コンテンツを消化しやすくすることで、ユーザーエクスペリエンスが向上します。これにより、訪問者はサイトにより多くの時間を費やすようになります。
それでは、ブロックエディターとクラシックエディターでマルチカラムコンテンツを追加する方法を見てみましょう。使用したい方法にジャンプするには、以下のリンクをクリックするだけです。
- WordPressブロックエディターで複数列のコンテンツを追加する方法 – 簡単な方法
- WordPressクラシックエディタで複数の列を追加
- WordPressでマルチカラムコンテンツを追加することに関するよくある質問
WordPressブロックエディターで複数列のコンテンツを追加する方法 – 簡単な方法
WordPress では、グリッド列コンテンツとしても知られるマルチ列コンテンツの作成が、デフォルト機能になったため簡単になりました。WordPress ブロックエディターには、列ブロックが含まれています。
マルチカラムレイアウトを追加するには、新しい投稿を作成するか、既存の投稿を編集する必要があります。コンテンツエディタに入ったら、上部にある「+」アイコンをクリックしてブロックを追加します。
次に、「デザイン」タブでカラムブロックを選択する必要があります。
次に、ブログ投稿に使用したい列数とレイアウトを選択する必要があります。
WordPressでは、さまざまなオプションが表示されます。たとえば、50/50の列レイアウトを選択したり、33/66のレイアウトを使用したりできます。
レイアウトを選択した後、列にブロックを追加できます。Columnsブロックを使用すると、各列内にブロックを追加できます。
例えば、段落ブロックを選択してコンテンツを追加できます。
設定パネルの投稿編集画面の右側のカラムにブロック設定が表示されます。ここでカラムの幅を編集できます。
テキストに加えて、WordPress の列に画像や動画を埋め込むこともできます。
マウスをいずれかの列に移動し、「+」ボタンをクリックしてブロックを追加します。「/」とブロック名を入力してブロックを追加することもできます。
例えば、一方の列に画像、もう一方の列にテキストを追加しました。
WordPressクラシックエディタで複数の列を追加
WordPressをGutenbergにアップグレードしておらず、まだクラシックエディターを使用している場合は、グリッドカラムレイアウトを作成するために別のプラグインをインストールする必要があります。
まず、Column Shortcodes プラグインをインストールして有効化します。詳細な手順については、WordPressでプラグインをインストールする方法のステップバイステップガイドに従ってください。
📌 免責事項： このプラグインはWordPressの最新バージョンでテストされていないことに注意してください。ただし、デモウェブサイトでテストしたところ、問題なく動作しました。それでも不明な場合は、古いプラグインの使用に関する初心者向けガイドをご覧ください。
有効化したら、新しい投稿を作成するか、古い投稿を編集できます。クラシックエディターに入ったら、ツールバーの「[ ]」ボタンをクリックするだけです。
プラグインには、ブログ投稿用のカラムショートコードのリストが表示されます。
WordPressブログに追加したいレイアウトを自由に選択できます。カラムのパディングを編集するオプションもあります。
ショートコードを選択すると、クラシックエディターに自動的に表示されます。たとえば、このチュートリアルでは「半分」のショートコードを選択しました。
次に、ショートコードの間にコンテンツを入力できます。
次に、カラムショートコードをもう一つ追加するために、ショートコードアイコン「[ ]」を再度クリックできます。
2つの列を隣り合わせに表示するために、「1/2（最後）」ショートコードを追加しましょう。ここから、もう一方の列にコンテンツを追加するだけです。
その後、投稿をプレビューして公開できます。
テストサイトではこのように表示されました。
WordPressでマルチカラムコンテンツを追加することに関するよくある質問
ここでは、読者からウェブサイトへのマルチカラムコンテンツの追加についてよく寄せられる質問をいくつか紹介します。
WordPressのカラムはモバイルデバイスではどのように表示されますか？
WordPressはこれを自動的に処理します。携帯電話のような小さな画面では、カラムは互いの上に縦に積み重ねられます。
このレスポンシブデザインにより、デバイスに関係なく、コンテンツは常に読みやすく、ユーザーフレンドリーになります。
個々のWordPressカラムブロックの幅を調整できますか？
はい。幅を調整するには、個々のカラムブロック（親の「カラム」コンテナではない）をクリックして選択します。右側のブロック設定サイドバーで、幅の値を指定できます。
パーセンテージ（%）、ピクセル（px）、その他のWeb単位を使用して、正確な制御が可能です。
より高度なレイアウトオプションが必要な場合はどうなりますか？
デフォルトのカラムブロックは、ほとんどのシンプルなレイアウトに最適です。ただし、スペーシング、配置、レスポンシブ設定に関するより高度な制御が必要な場合や、より複雑なグリッドデザインを作成したい場合は、ページビルダープラグインが最善の解決策です。
完全なドラッグ＆ドロップデザインの自由度を得るには、SeedProdのようなツールを使用することをお勧めします。
この記事がWordPressの投稿やページに複数列のコンテンツを追加する方法を学ぶのに役立ったことを願っています。また、WordPressエディタにブログ投稿チェックリストを追加する方法に関する簡単なガイドや、WordPressにコンテンツテンプレートを追加する方法のチュートリアルもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
グーテンベルクでもやり方がわかってよかったです。実は、グーテンベルクは直感的ではないと感じていたので、エレメンターに乗り換えた理由がそれでした。もしかしたら、学ぶのが面倒だっただけかもしれません。しかし、エレメンターでは、この機能をすぐに理解して見つけることができました。これでグーテンベルクの扱い方もわかりました :)。ありがとうございます！
ラルフ
ありがとうございます！あなたのガイドで本当に簡単でした。3 列を使用すると、退屈な長文よりも私のコンテンツの一部が確実に良く見えるようになります。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです！
管理者
ニシャント・クマール
本当に非常に役立ちます。WordPressブログに列セクションを追加する方法がわかりませんでした。今、わかりました。
WPBeginnerサポート
Glad our guide could help
管理者
Matt
こんにちは。この投稿は本当に役立ちました。ありがとうございます。一つ質問があります。テキストは、ページ上で列の高さを同じにするために、(2つの)各列に自動的に割り当てられるのですか、それともテキスト入力時に自分でテスト/管理する必要があるのですか？
WPBeginnerサポート
もしコンテンツの長さを同じか似たようなものにしたい場合は、手動で調整する必要があります。
管理者
Sir Newton
モバイルで2列の商品表示にするにはどうすればいいですか？
ありがとうございます
WPBeginnerサポート
ストアページのスタイリングを変更するには、お使いのテーマまたはeコマースプラグインのサポートに確認することをお勧めします。
管理者
Stuart
こんにちは、11列必要です。最大（10）を超える方法はありますか？
WPBeginnerサポート
現在、11列幅にするための推奨方法はありません。表示したい内容によっては、列ではなくテーブルの作成を検討することをお勧めします。
管理者
Caite Adamek
列を自動的に転送する方法はありますか？ 2列を設定したとき、画像は1列目に、テキストは2列目に配置しました。モバイルバージョンでは2列を隣り合わせに表示できないため、画像が先に表示され、次にテキストが表示されることに気づきました。テキストを先に表示し、次に画像を表示したいのですが。すべてを再入力する必要がありますか、それとも2列の内容を切り替える賢い方法がありますか？
WPBeginnerサポート
現時点ではできません。現在ある場所の下に2カラムのエリアを作成し、コンテンツを希望通りに配置してから元のものを削除することができます。
管理者
キンバリー・ケリー
マルチカラム（2）カラムを使用すると、動画が重なってしまいます。URL経由でしか追加できず、埋め込みコードでは追加できないのですが、動画の最大幅を調整する方法はありますか？
WPBeginnerサポート
エディターで表示していないときに動画が重ならないか確認することをお勧めします。そうでない場合は、高度なCSSセクションを確認して、そのセレクターを使用して幅を設定できます。https://www.wpbeginner.com/glossary/css/
管理者
Nicole
新しいブロック/Gutenbergエディターで、カラム内の要素を垂直方向に中央揃えする方法はありますか？例えば、左側に垂直中央揃えされた画像、右側にテキストを配置したい場合です。30行のテキストと200pxの高さの画像がある場合、スペーサーブロックを手動で挿入してサイズ調整するよりも簡単な方法がありますか？
WPBeginnerサポート
お探しのものによりますが、カラムブロックではなく、メディアとテキストブロックを使用することをお勧めします。
管理者
Rob Tait
Hi
最初の段落を1カラムで書き、次の段落を2カラムにし、3番目の段落を再び1カラムにするにはどうすればよいですか？
何かお手伝いいただけると幸いです。
ロブ
Ashish
なぜElementorやその他のページビルダープラグインを使わないのですか？多くの追加機能があり、はるかに使いやすいです。
ディミター・キロフ
このプラグインは3年間更新されておらず、さらにGutenbergプラグインでも動作しません
ジェニー
こんにちは。
ページの1つに列を追加しようとしましたが、高度な列ボタンが表示されませんでした。プラグインを確認したところ、インストールされていると表示されました。問題は何でしょうか？
ありがとうございます！
ジェニー
Rob Tait
ボタンを表示するには、TIny MCEのような高度なビジュアルエディターをインストールする必要があります。標準のデフォルトのビジュアルエディターには表示されません。私も同じ問題を抱えていましたが、上記（無料）をインストールした後に表示されるようになりました。
お役に立てば幸いです。
Rob
デニス
素晴らしい。まさに探していたもので、ついに、すべてを段階的に説明してくれる人が現れました。
ヘザー
プラグインをインストールして有効化しました。「有効化済み」と表示されています。それでも、ボタンがありません。これをトラブルシューティングするにはどうすればよいですか？プラグインのインストール方法はすでにわかっているので、その修正は適用されません。
カーク
基本的な無料テーマでプラグインをインストールしましたが、Pagesエディターにカラムボタンが表示されませんでした。プラグインの作成者ではないことは承知していますが、私たちの経験を共有したかったのです。
om zho
テキストエディタから貼り付けると、WPの高度な列に「クリーンフォーマット」の選択肢がないため、テキストの間隔がおかしくなります。どうすれば修正できますか？
Martine S.
こんにちは、それは素晴らしいですね！でも、携帯電話ではどのように表示されますか？私は同様のプラグインを使用して、ノルウェー語用と英語用の 2 つの列を用意しています。しかし、人々が携帯電話で私のブログを読むとき、 2 番目の列は最初の列のすぐ後に来るため、 2 つの異なる言語で全文のように見えます！
ジョー・ネロ
テキストを2列で表示するために、どのプラグインを使用していますか？英語とエスペラント語で同じことをしようとしています。
Elizabeth
プラグインを有効にするにはどうすればよいですか？
WPBeginnerサポート
こんにちは、エリザベスさん、
WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。WordPressプラグインのインストール方法。
管理者
PB
これらの列のテキストを、単一の連続したテキストブロックではなく、改行で区切られたリストとして表示する方法はありますか？
アドバイスをお待ちしております。ありがとうございます。
スティーブ・エリオット
これらの列に背景色を設定する方法はありますか？
Bhagyashree barlingay
すでに入力した素材をこれらのカラムにコピー/ペーストできません。
Naveed
WordPressのバージョン4.5を使用していますが、このプラグインは私のテーマと互換性がありません。このプラグインを私のテーマで使用できますか？
ik
各カラムに画像を追加できますか？または、各カラムにアクションボタンを追加できますか？
WPBeginnerサポート
はい。
管理者
ケイト
列は機能していますが、列内にビデオを埋め込もうとすると、コードのテキストしか表示されません…
Daniel Speraw
投稿に列を追加すると見栄えが良いのですが、公開されたものを見ると1列の中央揃えに戻ってしまいます。何度か試しましたが、2つのブラウザでも同じでした。何か考えはありますか？
これは断然一番簡単なプラグインです。本当に使いたいです。
どうもありがとうございます。
Daniel
Meshellklip
各列に画像を追加できますか？ または、各列にアクションボタンを追加できますか？
Sri Harsha Chilakapati
こんにちは、
私のサイトはレスポンシブなCustomizrテーマを使用しており、そのレスポンシブ性を失いたくありません。このプラグインでレスポンシブな列を追加できますか？
Chris Xphstos
こんにちは！
カラムでレイアウトを表示する方法はありますか？ただし、2〜3〜4カラムなどの投稿は1つではありません。
ページ内の各カラムは個別の投稿になります。Joomlaのブログレイアウトのようなものです。
WPBeginnerサポート
そのためには、マルチカラムのWordPressテーマを検討する必要があります。そのようなテーマはたくさんあります。
管理者
Karen
ありがとうございます！ずっとこれを学びたかったんです – もう大丈夫です！xx
デブラ・トーレス
まさに必要としていたものです！テーブルを使って列を作成しようとして、とてもフラストレーションが溜まっていました。本当にありがとうございます！
Mark Corder
複数の列を日常的に使用する必要がある場合、HTML/CSSを知っていても、これは素晴らしいソリューションのように見えます！レスポンシブデザインに適応するためのブレークポイントがオプションに含まれているのは素晴らしいです…