絞れば、出てくる、アイディア。

Elementor無料版でタブとアコーディオンの中に表を作る方法

Elementor無料版でタブとアコーディオンの中に表を作る方法

Elementorのタブやアコーディオンウィジェットは、中にコンテナを配置することはできませんが、テキストエディタを工夫して、表を作成することができます。

今回は、まず初めにタブやアコーディオンウィジェットについて簡単に紹介した後に、実際にどのように表を作成するかを紹介します!

プラグインを使用せずに、表を作ることができます!

1. タブウィジェット・アコーディオンウィジェットとは

固定ページ、または投稿ページの編集画面での左側「ウィジェット一覧」から、「タブ」と「アコーディオン」を設置したい場所にドラッグ&ドロップすることでウィジェットを追加できます。

Elementorには、タブウィジェットアコーディオンウィジェット無料版にも標準で装備されています。

固定ページ、または投稿ページ編集画面の左側「ウィジェット一覧」から、「タブ」「アコーディオン」を設置したい場所にドラッグ&ドロップすることでウィジェットを追加できます。

◇タブウィジェット

タブウィジェットをを挿入すると、このような画面が出てきます。
画面左側「タブを編集の画面で、タブの中テキスト見出しを編集することができます。

↑このようなタブを作ることができます!

◇アコーディオンウィジェット

アコーディオンウィジェットをを挿入すると、このような画面が出てきます。

画面左側の「アコーディオンを編集」の画面で、アコーディオンの中の見出しテキストを編集することができます。

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

やっとそれはでき上がった。そして軽く跳りあがる心を制しながら、その城壁の頂きに恐る恐る檸檬を据えつけた。そしてそれは上出来だった。

↑このようなアコーディオンを作ることができます!

2. タブ・アコーディオンウィジェットの中に表を作る方法

今回は↓のようなタブの中に表を作成する方法を紹介します。
(今回はタブで説明しますが、アコーディオンでも同様の方法で表を作成できます)

タブ(アコーディオン)コンテンツテキストエディターに、HTMLを書いて表を作成します。
では、具体的な方法を紹介します!

(コピペで使えるテキストを用意していますので、簡単にできます!)

固定ページまたは投稿の編集ページで、タブウィジェット(もしくはアコーディオンウィジェット)を設置したい箇所に配置します。 「タブを編集」から「コンテンツ」を選択し、編集したいタブ項目をクリックしてタブの中のコンテンツを編集できるようにします。(アコーディオンでも同様)

↑固定ページまたは投稿の編集ページで、タブウィジェット(もしくはアコーディオンウィジェット)を設置したい箇所に配置します。

「タブを編集」から「コンテンツ」を選択し、編集したいタブ項目をクリックしてタブの中のコンテンツ編集できるようにします。(アコーディオンでも同様)

「コンテンツ」の編集箇所で、「ビジュアル」ではなく「テキスト」をクリックします。

そうすると、下の編集箇所黒の背景に白い文字に変化します。

テキストの編集画面にHTMLを書き込みます。

テキスト編集画面の中に、下記のコードをコピーして貼り付けます。

<table border=”1″>
<tbody>
<tr>
<th>レモンの名前</th>
<th>原産地</th>
<th>特徴</th>
</tr>
<tr>
<td>エウレカレモン
(Eureka Lemon)</td>
<td>カリフォルニア州、アメリカ合衆国</td>
<td>エウレカレモンは一般的なレモンで、明るい黄色の果皮と酸味の強い果汁が特徴です。
比較的小さな種があり、多くの用途に適しています。</td>
</tr>
<tr>
<td>リスボンレモン(Lisbon Lemon)</td>
<td>ポルトガル</td>
<td>リスボンレモンはエウレカレモンに似ていますが、果実がやや大きく、皮の表面は滑らかです。酸味があり、料理や飲み物に広く使用されます。</td>
</tr>
</tbody>
</table>

<table border=”1″>数字で、表の罫線の太さを変更できます。数字を大きくすれば、罫線は太くなります。

<th>で囲まれている文字は、1行目の見出しになります。
<td>で囲まれている文字は、見出しに対する内容を記入します。

例えば、列を4列にしたい場合は、下記のように<th>と<td>を増やすことで列を増やすことができます。

<table border=”1″>
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

行を増やしたい場合は、<td>が含まれている<tr>から</tr>までのかたまり増やしていく事で行をいくらでも増やすことができます。

※<th>のかたまりは見出し=1行目なので<td>が含まれるかたまりをコピペで増やしていきます。

<table border=”1″>
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<th>と</th>の間に見出しを、<td>と</td>の間にその内容を入れる事で、表を作ることができます

3. 表のスタイルを調整する

タブ(アコーディオン)の中に表を作成したら、枠線の太さタイトル(「レモンの種類」や「ミカンの種類」のところ)、コンテンツ文字の色フォントを調整します。

タブを編集の画面から、「スタイル」を選択して設定できます。

◇この方法のデメリット😭

今回紹介した方法では、表の列ごとの背景の色や、それぞれの枠の大きさの調節などは、CSS(スタイルシート)を追加で作業する必要があります。

細かな表のカスタマイズ方法の紹介記事は、ただいま準備中です。
ぜひweblemonをチェックしていただけたら嬉しいです!

まとめ🍋

今回は、Elementor無料版でプラグインを使用せずにタブウィジェット、アコーディオンウィジェットの中に表を作成する方法を紹介しました。

無料で、簡単に表を作成することができるので、ぜひ今回の記事で紹介したコードをコピペして、使ってみてください!

Elementorでタブやアコーディオンの中に画像を表示させる方法は、こちら↓の記事をぜひご覧ください👀