テーブルを埋め、列を並べ、ボーダーをスタイリングしたが、まだ何かがおかしいかもしれない。その "何か "とは、多くの場合アライメントです。水平方向のアライメントが適切でないと、たとえきれいなレイアウトであっても、ぎこちなく感じたり、読みにくく感じたりすることがあります。各セル内のコンテンツの位置は、左、中央、右のいずれであっても、表の印象を完全に変えることができます。
セル内のコンテンツが正しく並ぶと、レイアウト全体が洗練された印象になる。プラン名は中央揃えの方が見栄えが良い。価格は右寄せにすると読みやすく感じる。このような小さなディテールが整っていないと、うまくデザインされた表でもバランスが悪く感じられることがある。
このガイドでは、WordPressでテーブルの内容を水平に整列させる方法をご紹介します。いくつかの簡単なステップで、テーブルをより構造的に見やすく、読みやすくすることができます。
方法1：WordPressのデフォルトテーブルブロックを使う
WordPressのデフォルトのテーブルブロックは、水平方向のアライメントをサポートしていますが、テーブル全体のレベルでのみです。つまり、すべてのセルに対して一度にアライメントを設定することはできますが、個々のセルに対して異なるアライメントを設定することはできません。
デフォルトのエディタを使って水平アライメントを適用するには、以下の手順に従ってください。
ステップ1：投稿やページにテーブルブロックを追加する
ブロック・インサータの「＋」アイコンを使い、テーブルを検索し、投稿やページにブロックを挿入します。必要に応じて行数と列数を設定してください。
ステップ2：テーブルにテキストを入力する
各セルにコンテンツを追加します。デフォルトのテーブルブロックでは、テキストしか使用できないことを忘れないでください。
ステップ3：水平アライメントの設定
テーブル内の任意の場所をクリックする。上部のブロック・ツールバーから、整列アイコンを選択する。左揃え、中央揃え、右揃えのいずれかを選択すると、表のすべてのセルに変更が適用されます。
方法2：Tablebergプラグインを使用する
テーブルのレイアウトをもっとコントロールしたい場合は テーブルバーグ プラグインを使うのがよいだろう。このプラグインを使えば、各セル内に複数の種類のコンテンツを挿入し、それぞれ個別に水平方向の配置を調整することができます。
コンテンツをTablebergに合わせるには、以下の手順に従ってください。
ステップ1：Tablebergプラグインのインストールと有効化
WordPressのダッシュボードにログインし、プラグイン → 新規追加で「Tableberg」を検索し、今すぐインストールをクリックし、続いて有効化をクリックします。
ステップ2：Tablebergブロックの挿入
まず、既存のページ/投稿に移動するか、新しいものを作成し、ブロックインサータの「+」アイコンをクリックして、Tablebergを検索し、ブロックを挿入します。お好きな行数と列数を選んでください。
Sステップ 3: 各セルにコンテンツを追加する
任意のセル内をクリックし、コンテンツの追加を開始します。ブロックインサーター「+」アイコンを使って、様々なタイプのコンテンツを追加できます。Tablebergでは、画像、ボタン、テキスト、アイコンなどのリッチコンテンツを使用できます。デフォルトでは、コンテンツは左に水平に配置されます。
ステップ4：各アイテムのアライメントを調整する
整列を適用したい特定のセルの枠をクリックする。ブロック・ツールバーが表示されたら、「Align Cell Children」オプションを使用して、左揃え、中央揃え、または右揃えに設定します。これにより、そのセル内のすべてのコンテンツの位置が調整されます。
さらに、セル内の各コンテンツには、そのブロックをクリックするとツールバーに表示される独自の配置設定も用意されている。これにより、セル内に配置される各要素を完全にコントロールすることができます。
結論
基本的なテーブルを作成する場合でも、完全にスタイル化されたレイアウトを作成する場合でも、水平方向の整列はコンテンツを意図的かつ整理されたものに見せるための鍵となります。WordPressのデフォルトのテーブルブロックでは、すべてのセルを一度に素早く整列させることができますが、個別のコントロールが必要な場合は、Tablebergが便利です。Tablebergを使えば、各項目ごとに整列させることができ、コンテンツを効果的に伝えるために必要な明瞭さとバランスをテーブルに与えることができます。最終的には、いくつかの簡単な配置の選択が、大まかなレイアウトと実際に機能するテーブルの違いを生むことがあります。
こちらもお読みください：
