内容をスキップ

製造業・メーカー企業のコンサルティング、Web制作、BtoBマーケティング

Web活用経営株式会社
  • メタバース企画
    • メタバースイベント企画
    • 自社企画
      • SUSHI DAO
      • 絶滅危惧種 山野草と暮らすまち
      • 弊社オフィス
    • Spatialブログ
    • Spatial 開発事例
  • Spatial研修・実験
    • GardenBeeについて
    • メタバース経済圏の可能性を実験するSUSHI DAO
    • YouTube動画
  • ダウンロード
  • Web運用
    • Web活用に対する考え方
    • Web運用について
    • BtoB向けeコマース&メタバース
    • 料金表
    • 実績・事例
    • 知識体系/ツール
      • Google対策(SEO)
      • Ahrefsについて
      • Web制作
      • Elementorについて
      • MAコンサルティング
      • BowNowについて
    • Web人材育成
    • お試し診断
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
  • 会社案内
    • MVV
    • 会社概要
    • Q&A
お問い合せ
お問い合せ
Web活用経営株式会社

エレメンター小技(3) テキストの内容量が違っても上下が揃う3カラム作成

Home » Web制作 » Elementor動画講座 » エレメンター小技(3) テキストの内容量が違っても上下が揃う3カラム作成

エレメンター3カラム

WordPress Elementorを使って3カラムを作りましょう。3カラムを作るときの問題点としては、「テキストの内容量が違うと、3カラム内の上下が揃わない」ことがあります。下記のサンプルのように、テキスト量が異なっても画像上部とボタン下部が揃う3カラムの作り方です。

サンプル
プレゼンテーション

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Click here
プレゼンテーション

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

Click here
プレゼンテーション

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,

Click here
動画で解説

3カラムの作成

新規セクションを追加し、画像、テキスト、ボタンを挿入します。

3カラム作成

カラムを複製して、3カラムを作成します。

3カラム

テキスト量が異なるように、適当に文章を追加/削除してみます。写真の上部は揃っていますが、ボタンの下部が横並びに揃っていないことが分かります。

ボタンの位置が揃わない3カラム

カラムの編集画面で、「レイアウト」>「垂直方向に整列」から”スペースの間隔”を選択します。すると、ボタンの下部が揃います。でも今度は、テキストの上部が揃わなくなりました。

スペースの間隔

そこで、写真上部に「内部セクション」を挿入します。デフォルトでは2カラムの内部セクションが追加されますので、一つ削除し、残った一つの内部セクションの中に、写真とテキストを移動します。

内部セクションの挿入
内部セクションの追加

内部セクションはデフォルトで持っているマージンやパディングがありますので、それらを0に設定して完成です。画像上部、ボタン下部が横並びにピッタリ揃う3カラムです。

余白、マージンを0に

縦幅を絶対値で指定したり、無理やり改行を入れて揃えてしまうと、スマートフォンで見た時に余計な余白が空いてしまいます。カラムの縦位置を「スペースの間隔」を使って揃えることで、スマホで見たときには余白なく、きれいに見えます。

Elementor 動画講座一覧へ

Elementorに関する記事の更新情報などをお届けしています。ぜひご登録ください↓

  • 製造業ホームページ制作はこちら
BowNow・Elementorニュース
毎月1~2回、BowNowとElementorに関する
新着情報をお届けします。
購読する
New

関連記事

Astra Theme アストラテーマ

WordPressテーマAstraのスターターテンプレートとElementorで見栄えの良いWebサイトを一瞬で作成する

記事を読む »
SEO監査

テクニカルSEO監査ガイド チェックリスト

記事を読む »
画像ボックスのタイトルだけを左寄せにする

エレメンター小技(4) 画像ボックスのタイトルだけを左寄せにする

記事を読む »
プレゼンテーション

Elementor(エレメンター)とは

記事を読む »
SEO

SEO・検索対策について

記事を読む »
SEO改善事例

1年以上、ほとんど集客できなかったWebサイトの問題点を改善した方法~テクニカルSEOの現場から~

記事を読む »
  • Web制作TOP
  • Elementor(エレメンター)とは
  • SEO・検索対策について
  • 製造業 Web制作について
メニュー
  • Web制作TOP
  • Elementor(エレメンター)とは
  • SEO・検索対策について
  • 製造業 Web制作について

Home » Web制作 » Elementor動画講座 » エレメンター小技(3) テキストの内容量が違っても上下が揃う3カラム作成

Elementor
製造業 Web制作について
SEO・検索対策について
Web施策優先度診断
Elementor カテゴリー
  • ElementorとSEO (1)
  • ElementorとWeb制作マネジメント (1)
  • Elementor動画講座 (6)
  • SEO・Google対策 (4)
Elementor 新着記事
CSVを読み込んで表を作成する
ElementorプラグインPowerPackで、CSVを読み込んで表を作成する
2022年9月1日
画像ボックスのタイトルだけを左寄せにする
エレメンター小技(4) 画像ボックスのタイトルだけを左寄せにする
2022年2月4日
エレメンター3カラム
エレメンター小技(3) テキストの内容量が違っても上下が揃う3カラム作成
2022年1月29日
FAQスキーマ
WordPress Elementorと構造化マークアップ(FAQリッチリザルト編)
2022年1月26日
ニュースレター
中小製造業のデジタル戦略
  • バックナンバー
  • BowNow・Elementorニュースはこちら
Web活用経営株式会社

技術に対話を起こし、 より良い世界に貢献する。

BtoB専門 & 中小企業向けの、Webコンサルティング、MAツール導入、Web制作会社です。ものづくり企業がITを活用して営業を強化することを専門としています。

  • コンサルティング
  • Web制作
  • 無料コース
  • 営業DXおもちゃ箱
  • 料金表
  • ウェビナー
  • 会社案内
  • 優先度お試し診断
  • 利用登録
  • ニュースレター
  • お問い合わせ
  • サイトマップ
  • 187-0032 東京都小平市小川町1-2591-18
  • 042-508-2904
  • info@web-keiei.com
  • メタバース企画
    • メタバースイベント企画
    • 自社企画
      • SUSHI DAO
      • 絶滅危惧種 山野草と暮らすまち
      • 弊社オフィス
    • Spatialブログ
    • Spatial 開発事例
  • Spatial研修・実験
    • GardenBeeについて
    • メタバース経済圏の可能性を実験するSUSHI DAO
    • YouTube動画
  • ダウンロード
  • Web運用
    • Web活用に対する考え方
    • Web運用について
    • BtoB向けeコマース&メタバース
    • 料金表
    • 実績・事例
    • 知識体系/ツール
      • Google対策(SEO)
      • Ahrefsについて
      • Web制作
      • Elementorについて
      • MAコンサルティング
      • BowNowについて
    • Web人材育成
    • お試し診断
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
  • 会社案内
    • MVV
    • 会社概要
    • Q&A