WordPressを使っている人のほとんどは開発者ではありません。ブロガー、マーケティング担当者、中小企業のオーナーなど、私たちは皆、コードに潜り込むことなく、クリーンでプロフェッショナルなテーブルを作成したいと考えています。WYSIWYGテーブルが違いを生み出すのはそこです。
WYSIWYGとは "What You See Is What You Get "の略。これは、Word文書で作業するときと同じように、最終的な外観を反映した方法でテーブルを作成し、編集することを意味します。デフォルトのテーブル・ブロックでは物足りないという方は、このガイドをご覧ください。
今日は、WYSIWYGテーブルビルダー・プラグインを使って、視覚的に美しい表を作る方法を紹介しよう。表は以下の通り。
WordPressのWYSIWYGテーブルとは何ですか？
WYSIWYGテーブルでは、WordPressエディタ内で直接、視覚的にコンテンツを編集できます。HTMLなし。ショートコードもありません。リアルタイムの結果と直感的なコントロールだけです。
あなたは手に入れる：
-
リロードなしのリアルタイム編集
-
リッチメディアによる柔軟なフォーマット
-
構造のドラッグ＆ドロップ感覚
-
画像、アイコン、ボタンの簡単な統合
技術的なオーバーヘッドなしに、内容豊富なテーブルを構築する最も簡単な方法です。
❌ WordPressのデフォルト・テーブル・ブロックでは不十分な理由
組み込みのテーブル・ブロックは、基本的なレイアウトには適しているが、機能はそこまでだ：
-
行や列のドラッグ＆ドロップは不可
-
ボーダー、間隔、色のカスタマイズは制限されています。
-
セルの結合と分割はできない
-
細胞内のメディアをサポートしない
-
モバイルの反応性の悪さ
もしテーブルがプレーンテキスト以上のものを必要とするなら、すぐに壁にぶつかるだろう。
なぜWYSIWYGテーブルプラグインを選ぶのか？
テーブルデザインの可能性を最大限に引き出すには、以下のようなビジュアルテーブルプラグインが有効です。 テーブルバーグ は賢い選択だ。それはあなたに
-
ビジュアルエディター:見たままに変更できる。
-
ドラッグ・アンド・ドロップ:細胞の再配置は数秒
-
メディア・ブロック:画像、ボタン、アイコン、星の評価の追加
-
カスタムスタイル:セルのパディング、ボーダー、整列、色をコントロールする
-
モバイルフレンドリー:小さい画面でのテーブルの反応を選択する
この種のプラグインは、ブログ記事を編集するのと同じくらい簡単にリッチテーブルをデザインできる。
美しいテーブルを作る
ブロックエディター付き
TablebergでWYSIWYGテーブルを作成する方法
TablebergでWYSIWYGテーブルを作成するには、まずプラグインをインストールする必要があります。
1. Tablebergプラグインをインストールする
こちらへ プラグイン(1) > 新規追加(2), "Tableberg "を検索し(3), インストール(4)をクリックし、続いて有効化(Activate)をクリックします。
2. 新しいテーブルを追加する
テーブルを追加したい投稿またはページを開きます。をクリックする。 プラス（＋）アイコン エディターについて (1). Type テーブルバーグ 検索ボックスに (2).エディタにブロックを追加する (3).
テーブルの列と行の数を設定します。ここでは 3 × 5 をクリックするが、必要に応じて列や行を作成または削除する。をクリックする。 テーブル作成 button at the end.
以下のように、エディターにテーブルが挿入されます。
ステップ3：視覚的にコンテンツを追加する
A.テキストコンテンツの挿入
表のセルにカーソルを置き、好きなようにタイプする。
B.画像を追加する
をクリックして、商品画像を挿入する画像ブロックを挿入します。+「アイコンをクリックしてください。画像をアップロードするか、メディアライブラリから選択することができます。
C.星の評価を追加する
お好みで星評価を追加してください。星の評価は、商品の品質を示すのに最適な方法です。
D.ボタンを追加する
ボタンは、あらゆる製品やサービスを宣伝する効果的な方法です。だから戦略的に配置しよう
ボタンをクリックし、リンクオプションを選択し、リンク先のリンクを入力し、リンク属性を調整します。
右サイドパネルからボタンの調整とカスタマイズができる。
E.アイコンの挿入
アイコンは、どの機能が使用可能で、どの機能が使用不可能かを伝えるために、魅力的な働きをします。アイコンブロックの挿入は、他のブロックと同じです。
F.スタイル付きリストの挿入
Styled Listは、アイコンのある機能セットを同時に追加するのに役立つ、もう一つの必須ブロックです。
さあ、機能を追加しましょう。キーボードの「Enter」キーを押すたびに、新しい機能を追加できます。
エディターの右側にあるStyled Listブロックのカスタマイズ・オプションにアクセスできます。
以下は、カスタマイズせずにTablebergを使って作成したテーブルです。
色、パディング、マージン、リボンを追加しました。以下は、私が行ったカスタマイズの画像です。
以下は、表で使用したカラーコードである。 (ヘッダー色：#f3f3f3、偶数行背景色：#3fad3d63、奇数行背景色：#d1dec8）。
カスタマイズ後の最終バージョンは以下の通り。
製品名 |
キヤノンEOS  $1400 ベスト・オプション |
ルミックスGH6  $1200 |
|---|---|---|
ウェザーシーリング |
||
タッチスクリーンLCD |
||
その他の特徴 |
|
|
WIFI接続 |
満足したら、ページを公開または更新します。視覚的にスタイリングされたテーブルが完成しました。
検討に値する他のYYSIWYGテーブルプラグイン
一方 テーブルバーグ はブロックベースのスムーズなエクスペリエンスを提供するが、あなたのニーズによっては、他にも確かな選択肢がある：
-
WP Table Builder - ドラッグ＆ドロップ、柔軟なコンテンツサポート、すべてのページビルダーをサポートしています。
-
Ninja Tables - 豊富な統合機能と条件ロジック
-
TablePress (拡張機能付き) - 大規模なデータセットに適しています。
それぞれに強みがあるが、TablebergはGutenbergとネイティブに動作するように作られており、視覚的な編集を優先している。
💼 実践的な使用例
WYSIWYGテーブルは次のような用途に最適です：
-
価格比較と機能内訳
-
ボタンとレーティングを備えたアフィリエイト・テーブル
-
チームメンバーのグリッドまたはイベントスケジュール
-
メディアリッチセルを使用した製品カタログ
-
ステップ・バイ・ステップのハウツー
-
長いブログ記事の要約
もしあなたのコンテンツが構造や比較を含むなら、これらの表はそれをより魅力的で有益なものにする。
最終的な感想
見栄えの良い表を作ることは、技術的に難しいことではありません。WYSIWYGプラグイン テーブルバーグ を使えば、コードを一行も触ることなく、コンテンツのスタイルに合ったテーブルを自由にデザインできる。
機能、比較、ダイナミックリストを表示したい場合、Tablebergなら簡単にできます。
Tablebergを試す準備はできていますか？
今すぐTablebergを始めましょう➔。
続きを読む
