AFFINGER６を利用しているけど、「表を作ったら、見づらい」ということありますよね
表の比率を保ったまま、表示できるようにはできないのかと、私も悩みました
そこで今回は、AFFINGER６で横スクロールできる表の作成方法を紹介します
この記事はAFFINGER6を購入し、カスタマイズしまくっている筆者がAFFINGER6の使い方を解説しています
実際に作成した「横スクロールの表」はこんな感じです↓
| u-next | Netflix | dTV | Amazon | TSUTAYA |
 U-NEXT |
 Netflix |
 dTV |
 Amazon Prime |
 TSUTAYA DISCAS |
目次
【AFFIGNER6】横スクロールできる表の作成方法
今まで表が見づらく表示されるのはしょうがないと諦めていました…
では丁寧に説明していくので、これからは見やすい表の作成に努めましょう！！
主に今回解説していく手順は以下の３つになります
- プラグイン「Advanced Editor Tools」をインストール
- 「Advanced Editor Tools」の設定
- 横スクロールのテーブルを挿入する
プラグイン「Advanced Editor Tools」をインストール
まずは「Advanced Editor Tools」というプラグインが必要になります
WordPressのプラグイン追加の画面から「Advanced Editor Tools」と検索してダウンロードしてください
ダウンロードが完了したら有効化をし、次は「Advanced Editor Tools（TinyMCE Advanced）」の設定に移ります
ちなみに、この「Advanced Editor Tools（TinyMCE Advanced）」はスクロールテーブルだけでなく様々な機能を追加してくれる優良プラグインです！
よくおすすめのプラグインで紹介されているものだね！
「TinyMCE Advanced」の設定
「TinyMCE Advanced」は基本的に設定は要らなかったのですが、AFFINGER６になってから少し設定が必要になりました
ブロックエディタでは、「TinyMCE Advanced」を利用するとき、「クラシック版の段落」をまず挿入したあと、スタイルというボタンを押すのですが、初期設定では入っていないので設定する必要があります
設定から「TinyMCE Advanced」を開き、ブロックエディタ内の にスタイルボタンを追加します
よくスタイルボタンが表示されない方がいますが、これで解決できます！
「TinyMCE Advanced」の設定が終わったら、いよいよ横スクロールできる表を挿入していきます
横スクロールのテーブルを挿入する
まずブロックエディタを開き、「クラシック版の段落」を挿入します
スタイルボタンから、「テーブル」→「横スクロール」を選択します
今のままでは空欄の状態なので、テーブルボタンを押して「テーブル」を挿入することで表の完成になります
手順のまとめ
- クラシック版の段落を挿入
- スタイルボタンから「テーブル」→「横スクロール」を挿入
- テーブルボタンを押して、表を完成させる
番外編：【AFFINGER6】表をカスタマイズする方法
横スクロールの表は作れたけど、なんか寂しいなぁ
じゃあおすすめのカスタマイズを紹介するよ！
基本操作：表をカスタマイズする方法
表を選択された状態で、テーブルボタンを押し、セルのプロパティを開く
ここで背景の色をカラーグラデーションかカラーコードで変更できます
ヘッダー（項目名など）がある場合には、ヘッダーの設定をするとこんな感じになります↓
| 項目A | 項目B | 項目C | 項目D | 項目E | |
|---|---|---|---|---|---|
以上で横スクロールできる表の解説は終了になります！ちなみに、幅が狭いとスクロールしなくても表示できるので、幅は指定するといいですよ！
まとめ：もっとカスタマイズしたいならAFFINGER EXを購入しよう
いかがだったでしょうか。今回は横スクロールできる表の作成方法を解説しました。
AFFINGERでは自分がやりたいと思ったことは、なんでもカスタマイズできるのが特徴ですよね
もっとカスタマイズをして独自性のあるサイトを作りたい！
と、思った方いませんか？
AFFINGER EXにアップグレードすることで、さらに20種類以上のカスタマイズ要素が追加されます
オリジナリティを高めたいという方、まだAFFIGNER６の方はぜひAFFINGER EXをチェックしてみてください！
便利なプラグイン付きのAFFINGERパック！
※クリックすると公式HPに遷移します
