[WordPress]表を横スクロールさせる方法

WordPressのブロックエディタで作成した表や、テーマ内の既存の表を横スクロールさせるには、カスタムCSSを追加するのが最も一般的な方法です。

[推奨]1. カスタムCSSを追加する

この方法は、WordPressの「カスタマイズ」機能を使って、サイト全体または特定の表にスタイルを適用します。

手順

1. WordPress管理画面にログインします。
2. ダッシュボードの左メニューから「外観」 > 「カスタマイズ」 をクリックします。
3. カスタマイザーのサイドバーから「追加CSS」または「カスタムCSS」（テーマによって名称が異なる場合があります）をクリックします。
4. 以下のCSSコードを入力欄に貼り付けます。
   /* WordPress内のテーブルを横スクロール可能にするためのCSS */
/* .wp-block-table はブロックエディタで挿入されたテーブルのラッパーです。 */
/* table はHTMLのテーブル要素そのものです。 */
/* .entry-content や .page-content はテーマによってコンテンツエリアを示すクラスです。 */
.wp-block-table,
.entry-content table,
.page-content table {
    /* テーブルをブロック要素として扱い、幅の制御を可能にします */
    display: block;
    /* 内容が親要素からはみ出した場合に、横方向のスクロールバーを表示します */
    overflow-x: auto;
    /* セル内のテキストが自動的に改行されるのを防ぎ、常に1行で表示されるようにします */
    /* これにより、横スクロールが必要な状況が明確になりますが、 */
    /* 各列の幅が非常に広くなる可能性があるので、デザインとの兼ね合いで調整してください。 */
    white-space: nowrap;
}

/* 特定のテーブルのみに横スクロールを適用したい場合 */
/* スクロールさせたいテーブルブロックの「高度な設定」で「追加CSSクラス」に 'scrollable-table' を追加してください。 */
.scrollable-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
   
5. 入力後、画面上部の「公開」ボタンをクリックして変更を保存します。

コードの解説

• .wp-block-table, .entry-content table, .page-content table: これは、WordPressのブロックエディタで挿入されたテーブルの親要素(.wp-block-table)や、投稿/固定ページコンテンツ内のテーブル(table)にスタイルを適用するためのセレクタです。お使いのテーマによっては、コンテンツエリアのクラス名が異なる場合があります。
• display: block;: 通常、テーブルは特定の表示特性を持っていますが、display: block;を設定することで、一般的なブロック要素として扱い、overflow-xプロパティが正しく機能するようにします。
• overflow-x: auto;: このプロパティが、コンテンツが横方向にはみ出した場合にスクロールバーを表示する主要な役割を担います。コンテンツがコンテナに収まる場合はスクロールバーは表示されません。
• white-space: nowrap;: このプロパティは、テーブル内のテキストが自動的に改行されるのを防ぎます。これにより、表のセルが横に広がり、スクロールが必要な状況がより明確になります。ただし、これにより各列の幅が非常に広くなり、縦に長くなるのを避けるために使用します。

特定のテーブルのみに適用したい場合

もし、サイト内のすべての表ではなく、特定の表のみを横スクロールさせたい場合は、CSSコードの2番目のブロック（.scrollable-table）を利用します。

1. WordPressのブロックエディタで、横スクロールさせたいテーブルブロックを選択します。
2. 右側のサイドバーにある「ブロック」タブをクリックします。
3. 「高度な設定」セクションを展開します。
4. 「追加CSSクラス」の入力欄に scrollable-table と入力します。
5. 投稿または固定ページを更新または公開します。

これで、scrollable-table クラスを付与したテーブルのみが横スクロールするようになります。

2. HTMLを直接編集する方法

特定の表に限定的に適用する場合に選択肢となります。

この方法は、WordPressのブロックエディタでテーブルブロックを選択し、「HTMLとして編集」に切り替えてコードを直接編集します。

手順

1. ブロックエディタでテーブルを選択し、ツールバーの縦三点リーダー（︙）から**「HTMLとして編集」**を選択します。
2. テーブルの<table>タグ全体を<div>タグで囲み、その<div>に直接スタイルを記述します。
   <div style="overflow-x: auto; white-space: nowrap;">
       <table>
           <thead>
               <tr>
                   <th>ヘッダー1</th>
                   <th>ヘッダー2</th>
                   <!– その他のヘッダー –>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>データ1</td>
                   <td>データ2</td>
                   <!– その他のデータ –>
               </tr>
               <!– その他の行 –>
           </tbody>
       </table>
   </div>
   
3. 編集後、ツールバーの「ビジュアル編集」に戻し、投稿または固定ページを更新または公開します。

注意点: この方法は、毎回手動でHTMLを編集する必要があるため、メンテナンス性は低いですが、一時的な利用や、ごく特定の表にのみ適用したい場合に便利です。

3. プラグインを使用する方法

より高度なテーブル管理が必要な場合はプラグインも選択肢となりえます。

TablePressなどのプラグインは、テーブルの作成・管理に特化しており、横スクロール機能も提供しています。

• TablePressを使用する場合、テーブルの編集画面で「テーブル情報」セクションにある「JavaScriptオプション」の「横スクロールを有効化」にチェックを入れるだけで簡単に横スクロールを実装できます。

プラグインの利用を検討するケース:

• HTMLやCSSの知識があまりない場合。
• ソート、フィルタリング、検索など、横スクロール以外の高度なテーブル機能も必要とする場合。
• 多数のテーブルを効率的に管理したい場合。

ただし、プラグインの追加はサイトの読み込み速度に影響を与える可能性があるため、シンプルな横スクロールだけであれば、上記1.のCSSによる方法が最も軽量で推奨されます。

トラブルシューティングのヒント

• キャッシュのクリア: CSSを追加した後は、WordPressのキャッシュプラグインやサーバーのキャッシュをクリアしてください。ブラウザのキャッシュもクリアすると良いでしょう。
• CSSが適用されない場合:

• 入力したCSSセレクタが、お使いのテーマのテーブル構造と一致しているか、ブラウザの開発者ツール（F12キーで開くことが多い）で確認してください。
• 競合する他のCSSがある場合、一時的に!importantを使うことで強制的にスタイルを適用できる場合がありますが、乱用は避けてください。
  overflow-x: auto !important;
  
• 他のプラグインとの競合: テーブル関連のプラグインや、CSSを最適化するプラグインが干渉している可能性があります。一時的にそれらのプラグインを無効にして、問題が解決するか確認してください。

これらの方法で、WordPressの表を横スクロールさせることができます。ぜひお試しください。