Avada テーマ表(Table)エレメントを使用する

WordPress ベストセラーのテーマである Avadaの Avada Builder(以前の名称「Fusion Builder」)は、さまざまな要素が提供されます。 Avada テーマで表(テーブル)を挿入する場合はTableエレメントを使用することができます。

Avada テーマ表(Table)エレメントを使用する

Avadaで表を追加するには、Table要素を利用することができます。 Avada Builderの編集画面で、 Add Element(要素を追加)をクリックして、 Select Element(要素を選択) ウィンドウで Table(表)を選択します。

Avada テーマ表(Table)エレメントを使用する

その後、Tableの設定画面が表示されます。

Avada テーマ表要素

次のようなオプションが提供されます。

  • (①)で表のスタイルを選択します。 Style 1とStyle 2の中から選択が可能です。
  • 行の数 (②)で行数を選択します。
  • 列の数 (③)で熱(カラム)数を選択します。

表は、反応型ではないので、これを考慮して、列の数を指定してください。 下にスクロールして表の内容を入力します。

Avada テーマ表の挿入

[Save](保存) ボタンを押すと、Table要素が追加されます。

スタイル1とスタイル2は、レイアウトが少し異なります。

Avada テーマ表スタイル1
Avada テーマの表:スタイル1
Avada テーマ表スタイル2
Avada テーマの表:スタイル2

スタイル1とスタイル2の両方少し気に入らないでしょう。 スタイルが気に入らない場合は、CSSを使用して調整することができます。

例:

Avada テーマ表スタイル1変形
スタイル1の最初の行のスタイルをCSSで少し変化をズームします。
Avada テーマ表スタイル2変形
スタイル2の最初の行の背景色を変える。

Avada テーマでCSSコードは WordPress 伝言板> Avada > Options>カスタムCSSに追加することができます。

Avada テーマCSSコードを追加する

CSS例:

/* Avada 테마 표 스타일 */
.table-1 table th {
padding: 12px 20px;
font-weight: 600;
}

.table-2 table th {
padding: 12px 20px;
font-weight: 600;
}

.table-2 table thead {
background-color: #1172c1;
}

カスタムCSSコードは、 伝言板>外観>飾る>追加CSS (WordPress バージョンに応じて、 伝言板>テーマのデザイン>ユーザー定義>追加CSS)に追加してもされます。 (※ WordPressの韓国語版では、いくつかのメインメニューの翻訳が最近変更されました。 」WordPress 韓国語翻訳の変更:「テーマデザイン」、「カスタマイズ」「注。)

オンラインDivテーブルジェネレータ

Divにテーブルを作成したい場合 HTML Div Table Generatorのようなオンラインの表ジェネレータを使用することができます。

Diviテーブルジェネレータ

Table / Div 設定でDivタグまたはTableタグを選択することができます。

参考までに反応型Div表例は https://codepen.io/amwill04/pen/QNPpqxで確認することができます。

参照


コメントを残す

*メールアドレスは公開されません。