内容をスキップ

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

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

ElementorプラグインPowerPackで、CSVを読み込んで表を作成する

Home » Web制作 » Elementor動画講座 » ElementorプラグインPowerPackで、CSVを読み込んで表を作成する

CSVを読み込んで表を作成する

CSVを読み込んで表を作成する

今回はElementorのプラグイン、PowerPackのtableウィジェットを使用し、CSVインポートで簡単に表を作成します。作成するサンプルは下記の2点です。

CSVインポートで表作成 サンプル(1)

見出し 見出し1 見出し2 見出し4
内容A 内容B 内容C 内容D
内容E 内容F 内容G 内容H

CSVインポートで表作成 サンプル(2)

項目1 内容A 内容B 内容C
項目2 内容D 内容E 内容F

Tableサンプル(1)の作り方

1.tableウィジェットの設置

まず、今回はElementorのプラグインであるPower Packを言うものを使用します。

Power Packが導入されている場合、Elementorのウィジェット項目にtableと入力すると出てくるのでそれを設置します。

 

 

2.CSVファイルを登録できるように設定

次にtableにCSVを読み込めるように設定します。

画像の赤枠の項目のsourceをCSV Fileに変更します。

その後青枠のupload a CSV Fileの+をクリックし登録したいCSVをアップロードします。

3.表の枠線の調整

CSVファイルを読み込ませると、左方向に枠線が付きません。

枠線をつけるために設定を行いましょう。

 

Elementorメニューのタブにstyleタブがあります。

styleタブの中にCellsの項目があるのでそこで設定を行います。

Cellsの項目は表全体に影響を及ぼすものが多いです。

 

赤枠の項目がborder Type(枠線)の設定になるのでsolidに設定、その後すぐ下に青枠の設定項目が出るので、大きさ(width)の設定を行います。今回は1pxで設定。

 

 

 

4.見出しの整列

見出しの整列を行います。

今回は見出しを中央寄せにします。

Elementorメニューのタブにstyleタブの中にあるheader項目から設定を行います。

中央くらい青枠で囲んだにHorizonal Aline(水平方向の設定)があるので、真ん中を選択します。

5.見出しの背景色の設定と内容の整列

次に見出しの背景色を設定します。

Elementorメニューのタブにstyleタブの中にあるheader項目からBackground-Colorから好きな色を設定。

 

次に内容の整列を行います。

Elementorメニューのタブにstyleタブの中にあるCellsから同じように、Horizonal Aline(水平方向の設定)があるので、真ん中を選択します。

 

これで完成です。

Tableサンプル(2)の作り方

1.header項目を隠す

設定方法を簡略化すると共に、左縦1列が見出しになるような表を作成します。

1つ目と同じ用にCSVを設定した後、すぐ下の項目にHide Table Headerがあるのでオンにしましょう。

画像のように1列目が非表示になります。

 

2.見出しの調整と背景色の設定

表のレイアウト調整を行います。

今回は1列目だけに設定を行いますので、Elementorメニュータブのstyleタブの中にあるColumnsから設定を行います。

Background Colorから背景色を設定した後に、widthの設定を%で行います。

今回は15%で設定します。

これで完成です。

 

  • タグの知識がある方には、返ってPowerPackプラグインを使う方が大変ですが、タグを知らなくても表を作成できます。
  • CSVを読み込む形では、結合された表は作成できません。
  • CSVを読み込んで作成した表は、CSVでしか修正できません。元データを無くさないように保存しておきましょう。
BowNow・Elementorニュース
毎月1~2回、BowNowとElementorに関する
新着情報をお届けします。
購読する
New

関連記事

プレゼンテーション

Elementor(エレメンター)とは

記事を読む »
エレメンターの小技 スクロールするスクショ

エレメンター小技(1) スクロールするスクリーンショットの作り方

記事を読む »
FAQスキーマ

WordPress Elementorと構造化マークアップ(FAQリッチリザルト編)

記事を読む »
ボイラープレート

SEOで、タイトルタグに共通で「サイト名」等を表示する必要はあるのか?

記事を読む »
製造業Web制作

製造業 Web制作について

記事を読む »
エレメンター3カラム

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

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

Home » Web制作 » Elementor動画講座 » ElementorプラグインPowerPackで、CSVを読み込んで表を作成する

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
  • メタバース企画
    • メタバースイベント企画
    • 自社企画
      • 絶滅危惧種 山野草と暮らすまち
      • 弊社オフィス
      • メタバース忍者村
      • メタバースで田植え
      • Spatian Town
      • バーチャル花屋
      • オフィス
      • カウンセリングハウス
      • メタバースEXPO
    • Spatialブログ
    • Spatial 開発事例
  • Spatial研修・実験
    • GardenBeeについて
    • Spatialの特長 資料請求
    • メタバース経済圏の可能性を実験するSUSHI DAO
    • YouTube動画
  • Web運用
    • Web活用に対する考え方
    • Web運用について
    • BtoB向けeコマース&メタバース
    • 料金表
    • 実績・事例
    • 知識体系/ツール
      • Google対策(SEO)
      • Ahrefsについて
      • Web制作
      • Elementorについて
      • MAコンサルティング
      • BowNowについて
    • Web人材育成
    • お試し診断
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
    • 動画一覧
    • おもちゃ箱
  • 会社案内
    • MVV
    • 会社概要
    • Q&A