top of page
ホームページ作成 Web Aqua
執筆者の写真日向 凛

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

更新日:6月12日

Wix を含めたCMSの弱点の一つに、表を作りづらいことがあげられます。

「テーブルマスター」という Wix アプリはあるのですが、これも一長一短。

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


※コードのコピペができない不具合を修正しました。



Wix で表を作る3つの方法



 

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


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


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

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

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


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

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

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

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

  • 表示がやや重い

  • 表の枠線が一部表示されないことがある


YouTube

【表作成】Wixエディタでテーブルマスターアプリを使って表組みを作成する方法


 

Wix エディタ「リピーター」で表を作る ★おすすめ


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


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

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

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


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

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

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


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

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

  • 表示が少し重い

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


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

テーブルでは、データベースと接続して使います。筆者はまだ使ったことがありません。

 

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


セル結合もレスポンシブにもできるため、筆者がもっとも気に入っている作り方です。

ただ、セキュリティの観点から、iframeの埋め込み、つまりセルの中のテキストを検索エンジンに拾ってもらえない仕様になっています。


これさえなければ、表作成はHTML埋め込み一択なのですが…辛いところです。


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


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

  • レスポンシブにできる

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


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

  • セルの中のテキストを検索エンジンに拾ってもらえない(残念…)

  • 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が一番自由度が高いですが、SEO的に残念です。


こうなると、コンテンツを「本当に表組みにする必要があるのか?」を検討することも必要かも知れません。別の見せ方があるなら、無理して表組みにしなくてもいいですね。


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

タグ:

閲覧数:17,968回
bottom of page