SWELLでテーブル（表）のセル幅を自由に変える方法

※当サイトにはプロモーションが含まれています。

クライアント

SWELLで作ったサイトの、この表の２列目の幅をもう少し狭くしてくれ！

にゃテック

おけまるだにゃ。

ワードプレス（WordPress）テーマの「SWELL（スウェル）」には、テーブル幅を調整する機能はあるのですが、２列目、３列目、４列目･･･と、それぞれの列（カラム）ごとにテーブル幅を調整することはできません。

そのため、１、２列目の文章が短く、３列目が長い場合、下記のようなテーブルとなってしまいます。

SWELL｜テーブル

にゃのらいと

３列目の幅をもう少し広くしたいにゃ。

確認した限り、このセル幅を調整できる機能はSWELLには見当たらなかったので、テーブル（表）の横幅を自由に変更するJavaScriptを作成してみました。

なお、検証に使用したSWELLの環境は以下のとおりです。

ワードプレス環境

SWELLバージョン：2.14
WordPressバージョン：6.8.x
PHPバージョン：8.2.x
サーバー：エックスサーバー

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます

この記事の目次

テーブル（表）の横幅を自由に変更するカスタマイズ

テーブル（表）の横幅を自由に変更するカスタマイズ

今回、作成したswellのテーブル（表）のセルの横幅を自由に変更するカスタマイズは、JavaScriptを使用します。

そのため、他の設定内容と競合しないように、テーブル設定 > テーブル1列目の横幅 の設定は空欄にしておきます。

また、「各列で最低限維持する幅」の設定もオフにしておきます。

①クラスを付与する

まずは、テーブルを作成します。

テーブルを作成したら、その親ブロックを選択して、高度な設定 > 追加 CSS クラス の箇所に以下のクラスを付与します。

nyastom-table-1

テーブルのデザインを「ストライプ」や「シンプル」、「二重線」などにしていた場合は、予め追加CSSが記載されているので、半角スペースで区切って、nyastom-table-1を記載します。

②JavaScriptについて

テーブル（表）の横幅を自由に変更するJavaScriptです。

document.addEventListener("DOMContentLoaded", function () {

// テーブルごとの幅設定（列数に合わせて配列指定）
const tableSettings = {
"nyastom-table-1": [10, 20, 70], // 3列の例
"nyastom-table-2": [20, 30, 30, 20], // 4列の例
"nyastom-table-3": [15, 15, 20, 20, 30], // 5列の例
};

// 設定を1つずつ適用
Object.keys(tableSettings).forEach(className => {
const widths = tableSettings[className];
document.querySelectorAll(`figure.${className} table`).forEach(table => {
const firstRow = table.querySelector("tr");
if (!firstRow) return;
const cols = firstRow.children.length;
if (cols !== widths.length) return; // 列数と設定が一致する場合のみ適用

// 各列に幅を割り当てる
for (let i = 0; i < cols; i++) {
table.querySelectorAll("tr").forEach(row => {
if (row.children[i]) {
row.children[i].style.width = widths[i] + "%";
}
});
}
});
});
});

にゃテック

上記のJavaScriptについて説明します。

テーブルごとの幅設定

テーブルごとの幅の設定は、下記の箇所でおこなっています。

"nyastom-table-1": [10, 20, 70], // 3列の例
"nyastom-table-2": [20, 30, 30, 20], // 4列の例
"nyastom-table-3": [15, 15, 20, 20, 30], // 5列の例

[10, 20, 70]という箇所で、１列目の幅が10%、２列目の幅が20%、３列目の幅が70%になるように設定をしています。

つまり、nyastom-table-1というクラスを付与すると、１列目の幅が10%、２列目の幅が20%、３列目の幅が70%のテーブルになります。

もちろん、この数値は変更可能なので、[10, 10, 80]とすれば、１，２列目が10％、３列目の幅が70%になります。

同じページに複数のテーブルを記載したい場合

たとえば、

１つ目のテーブルが、３列で「１列目10%、２列目20%、３列目70%」
２つ目のテーブルが、３列で「１列目50%、２列目40%、３列目10%」

の場合は、下記のように記載します。

"nyastom-table-1": [10, 20, 70],
"nyastom-table-2": [50, 40, 10],

そして、それぞれのクラスnyastom-table-1、nyastom-table-2を適用したいテーブルの追加 CSS クラスに記載します。

JavaScriptを記載する箇所

JavaScriptは、投稿ページ（固定ページ）の下方にある「カスタムCSS & JS」欄に記載します。

SWELL｜カスタムCSS & JS

そうすることで、このテーブル幅の変更はそのページだけに適用され、他のページで競合する心配がありません。

にゃのらいと

セルの幅を調整して、すべての行が１行になったにゃ。

SWELLで横幅を調整したテーブル

にゃテック

なお、数値は全て半角で記載する必要があるから気を付けるにゃ

補足

このようなJavaScriptを使用しなくても、カスタムHTMLから、width=”30%”のように記載することで調整することも可能です。

SWELL｜カスタムHTML

ただし、そうすると、このテーブルは「ビジュアル編集」に戻すことが出来なくなります。

にゃテック

そのため、ビジュアル編集のまま、テーブルのセル幅を調整できるJavaScriptを作成しました。

特定のページに記載したCSSやJavaScriptは、プラグインの「Simple Post Notes」を使ってメモを残しておくと管理がしやすいと思います。

WordPressの記事にメモを残すなら「Simple Post Notes」が便利！
https://best-item.work/wordpress/plugin-simple-notes/
記事の修正内容や注意事項、またはSEO対策（キーワードのメモ等）など、後から記事に手を加えたいときには、メモ機能があると非常に便利です。今回はそんな機能を実現してくれる、ワードプレス（WordPress）のプラグイン「 …