WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【Tips】 Elementor (エレメンター)で 表 を作る。

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
thumbnail_table

Elementor ( エレメンター )で 表 を作る

価格表や商品一覧など、「表」の表現は色々な場面で活躍します。しかし、PCで見る場合やスマホで見る場合でサイズが異なる為、崩れたり、綺麗に表示されない場合があります。 Elementor  ( エレメンター )で 表 を作る方法をご紹介!

表を作る方法は色々ありますが、まずは Elementor ( エレメンター )だけで表を作る方法からご紹介!

 

<2019.10.23 更新>
この記事ではElementorだけで表を作る方法を紹介しておりますが、それは1つの方法であって、他にもたくさん作り方があります。HTMLで簡単に作れる方法も記事で紹介しておりますので、こちらも参考にして頂けたらと思います。

Elementorで表(table) を作る。Ver2.0

カラムを利用した表の作成

とりあえず作ってみたので、ご覧下さい。Elementorだけで作った表です。カラムのボーダーと背景、セレクタのパディングなどを組み合わせて表を作ってみました。慣れれば5分程度で作れてしまいます。

<PCビュー>
table_pc

<モバイルビュー>
table_sp

①どんな表を作るか考える

いきなりElementorで作りはじめると後々面倒になる事が多いので、ある程度の設計図やイメージは用意した方が良いと思います。例えば、4列で作り初めて1列の行を上に置きたいと思った場合、セレクタを多様する必要があり、表をテンプレート化して他のページに使いたい場合などは面倒になります。(極力1セクション内で表を作る事をおすすめします)

ちょおっt

おじさん
おじさん
ちょっと何言ってるか分からない・・・(ぼそっ)

table_ng

上の図は、項目Aと項目Bの2列1行の上に新たに1列1行を入れたいと思い、InnerSection(インナーセクション)を挿入しようとしても、項目Aのカラム内に入ってしまい、行を追加する事が出来ません。

②セクション=行、カラム=列

今回は最初にご覧頂いた表を作ってみたいと思います。

1行目は2列なので、section追加時に

section_select

2カラム(列)これを選択し、次にセクションの設定をします。
section_setting
コンテンツの幅は表全体の幅を決定します(これは後でも大丈夫です)。カラムのすき間は「すき間なし」を選びます。すき間があるとカラムどうしにすき間が出来て表になりません。

次に見出しを入れて行きます。中身の文言はいくらでも後から編集出来ますので、適当に名付けしておきましょう。
headline_to_column

③行の追加

次の行を作ります。セクションを追加して行を増やす方法もあるのですが、あとあとコントロールしづらいので、なるべく1セクションに収まる方法を前提に考えていきます。そこで、インナーセクションを使い、行を追加して行きます。
innersection

インナーセクションとは、セクションの中にセクションを入れたい場合に使います。これを使いこなすと何かと便利なので、これを気に覚えちゃいましょう!
innersection

少しわかりづらいですが、上の画像は「項目名①」の見出しウィジェットが入っているカラムにインナーセクションを入れた状態です。「項目名①」とインナーセクションの間に微妙な余白があるので、カラムを選択し編集画面にします。

columnselect_widgetspace

カラムの編集画面>レイアウト>ウィジェットスペースをゼロにする事で、カラム内のウィジェットの余白をなくす事が出来ます。そして、最初のセクション(行)作成時同様に、適当に見出しウィジェットを入れ、適当にコンテンツを入れておきます。
widget_headline_in

④枠線の設定

いよいよ、枠線を付けていきます。枠線はカラムのボーダーを使っていきます。セクションのボーダーでも良いのですが、セクションは行全体に枠線が付いてしまうので、カラムのボーダーで枠線をつける事をおすすめします。

boarder1

枠線を付けたいカラムを選択し、スタイルのボーダーを開きます。その中のボーダータイプを選択します。ボーダータイプは線の種類です。(直線・二重線・点線など)次に線の太さ(=線)を設定します。あとは好みですが線の色も設定出来ます。

次は、表の中の罫線を追加していきます。ここで注意が必要なのはエクセルとは少し異なる点です。エクセルの様に枠線を単純につけると下の画像の様に、線が重なってしまい、太くなってしまいます。boarder2
エクセルと違い、隣接部分を1つのカラムとして認識しないからです。

なんだか分からなくなってきたぞ・・・
おじさん
おじさん

す、すみ、ません・・・エクセルは隣接する部分は1つの境界線として判断されるのですが、Elementorは表計算ツールではない為、1つのカラムは1つのカラムとして認識しています。なので、下の様な設定をします。

columnsetting_boarder

重なってしまう左の縦の線と、下の線を無くす設定にしてあげます。手順は先ほどのボーダー設定と同じです。枠線を付けたいカラムを選択し、スタイルのボーダーを開きます。ボーダータイプを選択したら、リンクを解除します。幅の一番右にあるチェーンの様なアイコンを切ります。(リンクを切る事で上下左右個別に数値を設定する事が出来ます)そして、不要な左の線と下の線は「0」にし、必要な上の線と右の線を外枠と同じ「5」に設定します。

同様に金額が書かれているカラムにも線を付けてみます。

table_sample2

ここで注意は、先ほどと同様に不要な線を「0」に設定する事です。色わけして見てみましょう!
boarderset2
大外の枠(灰色)は上下左右全て幅5に設定
りんごの枠(ピンク)は左と下を「0」に設定
金額の枠(緑)は上だけ「5」それ以外は「0」に設定します。
※色を分けるとピンクと緑の境がおかしいですが、同一色であれば先ほどの画像の様に、気になりません。

⑤デザインを整える

これで1つのブロックが完成しました。あとはコピー&貼り付けで行を足していけばOKなのですが、この時点で複製してしまうとデザイン調整が面倒になりますので、1つのブロックが完成したらデザインもある程度設定しましょう。

tabledesign