Google chrome（グーグル ク...
続きを読む
Elementorのタブやアコーディオンウィジェットは、中にコンテナを配置することはできませんが、テキストエディタを工夫して、表を作成することができます。
今回は、まず初めにタブやアコーディオンウィジェットについて簡単に紹介した後に、実際にどのように表を作成するかを紹介します！
プラグインを使用せずに、表を作ることができます！
↑Elementorには、タブウィジェットとアコーディオンウィジェットが無料版にも標準で装備されています。
固定ページ、または投稿ページの編集画面の左側「ウィジェット一覧」から、「タブ」と「アコーディオン」を設置したい場所にドラッグ＆ドロップすることでウィジェットを追加できます。
↑タブウィジェットをを挿入すると、このような画面が出てきます。
画面左側の「タブを編集」の画面で、タブの中のテキストや見出しを編集することができます。
↑このようなタブを作ることができます！
↑アコーディオンウィジェットをを挿入すると、このような画面が出てきます。
画面左側の「アコーディオンを編集」の画面で、アコーディオンの中の見出しやテキストを編集することができます。
やっとそれはでき上がった。そして軽く跳りあがる心を制しながら、その城壁の頂きに恐る恐る檸檬を据えつけた。そしてそれは上出来だった。
↑このようなアコーディオンを作ることができます！
今回は↓のようなタブの中に表を作成する方法を紹介します。
（今回はタブで説明しますが、アコーディオンでも同様の方法で表を作成できます）
| レモンの名前 | 原産地 | 特徴 |
|---|---|---|
| エウレカレモン（Eureka Lemon） | アメリカ | エウレカレモンは一般的なレモンで、明るい黄色の果皮と酸味の強い果汁が特徴です。 比較的小さな種があり、多くの用途に適しています。 |
| リスボンレモン（Lisbon Lemon） | ポルトガル | リスボンレモンはエウレカレモンに似ていますが、果実がやや大きく、皮の表面は滑らかです。酸味があり、料理や飲み物に広く使用されます。 |
| ミカンの名前 | 原産地 | 特徴 |
|---|---|---|
| 温州みかん（Wenzhou Mandarin） | 中国 温州市周辺 |
温州みかんは非常に広く知られており、丸い形状で、薄い皮と甘い果肉が特徴です。日本でも広く親しまれている品種の一つです。 |
| サテュマキャット（Satsuma） | 日本（主に鹿児島県） | サテュマキャットは日本原産のミカンで、比較的簡単に剥ける薄皮と、甘みがありながらも酸味のある果肉が特徴です。小ぶりで食べやすいため、子供から大人まで人気があります。 |
| ハニーミュルコット（Honey Murcott） | アメリカ フロリダ州 |
ハニーミュルコットは、みかんとマンダリンのハイブリッドで、甘い蜜のような味わいがあります。果皮は薄く、果肉はジューシーであるため、食べやすく人気があります。この品種は温暖な気候が好まれます。 |
タブ（アコーディオン）のコンテンツのテキストエディターに、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>で囲まれている文字は、１行目の見出しになります。
<td>で囲まれている文字は、見出しに対する内容を記入します。
例えば、列を４列にしたい場合は、下記のように<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>のかたまりは見出し＝１行目なので<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>の間にその内容を入れる事で、表を作ることができます！
↑タブ（アコーディオン）の中に表を作成したら、枠線の太さ、タイトル（「レモンの種類」や「ミカンの種類」のところ）、コンテンツの文字の色やフォントを調整します。
タブを編集の画面から、「スタイル」を選択して設定できます。
今回紹介した方法では、表の列ごとの背景の色や、それぞれの枠の大きさの調節などは、CSS（スタイルシート）を追加で作業する必要があります。
細かな表のカスタマイズ方法の紹介記事は、ただいま準備中です。
ぜひweblemonをチェックしていただけたら嬉しいです！
今回は、Elementor無料版でプラグインを使用せずにタブウィジェット、アコーディオンウィジェットの中に表を作成する方法を紹介しました。
無料で、簡単に表を作成することができるので、ぜひ今回の記事で紹介したコードをコピペして、使ってみてください！
Elementorでタブやアコーディオンの中に画像を表示させる方法は、こちら↓の記事をぜひご覧ください👀
2024-09-08
Sunday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
ブラウザのタブについているマークを「ファ...
続きを読む
