top of page

【HTMLコピペ テンプレ付き】Wix エディタで表組みを作成する3つの方法

Wix エディタの弱点の一つに、表組みが思ったように作りづらいことがあります。

「テーブルマスター」という Wix アプリはあるのですが、行の挿入や削除ができなかったり、セルの結合ができなかったりと悩ましい点がいくつかあります。


そこで、Wix で表を作成する方法を3つご紹介します。



Wix エディタで表を作る3つの方法



 

Wix アプリ「テーブルマスター」で表を作る


Wix 公式のアプリ「テーブルマスター」を使うと、手軽に表を作成できます。

ただしいくつかの弱点があるので、注意が必要です。


Wix アプリ「テーブルマスター」のメリット

  • Wix 公式のアプリなので、Wix のサポートを受けることができる

  • 難しい知識なしで表組みが作成できる


Wix アプリ「テーブルマスター」のデメリット

  • 行や列の追加および削除、セルの結合ができない

  • 一行目が強制的に見出しになる

  • セルの余白を調整できない

  • 表示がやや重い



 

Wix エディタ「リスト&グリッド」で表を作る


Wixエディタの[追加]をクリックすると、ストリップ・テキスト・画像とメニューが出てきます。その中の[リスト&グリッド]にある[リピーター]もしくは[テーブル]を使うことで、表のように見せることができます。


リピーターを使って表を作る方法
リピーターを使って表を作る方法

リピーターでは、行を複製して増やすことで表のように使うことができます。

縦の枠線をつけることは難しいですが、デザイン次第では表組み以上に美しく見せることもできます。


「リピーター」ーのメリット

  • テーブルマスターの代替として一番使いやすい

  • 複製で簡単に行を増やせる


「リピーター」のデメリット

  • コンテンツのボリュームにばらつきがあると表示を整えにくくなる

  • 表示がやや重い

  • 縦の枠線を実装しづらい


テーブルを使って表を作る方法
テーブルを使って表を作る方法

テーブルでは、データベースと接続して使います。高度な作業になるため、状況に応じての使い分けが必要です。


 

Wix エディタ「埋め込み」で表を作る


初歩的なHTMLとCSSを使えるなら、この方法も実はおすすめです。

HTMLの作成には、Excelの表を貼り付けてコードを生成できるHTMLジェネレータなどを利用すると便利です。


「HTML埋め込み」ーのメリット

  • レスポンシブにできる

  • セルの結合のある複雑な表組みも実装できる


「HTML埋め込み」のデメリット

  • HTMLとCSSの知識が必要

  • Wixのウェブフォントが使えない


Wixエディタ[ウィジェットの埋め込み]を追加
[ウィジェットの埋め込み]を追加

Wixエディタ HTMLコードを入力
HTMLコードを入力

Wixエディタ HTMLで表が表示されました
HTMLで表が表示されました

セルのサイズは余白(padding)で自動調整させるイメージです。

幅はpxではなく%で指定することで、画面幅に応じて自動的に調整されます。


以下のコードを[ウィジェットの埋め込み]を使ってエディタ上に貼り付け、書き換えてお使いください。


=== 以下コピペ ===


<style>

table , td {

border: 1px solid #595959;

border-collapse: collapse;

}

table {

width: 100%;

}

td {

padding: 8px;

}

</style>

<table>

<tr>

<td>セル1</td>

<td>セル2</td>

<td>セル3</td>

<td>セル4</td>

</tr>

<tr>

<td>セル5</td>

<td>セル6</td>

<td>セル7</td>

<td>セル8</td>

</tr>

<tr>

<td>セル9</td>

<td>セル10</td>

<td>セル11</td>

<td>セル12</td>

</tr>

</table>


=== ここまで ===




まとめ


Wix以外のCMSも表組み機能の実装には苦戦しているようで、結局はHTMLが一番自由度が高そうです。


そもそも、会社概要や製品紹介などのコンテンツを「本当に表組みにする必要があるのか?」を検討し、別の魅力的な見せ方があるなら、無理して表組みにしなくてもいいのかもしれません。


以上、どうぞご参考ください。

タグ:

閲覧数:15,477回

Comments


bottom of page