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

Cocoonテーマは、WordPressで人気の高い無料テーマで、SEOに強く、デザインも豊富です。

しかし、テーブルの行間隔（行の余白）をカスタマイズしたい場合、デフォルトでは細かな調整が難しいことがあります。

この記事では、Cocoonテーマを使っている場合に、テーブルの行間隔を調整する方法を紹介します。

方法
1. テーブルの行間隔を調整するCSSの追加
2. Cocoonテーマでテーブル全体のデザインを調整
行間隔の調整で注意するポイント
1. レスポンシブ対応
2. テーブルのデザインがテーマに依存している場合
まとめ

方法

ここからCocoonテーマでテーブルの行間隔を調整する方法を詳しく見ていきます。

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

WordPressでテーブルの行間隔を変更するには、追加CSSカスタムCSSを追加する必要があります。

Cocoonテーマでは、カスタムCSSの追加は非常に簡単です。

Cocoonのカスタマイズ画面でCSSを追加

Step 1: WordPressの管理画面にログイン
まず、WordPressの管理画面にログインします。

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

Step 3: 「追加CSS」を選択
カスタマイズ画面に移動したら、下にスクロールして「追加CSS」セクションを選択します。

Step 4: CSSを追加する
以下のCSSコードを入力して、テーブルの行間隔を調整します。

/* テーブルの行間隔を調整 */
table {
    border-collapse: separate;
    border-spacing: 0 10px; /* 行間隔を10pxに設定 */
}

/* 追加のスタイル：テーブル内のセルのパディングを調整する */
table td, table th {
    padding: 10px; /* セルの内側余白を10pxに設定 */
}

このCSSコードは、テーブルの行間隔を10pxに設定し、セル内の余白（パディング）も10pxに変更する例です。数値を変更することで、行間隔や余白を自由に調整できます。

Step 5: 変更を公開
CSSを追加したら、「公開」ボタンをクリックして変更を保存します。

特定の記事だけのテーブルをカスタマイズしたい場合、記事の編集画面下のカスタムCSSを使います。

Cocoonテーマでテーブル全体のデザインを調整

Cocoonでは、テーブルのスタイルを細かくカスタマイズすることができます。

行間隔だけでなく、ボーダーや背景色など、テーブル全体の見た目を調整することも可能です。

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

例えば、テーブルのボーダーをカスタマイズしたい場合は、次のようにCSSを追加できます。

/* テーブルのボーダーをカスタマイズ */
table {
    border: 2px solid #ccc; /* テーブル全体に2pxのボーダーを追加 */
}

table td, table th {
    border: 1px solid #ccc; /* 各セルにボーダーを追加 */
}

テーブルの背景色を変更する

テーブルの背景色を変更することで、行間隔と合わせて視覚的に見やすいデザインにすることができます。

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

行間隔の調整で注意するポイント

行間隔の調整で注意するポイントも説明します。

レスポンシブ対応

Cocoonテーマはモバイル対応（レスポンシブデザイン）をサポートしています。

テーブルの行間隔を調整する際に、モバイル表示にも対応させることを考慮しましょう。

例えば、スマホ画面では行間隔やセルの余白を少し小さく設定するのがおすすめです。

/* スマホ表示でのテーブル行間隔調整 */
@media only screen and (max-width: 600px) {
    table {
        border-spacing: 0 5px; /* スマホでは行間隔を5pxに設定 */
    }

    table td, table th {
        padding: 5px; /* スマホではパディングを5pxに設定 */
    }
}