このは屋 tips3 2022.04.17

    WordPressでページ内にカラム(レイアウト)を作成する方法

    ウェブサイトでよく使う用語「カラム」をご存知でしょうか。 このカラムとは段落という意味で、デザインやコンテンツの配置などに決めるレイアウトのこと...

    記事を読む 読了目安 4 分 / AI時代の自作と内製化
    WordPressでページ内にカラム(レイアウト)を作成する方法
    AI × DIY × Small Business 読んで終わりではなく、自分の商売に戻す。

    記事の最後で、ネット集客を自分で整えるための無料テンプレートを受け取れます。

    Themetips3
    Updated2022年4月17日
    Next Step記事の末尾で無料テンプレートを受け取れます

    ウェブサイトでよく使う用語「カラム」をご存知でしょうか。

    このカラムとは段落という意味で、デザインやコンテンツの配置などに決めるレイアウトのことです。

    2カラムレイアウト(2段構成)が定番です。

    ランディングページだったら、1カラムレイアウト(1段構成)ですね。

    カラムでレイアウトをするには、HTML・CSSの知識が必要になってきます。

    その為、ウェブ初心者には自由にレイアウトを作るのは敷居が高いです。

    しかし、そんなカラムを使ったレイアウトもWordPressでは、簡単に組むことが出来ます。

    HTMLの深い知識も必要ありません。

    ページ内でのレイアウトを自由に組むことが出来ます。

    今回は、「WordPressでページ内にカラム(レイアウト)を作成する方法」をご紹介します。

    目次
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    このは屋
    (生成AI×デジタルマーケティングスクール)
    スモールビジネス特化の学び舎。スモールビジネスオーナーに向けて、ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、安定した継続的な収入源を確保する方法…etc。悔いの無い生涯を謳歌する為の、鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

    「Shortcodes Ultimate」プラグインを使用

    「Shortcodes Ultimate」というWordPressプラグインを使用することで、投稿ページ・固定ページでカラムを使って自由にレイアウトを組むことが出来ます。

    画像を左右に並べたり、左にテキスト・右に画像…etcといった配置が出来てしまうんです。

    以下は参考になる記事になります。

    あわせて読みたい
    プラグイン『Shortcodes Ultimate』を使って本文の途中だけを簡単に2カラム・3カラムに分割する方法 – デジ...
    ネタワン
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    Shortcodes Ultimate: 50以上の装飾機能があるWordPressプラグイン - ネタワン Shortcodes Ultimateは、50以上のデザインパーツを利用して記事を装飾できるWordPressプラグインです。ショートコードを利用してブログの記事を装飾できます。プラグインを...
    Simplicity Hacks
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    Shortcodes Ultimateの使い方。WordPress初心者におすすめの、何でもできるプラグイン 簡単な操作できれいな記事装飾パーツを使うことができるプラグインShortcodes Ultimateでできることと、使い方を説明します。

    「Elementor」プラグインを使用

    「Elementor」というWordPressプラグインを使用すると、ホームページビルダーのような操作感で自由にページレイアウトを組めます。

    操作はドラッグ&ドロップで要素をページ内に移動されるだけです。直感的に操作することが可能です。

    要素は無料でも多数あるのでかなり便利です。

    以下は参考になる記事になります。

    ミライヨッチ
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    【Elementorの使い方】WordPressで人気No.1のページビルダーはこれ! | ミライヨッチ あなたは、Elementor(エレメンター)というページビルダーを知っていますか? WordPressのページビルダーの中でも、圧倒的No.1の人気があるプラグインです。 しかも、無料...
    PhotoshopVIP
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    初心者でも簡単!コード不要のホームページ作成ツールElementorをはじめよう | PhotoshopVIP 2021年となったいま、WordPressとElementor(エレメンター)のようなドラッグ&ドロップを基本とした、直感的なWebページビルダーを使えば、誰でも簡単にウェブサイトを作れ...
    gungiiのなるほどHack&Tips
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    最強のページビルダーElementorの使い方 HTMLやCSSの知識が全くなくても、思い通りのデザインができるWordPressのページビルダー用プラグイン。テキストや画像をドラッグ&ドロップしていくことで、直感的に記事を...

    Gutenbergエディタを使用

    Gutenbergエディタは、ブロックエディタと言われ、最近のWordPressで主流のエディタとなっています。

    見分け方は、ホームページビルダーのような編集画面でして、ブロックを追加して編集していきます。

    そんなGutenbergエディタ(ブロックエディタ)では、カラム機能が標準でついています。

    2カラムにしたり、3カラムにすることが可能です。

    以前よりも、柔軟にカラムを追加出来るようになっています。

    猫でもわかるWordPress
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    【2021年10月最新】カラムブロックの使い方徹底解説 自由なレイアウトを作ろう! ブロックエディターの「カラムブロック」を使いこなすと自由にレイアウトが作れますよ! 使い方を徹底解説しました!動画あり!
    WebNote+
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    【ブロックエディター】素敵なレイアウトを作る!カラムブロックの使い方! | WebNote+ WordPressのブロックエディターに標準で用意されている「カラムブロック」の使い方をご紹介します。 カラムブロックを使うと、画像や文章を横並びに配置することができます...
    Web・AIの活用術 WEBST8のブログ
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    【WordPressカラムブロック】画像等の横並び方法・作り方 https://www.youtube.com/watch?v=A6NXQVkPoPI WordPressではカラム(列)ブロックを利用することで、画像や文章を簡単に横並びにすることができます。 本記

    WordPressテーマのカラム機能を使用

    Gutenbergエディタに抵抗がある方が一定数いるようです。

    旧エディタをClassic Editor (クラシックエディター)といいます。

    このエディタを使用している場合、今回解説した「Shortcodes Ultimate」プラグインか、「Elementor」プラグインを利用してください。

    それともう一点、WordPressテーマにカラム機能を搭載している物もあります。

    現在カラム機能がついているのを確認しているのが、以下のテーマです。

    SANGO
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    SANGO|心地良さを追求したWordPressテーマ WordPressテーマSANGOのデモページです。
    JIN(ジン)
    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    JIN(ジン)|真の使いやすさを追求したWordPressテーマ WordPressテーマ「JIN」の販売ページです。ひつじと赤石カズヤの2人により「本当につかいやすい」と感じてもらえるテンプレートを追求し、作り上げました。

    ※「SWELL」テーマも人気ですが、このテーマはGutenbergエディタを使用した方がオススメなので、割愛しています。

    上記テーマの中には、ショートコード機能という物があり、その中にカラム機能があります。

    (ただ、Gutenbergエディタに比べ、編集方法がとっつきにくいです。)

    自由にページレイアウトを組めるようになるのは、デザインの幅が広がります。

    編集後記

    今回は、「WordPressでページ内にカラム(レイアウト)を作成する方法」についてご紹介しました。

    これでページレイアウトを自由に組むことが出来ますね。

    正直、レイアウトについてはピンときてない方もいると思います。

    以下のような書籍も確認し、ウェブデザインの知識を最低限でいいので取り入れてみてください。

    このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    いちばんよくわかるWebデザインの基本きちんと入門[第2版] レイアウト/配色/写真/タイポグラフィ/最新テクニック
    • Amazon
    • 楽天市場このは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    • Yahooショッピングこのは屋 | WordPressでページ内にカラム(レイアウト)を作成する方法
    Free Web App 読むだけで終わらず、少し触ってみる。

    無料ウェブアプリで、AIと一緒に考え、整理し、作る感覚を試せます。現在地や次に取り組むことを確認してみてください。

    無料ウェブアプリを見る
    Free Template Kit 読んだ内容を、実際の商売に落とし込む。

    ランディングページ、ブログ、広告、メール。AIと一緒に作り、直し、育てるための型を、まずは手元に置いてください。

    無料テンプレート全13種を受け取る
    GET THE KIT
    まずは、型を手に入れる。

    このは屋は、スモールビジネスが外注業者に依存せず、AIと一緒に自分の商売を作れるようになるための学び舎です。記事を読んで終わりにせず、手を動かすための型を受け取ってください。

    ランディングページ・ブログ・広告・メールまで対応 使い方の解説動画付き AIと一緒に磨くための実践テンプレート
    無料テンプレート全13種の内容イメージ

    無料テンプレート全13種を受け取る

    メールアドレスを入力して送信してください。すぐに受け取り方法をご案内します。

    送信後、無料テンプレート全13種の受け取り方法をメールでお送りします。
    ※「@icloud.com、@me.com、@mac.com等のアドレス」および携帯アドレスは、メールが届かない場合があります。できればGmailアドレス、またはパソコンのメールアドレスをご登録ください。入力間違いを防ぐため、コピー&ペーストでの入力をおすすめします。同業者の方のお申し込みはご遠慮ください。
    無料テンプレートを受け取る
    Next Action 読んだら、型で試す。
    無料テンプレートを受け取る
    このは屋

    スモールビジネスが、AIとテンプレートを味方に、自分の商売を自分で育てるための学び舎です。

    About

    このは屋とは 進め方ガイド 会社概要

    Learn

    無料テンプレート セミナー集 無料ウェブアプリ一覧

    Policy

    利用規約 個人情報保護方針 特商法表記

    Contact

    お問合せ よくある質問 トップページ
    © このは屋合同会社
    利用規約 個人情報保護方針 特商法表記 お問合せ