Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressの投稿にマルチカラムコンテンツを追加する方法(HTML必須なし)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressの投稿にマルチカラムのコンテンツを追加したいですか?

カラムは、投稿やページの魅力的なレイアウトを作成するために使用することができます。コンテンツを整理しやすくなります。また、サイト訪問者が素早くテキストを読み取ることができるため、読みやすさも向上します。

この投稿では、HTMLコードを記述することなく、WordPressの投稿にマルチカラム・コンテンツを簡単に追加する方法を紹介する。

How to add multi column content in WordPress posts

なぜWordPressにマルチカラムのコンテンツを追加するのか?

新聞や雑誌のような伝統的な印刷メディアは、印刷の黎明期からマルチカラムレイアウトを採用してきた。

彼らの目標は、利用可能なスペースを経済的に活用しながら、ユーザーが小さい文字を読みやすくすることだった。

ウェブでは個別カラムレイアウトが一般的だ。しかし、複数カラムのグリッドは、コンテンツを強調したり、スキャンして読みやすくしたりするのに便利です。

例えば、雑誌のサイトを運営しているのであれば、マルチカラムレイアウトを使ってコンテンツを整理することができます。そうすることで、物理的な雑誌と同じような雰囲気を出すことができます。

WordPressサイトで比較や研究論文、その他のインタラクティブなコンテンツを公開している場合にも、複数のカラムでコンテンツを整理することは有効です。読みやすさが向上し、エンゲージメントが高まります。

それでは、ブロックエディターとクラシックエディターでマルチカラムコンテンツを追加する方法を見てみましょう。以下のリンクをクリックするだけで、使いたい方法にジャンプできます:

WordPressブロックエディターでマルチカラムコンテンツを追加する – 簡単な方法

WordPressでグリッドカラムコンテンツとも呼ばれるマルチカラムコンテンツの作成は、初期設定なので簡単になりました。WordPressのブロックエディターにはカラムブロックがあります。

マルチカラムレイアウトを追加するには、新規投稿を作成するか、既存の投稿を編集する必要があります。コンテンツエディターに入ったら、上部の「+」アイコンをクリックしてブロックを追加します。

次に、「デザイン」タブでカラムブロックを選択する必要があります。

Add a column block

次の投稿では、ブログ投稿に使用したいカラム数とレイアウトを選択する必要があります。

WordPressは、さまざまな設定オプションを表示します。例えば、50/50カラムレイアウト、33/66カラムレイアウトなどです。

Choose number of columns to add

レイアウトを選択したら、カラムにブロックを追加できます。カラムブロックでは、各カラム内にブロックを追加することができます。

例えば、Paragraphブロックを選択し、そこにコンテンツを追加することができます。

Add blocks to columns

また、投稿編集画面の右カラムの設定パネルにブロックの設定が表示されます。ここでは、カラムの幅を編集することができます。

WordPressのカラムにはテキストだけでなく、画像を追加したり動画を埋め込むこともできる。

カラムのひとつにマウスを持っていき、’+’ボタンをクリックするだけでブロックが追加されます。また、「/」とブロック名を入力してブロックを追加することもできます。

例えば、一方のカラムに画像を、もう一方のカラムにテキストを追加した。

Add media content to columns

古いWordPressクラシックエディターで複数のカラムを追加する

WordPressをGutenbergにアップグレードしておらず、まだクラシックエディターを使用している場合は、グリッドカラムレイアウトを作成するためのプラグインを別途インストールする必要があります。

まず、Column Shortcodesプラグインをインストールし、有効化します。詳しい手順については、WordPressにプラグインをインストールする方法のステップバイステップガイドをご覧ください。

有効化した後、新しい投稿を作成したり、古い投稿を編集することができます。クラシックエディターに入ったら、ツールバーの[ ]ボタンをクリックしてください。

Click the shortcode buttons

プラグインはあなたのブログ投稿のカラムショートコードのリストを表示します。

WordPressブログに追加したいレイアウトを自由に選択できます。カラムのパディングを編集するオプションもあります。

Select shortcode for columns

ショートコードを選択すると、クラシックエディターに自動的に表示されます。例えば、このチュートリアルでは’one half’ショートコードを選びました。

ショートコードの間にコンテンツを入力することができます。

Enter your text between column shortcodes

次に、ショートコードアイコン'[ ]’をもう一度クリックして、別のカラムショートコードを追加することができます。

2つのカラムが隣り合って表示されるように、「one half (last)」ショートコードを追加しよう。ここからは、もう一方のカラムにコンテンツを追加するだけだ。

Enter text for second column and publish post

その後、投稿をプレビューして公開することができます。

これがテストサイトでの様子だ。

Multi column content in classic editor

WordPressの投稿やページにマルチカラムのコンテンツを追加する方法について、この投稿がお役に立てれば幸いです。WordPressエディターでブログ投稿のチェックリストを追加する簡単なガイドや、エキスパートが選ぶビジネスサイトに必須のWordPressプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

