こんにちは、ユキです＾＾
Webサイトの項目によっては、文章で説明するよりも「表」を作って挿入した方が
簡潔で分かりやすかったりするわよね。
ただエクセルやワードを使っての表の作り方は知ってても、Webサイトを作る
ツールであるElementorでの表の作り方が分からないってこともあるんじゃないかしら。
Elementorで表を作ったり、
Elementorで作ってるWebサイトに表を挿入したりする方法はいくつかあるのよ。
そこでElementorでの表の作り方や別で作った表の挿入方法なんかについて、
詳しく見ていくわね。
Elementorでの表の作り方
Elementor自体には表を作るためのツールは備わってないものの
・カラム
・ボーダー
・インナーセクション
などElementorで使える機能を活用することで表を作ることができるのよ。
簡単に言うと、カラムにインナーセクションを配置して、余分な空白を無くし、
ボーダーでカラムやインナーセクションに罫線を入れることで表が作れるわ。
この説明だけで表が作れる人は少ないだろうから、
実際にどうやるか詳しく説明していくわよ。
セクションを追加してカラムを選択
まずElementorの編集画面で、「ウィジェットをここにドラッグ」の項目内にある
「＋」アイコンをクリックしてセクションを追加するの。
セクションを追加すると「構造を選択」という画面が表示されるから、
ここでカラムの数を選択するのよ。
どういった表を作りたいかによってカラムの選択が変わるんだけど、
ここでは横2列・縦3行の表を作る場合を想定して説明するわね。
次に「セクションの編集」で「レイアウト」に進み、
「カラムのすき間」の項目を「すき間なし」にするの。
カラムの間にすき間があると表にならないから、
カラム同士をくっ付けて表みたいに見せるってわけ。
「コンテンツの幅」で表全体の幅が変えられるんだけど、これは表が完成してから、
ページ全体のバランスを考えて変えた方が良いと思うわ。
すき間を無くしてカラム同士をくっ付けたら、それぞれのカラムに見出しか
テキストエディターのウィジェットを配置して表の項目となる文字を入力しておくのね。
文字はもちろんあとで書き換えることができるから、
先に表の体裁だけと整えるんだったら仮の名前なんかを入力しておいても良いわよ。
カラム内にインナーセクションを配置
次はカラム内にインナーセクションを配置していくわ。
Elementorの編集画面で「Inner Section」のウィジェットを選んで、
2つのカラムそれぞれに配置するの。
ここでは1つの項目が2列になる表を作るから、
インナーセクションのカラムも横に2つ並んだものを選んでね。
このままだとインナーセクションの周辺に余分な空白ができて表にならないから、
インナーセクション周辺の余分な空白を無くすわ。
インナーセクションを配置したカラムを選択して、「カラムを編集」→「レイアウト」で
「ウィジェットスペース」の項目の数値を「ゼロ」にするのよ。
カラム内に配置したインナーセクションの周辺に空白が無くなって、
表のような体裁を作ることができるってわけ。
カラムに文字を入力したのと同様に、インナーセクションにも見出しや
テキストエディターのウィジェットを配置して文字を入力しておくのね。
（あとで変更できるから仮の文字でOK）
カラムに枠線を付ける
カラムに枠線を付けて、表らしい体裁を整えていくわ。
枠線を付けるカラムを選択して「カラムを編集」→「スタイル」に進み、
「ボーダー」の項目を選ぶの。
「ボーダータイプ」の項目を「直線」にしたら、
枠線の太さを決める「幅」と枠線の色を決める「色」は自由に選んで大丈夫よ。
これでカラム全体に枠線が付いたから、
次はインナーセクションのカラムに枠線を付けて本格的に表らしく仕上げていくのね。
インナーセクションのカラムを選択して「カラムを編集」→「スタイル」で「ボーダー」の
項目を選んで「ボーダータイプ」を直線にするところまではさっきと同じ。
ただそのままだと外側のカラムとインナーセクションのカラムが重なる部分が
二重になって太くなって見た目があまり良くないわ。
だからインナーセクションのカラムのボーダーの項目で、幅の数字を少し変えるの。
幅の項目の一番右側に鎖のようなアイコンがあるから、それをクリックしてリンクを
解除することで幅の数値を変更することができるようになるのね。
外側のカラムや隣のインナーセクションのカラムと重なる部分の数値を「ゼロ」にすると、
カラムの重なる部分の枠線が太くならずに済むの。
（重ならない部分の数値はそのままでOK）
これで表の1部分が完成、あとは表全体を作っていくわ。
完成した部分をコピーして貼り付ける
1項目ずつ同じ作業を繰り返して表全体を完成させるのは大変だから、
完成した1部分をコピーして貼り付けていけば良いのよ。
まず最初に完成させた表の1部分の右側のカラムを削除して、
削除したところに表の1部分が完成した方のカラムをコピーして貼り付けるの。
削除するなら最初から1カラムで良かったんじゃないかと思うかもしれないけど、
最初から1カラムで表の1部分を作ると後で大きさの調整が必要になるわ。
でも最初に2つのカラムを横に並べておいて、その内の1つで表の1部分を作れば、
大きさの調整が要らないから楽なのよ。
右側のカラムにポインタを合わせて右クリックして「削除」を選び、次に表の1部分が
完成した方のカラムにポインタを合わせ右クリックして「複製」を選ぶの。
そして複製された側を選択して「カラムを編集」の「スタイル」の「ボーダー」で、
左側のカラムと重なる部分の幅の数値をゼロにすればOK。
次にインナーセクションを選択して右クリックして「複製」を選択すると、
それぞれの下に項目が追加されるの。
そうすると横2列・縦3列の表ができあがり、あとは必要な分だけ下に項目を追加して、
それぞれの項目に該当する文字や数字を入力すれば表が完成よ。
ちょっと面倒だけど、
この方法なら他のツールを使わずにElementorだけで表が作れるわ。
アドオンを使ってElementorで表を作る
Elementorでの表の作り方にはもう1つ
・Advanced Editor Tools（旧TinyMCE Advanced）
・Table Addons for Elementor
といったいわゆるアドオンを使う方法があるわ。
Elementorにはデフォルトだと表を作るツールが無いから、
そのままだとさっきみたいなちょっと面倒なやり方をしないと表が作れないのよ。
でも「Advanced Editor Tools」などのアドオンを使うと、
Elementorに表を作るためのツールを追加されて、簡単に表が作れるようになるのね。
Advanced Editor Toolsを使ってElementorで表を作る
Advanced Editor Toolsを使っての表の作り方は、
まずWordPressの管理画面で「プラグイン」→「新規追加」に進むの。
画面右側の検索窓に「Advanced Editor Tools」と入力して検索、ヒットしたプラグインの
「今すぐインストール」をクリックして、インストールが完了したら「有効化」をクリック。
これでAdvanced Editor Toolsが有効となり、
Elementorに表を作るためのツールが追加されるのよ。
Elementorの編集画面の「ウィジェットをここにドラッグ」内の「＋」アイコンをクリックして
セクションを追加するわ。
次に「テキストエディター」のウィジェットをドラッグして、追加したセクションにドロップ。
「テキストエディターを編集」の「コンテンツ」内の下の方にある、
ポインタを合わせると「テーブル」と表示される表のようなアイコンをクリックするの。
そうすると横10列、縦10行のマス目が表示されるから、表を作るのに必要な列数と
行数のマス目をドラッグで選択すればセクションに表が貼り付けられるのね。
マス目で選択できるのは横10列、縦10行までだけど、テーブルのメニューの下にある
「列」や「行」を選択すれば列や行を追加することができるわ。
あとはテキストエディターで表の項目に該当する文字や数字を入力すれば、表は完成よ。
Advanced Editor Toolsで作った表を編集する
Advanced Editor Toolsを使ってElementorで作った表をそのまま使っても良いし、
編集することも可能だわ。
「テキストエディターを編集」で表のセルを選択して、
ポインタを合わせるとテーブルと表示されるアイコンをクリック。
「セル」→「セルのプロパティ」に進んで、
「幅」と「高さ」に数値を入力すると選択したセルの幅と高さを変更できるの。
ちなみにセルの幅と高さは、「テキストエディターを編集」内でセルの枠線にポインタを
合わせてドラッグして上下左右に動かすことでも変えられるのね。
また「横配置」「縦配置」では、選択したセルに入力されてる文字や数字を上下左右に
寄せたり中央にしたりできるのよ。
さらに「セルのプロパティ」で「高度な設定」を選択すると、
セルの「枠線の色」や「背景の色」も変えられるわ。
セルの編集は１つずつでもできるし、「テキストエディターを編集」でドラッグで
複数セルを選択すれば、複数のセルを1度に編集することも可能よ。
Advanced Editor Toolsを使うと、
ワードで表を作るような感覚でElementorで表が作れるのね。
最初に紹介したカラムやインナーセクションなんかを使う作り方と比べると、
手間もかからずに簡単に表が作れるわ。
Table Addons for Elementorを使ってElementorで表を作る
先のAdvanced Editor Toolsはテキストエディターに表作成のツールを追加して、
ワードのような感覚で表が作れたわ。
次の「Table Addons for Elementor」は、
表を作るためのウィジェットをElementorに追加してくれるの。
そのためAdvanced Editor Toolsに比べると表の作り方にクセがあって、
人によってはちょっと作りにくいと感じるかもしれないわね。
多少使いにくいとしても、
最初に紹介した方法よりはElementorで表を作るのが簡単になるはずよ。
セクションにウィジェットを追加する要領で表が作れる
Table Addons for Elementorを使うと、
セクションに画像などのウィジェットを配置するのと同じ要領で表が作れるのよ。
まずElementorの編集画面で、「ウィジェットをここにドラッグ」の「＋」アイコンを
クリックして新しいセクションを追加するの。
そうしたら「エレメント」の中に見出しや画像などと一緒に並んでいる「Table」の
ウィジェットをドラッグ、追加したセクションにドロップするのね。
Table Addons for Elementorのデフォルトだと、横に「TableHeader」2列・縦に「TableData」2行の表がElementorの編集画面に追加されるわ。
表の行を増やしたい場合は、「Table Data」の1を選択して、「Tableを編集」の
「コンテンツ」内にある「Table Body」で「New Row」にチェックを入れればOK。
そうするとTable Data1と2の下にそれぞれ「Table Data3」と「Table Data4」が
追加されるのよ。
列を追加したい場合も同様で、Table Headerのセルを選択して、
「Tableを編集」の「コンテンツ」内にある「Table Header」で「New Row」に
チェック入れると列が追加されるわ。
あとは見出しや項目のセルに文字や数字を入力すれば表の完成よ。
Table Addons for Elementorなら表にリンクや画像を貼り付けることも可能
Table Addons for Elementorを使うと、
表の中にリンクや画像を貼り付けることもできるのよ。
もちろん最初の方法でも表のセルにリンクや画像は貼り付けられけど、
Advanced Editor Toolsだと表の中にリンクや画像は貼り付けられないわ。
Advanced Editor Toolsは、Elementorのウィジェットの1つであるテキストエディターに
表を作るためのツールを追加するものなの。
要するにテキストエディターの1つの機能として表が作れるだけだから、
リンクや画像を貼り付けるのは難しいのね。
でもTable Addons for ElementorはElementorに表を作るためのTableウィジェットを
追加するから、表の中にリンクや画像が貼り付けられるってわけ。
ただし、Table Addons for Elementorで表の中にリンクや画像を貼り付けようと思ったら、
「HTMLタグ」を使わないといけないわ。
簡単に言うと、表の中にリンクや画像を貼り付けようと思ったら、
別途プログラミングコードを書かないとダメってことよ。
簡単なものでも良いからプログラミングコードが書けるならともかく、
一切書けないあるいはプログラミングコード自体分からないという場合は、
表の中にリンクや画像は貼り付けられないと思っておいた方が良いかもしれないわ。
エクセルやワードで作った表をElementorで使う
Elementorでの表の作り方が分からない人でも、
エクセルやワードでの表の作り方なら知ってることってあるんじゃないかしら。
それならエクセルやワードで表を作っておいて、
それをElementorでWebページを作る際に貼り付けちゃえば良いのよ。
ただ、表に限らずエクセルやワードで作ったものをそのままElementorでは
使えないのよねぇ。
だからエクセルやワードで作った表を画像として保存して、
Elementorに画像として貼り付けることになるのね。
エクセルやワードで作った表を画像として保存するには
エクセルやワードで作った表をElementorで使えるようにするには、まず表を
・JPEG
・PNG
といった形式に変換して保存しないといけないのよ。
エクセルで作った表は他のソフトウェアを使わなくても画像として保存できるんだけど、
ワードで作った表は他のソフトウェアを使わないと画像として保存できないわ。
その代わり他のソフトウェアを使った方が簡単に画像として保存できるから、
簡単だと思う方でエクセルやワードの表を画像化すればOKよ。
エクセルの表を画像として保存
エクセルで作った表を他のソフトウェアを使わずに画像化するには、
まずエクセルでWebページに載せたい表を作るの。
完成した表全体を選択してコピー、そしてエクセルに「シート2」を作って、
そこにコピーした表を図として貼り付けるのよ。
画面上部のツールバーの「ホーム」内にある「貼り付け」の下矢印をクリックして、
「その他の貼り付けオプション」にある図として貼り付けるアイコンをクリック。
これでエクセルのシート2に、
エクセルのシート1で作った表が図として貼り付けられるわ。
そしてシート2に図として貼り付けた表を再度コピーして、シート2の表の下に
貼り付けるんだけど、今度は「貼り付け」の下矢印をクリックして「形式を選択して
貼り付け」を選ぶのね。
そして「PNG」もしくは「JPEG」を選択して貼り付ければOK、
何ならPNGとJPEGをそれぞれ選んで2つ貼り付けておいても良いわよ。
表を画像として貼り付けたシートを普通に保存したら、エクセルでの作業は終了。
エクセルのファイルをzip化
表を画像として貼り付けて保存したエクセルのファイルを、次はzip化するの。
zip化と言っても別に難しい作業じゃなくて、
保存したエクセルファイルの拡張子を「.xlsx」から「.zip」に変更するだけ。
例えば表を画像として貼り付けて保存したエクセルファイルが「hyou.xlsx」だとすると、
そのファイルを右クリックして「名前の変更」で「hyou.zip」に変えれば良いのよ。
拡張子を変えようとすると「ファイルが見られなく可能性があります」といったような
メッセージが出るんだけど、怖がらずに変更してね。
もし不安なら、
拡張子を変更する前にファイルのコピーを取っておけば良いんじゃないかしら。
zip化したファイルから画像として保存した表を取り出す
エクセルファイルをzip化したら、画像として保存した表だけを取り出すわ。
通常zip化したファイルは解凍するんだけど、
ここでは解凍せずに普通にファイルを開くようにダブルクリックするのよ。
zipファイルをダブルクリックすると、ファイルの中身が階層になったフォルダ構成として
表示されるから、まず「xl」を選んで、次に「media」を選んでね。
そしてmediaフォルダ内の「種類」がPNGファイルもしくはJPEGファイルとなっている
ものを選択して右クリックからコピー、デスクトップなどに貼り付ければ
画像ファイル化した表だけを取り出すことができるの。
あとは取り出しやすい場所に取り出したファイルを入れれば、
エクセルで作った表をElementorで使う準備は完了よ。
ワードで作った表を画像として保存
ワードで作った表を画像として保存には「AdobeReader」というソフトウェアが
必要になるから、まずはパソコンにAdobeReaderをインストールしておいてね。
Webページで使いたい表をワードで作ったら、画面上部のツールバーで「ファイル」を
選び、「エクスポート」→「PDF/XPSの作成」へと進むのよ。
保存先に取り出しやすい場所に指定して、
「発行後にファイルを開く」のチェックを外して「発行」をクリック。
これで表を作ったワードファイルがPDFファイルに変換されたから、
ワードでの作業はここまで、そのまま保存してワードを終了してOKよ。
AdobeReaderでスナップショットを撮る
次はAdobeReaderでPDFファイルを開いて、
ワードで作った表のスナップショットを撮るわ。
まずさっき保存したPDFファイルを右クリックして、「プログラムから開く」→
「AdobeReader」と選択すると、AdobeReaderでPDFファイルが開けるの。
AdobeReaderでPDFファイルを開いたら、画面上部のツールバーから「編集」→
「スナップショット」を選び、表が書いてあるページ全体が選択されるようにドラッグ。
「選択した領域がコピーされました」と表示されれば「OK」をクリックして、
AdobeReaderを終了させるのね。
ペイントでスナップショットを撮ったPDFファイルを画像ファイル化
AdobeReaderでスナップショットを撮ったPDFファイルを、
今度はペイントを使って画像ファイル化するのよ。
まずペイントを起動して、画面上部のツールバーにある「貼り付け」をクリックすると、
さっき撮ったスナップショットがペイントの編集画面に貼り付けられるわ。
表の周辺に余分な空白がある場合は、
「トリミング」で余計な部分をカットしておくと良いわよ。
余計な部分をトリミングでカットしたら、ツールバーの「ファイル」をクリックして
「名前を付けて保存」→「PNG画像」もしくは「JPEG画像」を選択。
あとは取り出しやすい場所を選んで「保存」をクリックすれば、
ワードで作った表を画像ファイルとして保存することができるのね。
画像ファイルとして保存した表をElementorで使う
エクセルやワードで作った表を画像ファイルとして保存したら、
最後にElementorで作成するWebページに貼り付けるのよ。
Elementorの編集画面で、「ウィジェットをここにドラッグ」の「＋」アイコンをクリックして
セクションを追加、追加したセクションに画像ウィジェットを配置するの。
画面左側の「画像を選択」の下にある「Choose Your Image」と書いてある
グレーのエリアをクリックすると「メディアを挿入」という画面が表示されるわ。
画面上部のタブを「ファイルをアップロード」にして、
PNGやJPEGの形式で保存したエクセルやワードで作った表を選択、
画面右下の「メディアを挿入」をクリックすればOK。
これでElementorの編集画面にエクセルやワードで作った表を挿入することができるわ。
最初に紹介した方法やアドオンを使う方法と比べると、エクセルやワードで作った表を
Elementorで使えるようにするのはハッキリ言ってかなり面倒よ。
また表を編集するのにも手間がかかるから、
あまりおすすめできるElementorの表の作り方ではないわね。
でもエクセルやワードの方が表を作りやすいというのであれば、
試してみても良いんじゃないかしら。
まとめ
Elementorでの表の作り方や別で作った表の貼り付け方について詳しく紹介したわ。
使いやすい作り方を選べば良いんだけど、
私としてはアドオンを使った作り方がおすすめよ。
何より表を作るのにあまり手間がかからないし、
Webページを公開してから表を編集するのも比較的簡単なの。
今後Elementorに表作成ツールが標準装備されることがあるかもしれないけど、
現状では先に紹介したような作り方しかないわ。
だから手間がかかるかからないに拘らずに、
自分のやりやすい方法でElementorで表を作ってみてね。
