WordPressでテーブルの行間隔を調整する方法

Web

2024.10.23

WordPressで作成したテーブルが狭すぎたり、広すぎたりしている場合、行間隔を調整することでテーブルの見やすさを向上させることができます。

しかし、WordPressのビジュアルエディタでは行間隔を直接変更できないため、CSSを利用したカスタマイズが必要です。

この記事では、WordPressでテーブルの行間隔を調整する方法を紹介し、CSSを使った簡単なステップで行間隔をカスタマイズする方法を解説します。

WordPressのテーブル行間隔を調整するためのCSS追加
まとめ

WordPressのテーブル行間隔を調整するためのCSS追加

WordPressのテーブル行間隔を調整するためのCSSを追加することについて詳しく見ていきます。

行間隔を調整する基本CSS

WordPressでテーブルの行間隔を調整するには、CSSの padding や line-height プロパティを使います。

まず、テーブル全体のセル間の余白や行間を設定するCSSを以下に示します。

/* テーブル全体のセルの余白を調整 */
table {
    border-collapse: separate; /* セル間のボーダーを維持 */
    border-spacing: 0 15px; /* 上下の行間隔を15pxに設定 */
}

/* テーブル内のセル (td, th) のパディングを設定 */
table td, table th {
    padding: 10px; /* セル内の余白を10pxに設定 */
    line-height: 1.6; /* 行間を1.6倍に設定 */
}

このコードでは、以下のように行間隔とセル内の余白を設定しています：

border-spacing を使って、テーブルのセル間（行間）のスペースを指定。ここでは15pxの行間を設定。
padding を使って、セル内の余白を調整。これにより、セル内のテキストやコンテンツの周囲にスペースを持たせています。

CSSの追加方法

Step 1: WordPressの管理画面にログイン
WordPressの管理画面にアクセスして、ログインします。

Step 2: 「外観」→「カスタマイズ」を選択
左のメニューから「外観」→「カスタマイズ」をクリックします。

Step 3: 「追加CSS」をクリック
カスタマイズ画面が表示されたら、下の方にスクロールして「追加CSS」を選択します。

Step 4: CSSコードを追加
先ほどのCSSコードを入力エリアに追加し、テーブルの行間隔やセル内の余白を調整します。

Step 5: 「公開」ボタンをクリック
変更が完了したら、右上の「公開」ボタンをクリックして保存します。

特定の記事のリストのみを変更したい場合は、記事編集画面の下にあるカスタムCSSを編集します。

また、テーマのstyle.cssにCSSを追加する方法もあります。

テーブルの特定の部分に行間隔を適用する方法

すべてのテーブルではなく、特定のテーブルに対して行間隔を変更したい場合は、CSSセレクタを使って特定のテーブルをターゲットにすることができます。

クラスやIDを使った特定のテーブルのカスタマイズ

WordPressのテーブルにクラスやIDを指定して、そのテーブルだけにカスタマイズを適用する方法です。

/* クラス名が "custom-table" のテーブルにだけ適用 */
.custom-table {
    border-spacing: 0 20px; /* 行間隔を20pxに設定 */
}

.custom-table td, .custom-table th {
    padding: 12px; /* セルの内側余白を12pxに設定 */
}

上記のコードでは、特定のクラス「custom-table」を持つテーブルに対してのみ行間隔やセルのパディングを適用します。

テーブルにクラスを設定するには、WordPressのエディタでテーブルのHTMLにクラスを追加するか、ショートコードにクラスを指定します。

特定のページや投稿にのみ適用

特定のページや投稿内のテーブルに行間隔を適用する場合は、ページや投稿IDを利用して対象を絞ることができます。

/* 投稿IDが123のページ内にあるテーブルの行間隔を設定 */
.postid-123 table {
    border-spacing: 0 15px; /* 行間隔を15pxに設定 */
}

.postid-123 table td, .postid-123 table th {
    padding: 10px; /* セルの内側余白を10pxに設定 */
}

このコードは、投稿ID「123」のページ内にあるテーブルに対してのみ行間隔を設定します。

テーブルの他のデザイン調整

テーブルの行間隔だけでなく、ボーダーや背景色などのデザインもCSSを使ってカスタマイズすることができます。

テーブルのボーダーを調整する

テーブルの枠線をより目立たせたり、スタイリッシュにしたい場合は、以下のようにボーダーを設定できます。

/* テーブル全体にボーダーを設定 */
table {
    border: 2px solid #ccc;
    border-collapse: collapse;
}

/* 各セルにもボーダーを設定 */
table td, table th {
    border: 1px solid #ddd;
}

テーブルの背景色を調整する

テーブルの行間隔に加えて、背景色を変更することで、より視覚的に見やすいテーブルを作成できます。

/* 偶数行に背景色を付ける */
table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ヘッダーセルに背景色を付ける */
table th {
    background-color: #f0f0f0;
}

レスポンシブ対応のテーブルを作成する

デスクトップとモバイルでは、テーブルの表示が異なる場合があります。

行間隔やセルの余白をデバイスに応じて調整するには、メディアクエリを使用します。

/* デスクトップ用のテーブル */
table {
    border-spacing: 0 15px;
    width: 100%;
}

/* モバイル表示では行間隔と余白を小さく設定 */
@media only screen and (max-width: 600px) {
    table {
        border-spacing: 0 10px;
    }

    table td, table th {
        padding: 8px;
    }
}

このコードでは、画面幅が600px以下の場合（スマートフォンなど）にテーブルの行間隔やセルのパディングを小さく設定しています。