46件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Great, finally I know how to do it in Gutenberg as well. That’s actually why I switched to Elementor because I found Gutenberg not very intuitive. Maybe I was just too lazy to learn it. However, in Elementor, I understood and found this feature right away. Now I know how to handle Gutenberg too :). Thanks!

  3. Ralph says

    Thank you! It was really simple with your guide. Using 3 columns will definitely make some of my content look better than boring wall of text.

  4. Nishant Kumar says

    Really very useful. I am not aware of how to add a column section in the WordPress blog. Now I got it.

  5. Matt says

    Hi there – thanks for this post really helpful post. One quick question – is the text auto assigned to each of the (two) columns to ensure the columns are the same height on the page, or is this something you have to test/manage on text entry?

    • WPBeginner Support says

      You would need to manually ensure your content is the same or similar length if you wanted that.

      管理者

    • WPBeginner Support says

      You would want to check with the support for your theme or the ecommerce plugin you are using for modifying the styling of your store page.

      管理者

    • WPBeginner Support says

      We do not have a recommended method for going 11 columns wide at the moment. Depending on what you’re looking to display you may want to take a look at creating a table instead of columns.

      管理者

  6. Caite Adamek says

    Is there a way to automatically transfer the columns? When I set up my 2 columns, I put the images in the 1st column, then the text in the 2nd. I noticed that the mobile version can’t display the 2 columns next to each other, so the images are displayed first, then the text. I would like the text to be displayed first, then the images. Do I have to retype it all, or is there a clever way to switch the content of the 2 columns?

    • WPBeginner Support says

      Not at the moment, you could create a 2 column area beneath where you have it currently and place the content how you want it there then delete the original.

      管理者

  7. Kimberly Kelley says

    Using the multi-column (2) columns, the videos overlap themselves. is there anyway to adjust the max with of the videos since the only way I can seem to add them is via url, not embed code.

  8. Nicole says

    Any way to vertically center things in a column with new blocks/Gutenberg editor? Like I’d want a vertically centered image on the left, and text on the right. So say 30 lines of text and a 200 px height image – is there an easier way than manually inserting and sizing spacer blocks?

    • WPBeginner Support says

      For what it sounds like you’re wanting, you may want to use the media and text block rather than the columns block.

      管理者

  9. Rob Tait says

    Hi

    How do I write in 1 column and then 2 columns for next paragraph and then back to 1 column for the 3rd p/graph?

    Any help much appreciated?

    Thanks
    Rob

  10. Ashish says

    Why can’t we just elementor or any such page builder plugin. It is a lot more easier to use with so many additional features.

  11. dimiter kirov says

    This plugin has not been updated for 3 years and to top it all it won’t work with Gutenberg plugin

  12. Jenny says

    Hello,
    I tried adding columns to one of my pages and the Advanced Column button did not appear. I checked my plugins and it said it’s installed. Do you know what the problem would be?

    Thank you!
    Jenny

    • Rob Tait says

      You need to install an advanced visual editor such as TIny MCE in order to see the button. It won’t display on the standard default visual editor. Just had the same problem but it now shows after installing the above which is free.
      Hope that helps
      Rob

  13. Heather says

    I installed the plugin and activated it. It is displaying as “activated.” Still, there is no button. How do I troubleshoot this; I already know how to install a plugin so that fix is not applicable.

  14. Kirk says

    Installed the plugin with a basic free theme, and the column button never appeared in my Pages editor. I know you’re not the creator of the plugin, just wanted to share our experience

  15. om zho says

    upon pasting from text edit, the text spacing is weird as there are no “clean format” selection for advance WP column.. how can you fix it?

  16. Martine S. says

    Hey, this sounds great! But how will it look on phones? I’m using a similar plugin to have two columns, one for Norwegian and one for English. But when people read my blog via phone, the second column comes right after the first column so it looks like a full text – in two different languages!

    • Joe Nelo says

      What plug in are you using to display two columns of text? I am trying to do the same for English and Esperanto.

  17. PB says

    Is there a way to ensure the text in these columns displays as a list, i.e. with hard line breaks between items rather than as a single block of run-on text?

    Many thanks in anticipation of your advice

  18. Naveed says

    i am using wordpress version 4.5 , but this plugin is not compatible with my theme can i use this plugin for my theme ??

  19. Daniel Speraw says

    It looks good when columns are added to the post, but when I look at it published it has reverted to 1 centered column. I’ve tried it multiple times and in two browsers. Any thoughts?
    This is by far the easiest plugin. I REALLY want to use it.
    Many thanks,
    Daniel

  20. Chris Xphstos says

    Ηι!

    Is there a way to present a layout with columns but not one post with 2-3-4 columns etc.?
    Each column withing a page will be a seperated post. Something like Joomla’s Blog Layout…

  21. Debra Torres says

    This is exactly what I needed! Been trying to use tables for columns and getting so frustrated. Thank you, thank you, thank you!

  22. Mark Corder says

    I must say – if you need to use multiple columns on a regular basis, this looks like a great solution even if you DO know HTML/CSS! Love the fact that they included a breakpoint in the Options for adapting to responsive designs…

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。