こんにちは！川口市のWEB屋さんTEDASKのToshiです。

今回はお客様の使っているWordPress有料テーマのAFFINGERで、商品比較をする際に横スクロールできるテーブルを作りたいとのことで、ご相談をいただきました。

AFFINGERには横スクロール機能は元々あるのですが、クラシックエディタでしか対応していないのと、スマホサイズで横スクロールが表示されるのでPCでも横スクロールしたいとのことで、今回そのやり方を共有したいと思います。

横スクロールテーブルを作る手順

まずはザックリやり方をまとめます。

で実現できます。

具体的な作成方法

それでは作り方を見ていきます。

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

テーブルを選択して、ブロックオプションが表示されたら「設定」の「表のセル幅を固定」をオフにします。

オプションボタンをクリックして、「グループ化」をクリックします。

再度ブロックオプションをクリックすると、「高度な設定」が表示されるので、その中の「追加CSSクラス」に「scroll-box」と入力します。

内容を埋めていきます。わざと一番下の行の画像を大きくしたり、文字を多めに入れています。この状態で一度プレビューしてみます。

このようにPCでも潰れて表示されてしまいますね。（一応スマホ表示幅の時にはスクロールテーブルになります。）

ただ今回はPC表示でもスクロールテーブルを表示したいのでもう一手間かけます。

オプションメニューから「HTMLとして編集」をクリックします。

<figure>タグを見つけてその中にstyle=”width:800px;”と入力します。

<figure class="wp-block-table" style="width:800px;">

プレビューを見てみるとスクロールバーが表示されているのがわかります。後はテーブルの見た目に応じて幅（800px）を変更してみてください。

作り方は以上になります。

今回はブロックエディタを使ったやり方でスクロールテーブルを紹介しましたが、クラシックエディタブロックを使えば、クラシックエディタが使えるので、その中であればスクロールテーブルが簡単に作れるかと思いますが､PCのスクロールには対応していない可能性もあるので、今回のやり方も参考にしてみてください。

以上「【テーマ】AFFINGERでブロックエディタを使って横スクロールテーブルを作成する方法」でした！