AFFINGER6 ブログ

【アフィンガー6】横スクロールできる表を作成する方法

横スクロールできる表の作成方法
Tomo

AFFINGER6を利用しているけど、「表を作ったら、見づらい」ということありますよね

表の比率を保ったまま、表示できるようにはできないのかと、私も悩みました

そこで今回は、AFFINGER6で横スクロールできる表の作成方法を紹介します

この記事はAFFINGER6を購入し、カスタマイズしまくっている筆者がAFFINGER6の使い方を解説しています

実際に作成した「横スクロールの表」はこんな感じです↓

u-next Netflix dTV Amazon TSUTAYA
U-NEXTのロゴ

U-NEXT

netflix logo

Netflix

dTV logo

dTV

Prime videoのロゴ

Amazon Prime

ツタヤディスカスのロゴ

TSUTAYA DISCAS

【AFFIGNER6】横スクロールできる表の作成方法

Aさん

今まで表が見づらく表示されるのはしょうがないと諦めていました…

では丁寧に説明していくので、これからは見やすい表の作成に努めましょう!!

Tomo

主に今回解説していく手順は以下の3つになります

  • プラグイン「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)」はスクロールテーブルだけでなく様々な機能を追加してくれる優良プラグインです!

Tomo
Cさん

よくおすすめのプラグインで紹介されているものだね!

TinyMCE Advanced」の設定

「TinyMCE Advanced」は基本的に設定は要らなかったのですが、AFFINGER6になってから少し設定が必要になりました

ブロックエディタでは、「TinyMCE Advanced」を利用するとき、「クラシック版の段落」をまず挿入したあと、スタイルというボタンを押すのですが、初期設定では入っていないので設定する必要があります

設定から「TinyMCE Advanced」を開き、ブロックエディタ内の にスタイルボタンを追加します

よくスタイルボタンが表示されない方がいますが、これで解決できます!

Tomo

「TinyMCE Advanced」の設定が終わったら、いよいよ横スクロールできる表を挿入していきます

横スクロールのテーブルを挿入する

まずブロックエディタを開き、「クラシック版の段落」を挿入します

クラシック版の段落を挿入

スタイルボタンから、「テーブル」→「横スクロール」を選択します

テーブルから横スクロールを挿入

今のままでは空欄の状態なので、テーブルボタンを押して「テーブル」を挿入することで表の完成になります

テーブルを挿入

手順のまとめ

  • クラシック版の段落を挿入
  • スタイルボタンから「テーブル」→「横スクロール」を挿入
  • テーブルボタンを押して、表を完成させる

番外編:【AFFINGER6】表をカスタマイズする方法

Aさん

横スクロールの表は作れたけど、なんか寂しいなぁ

じゃあおすすめのカスタマイズを紹介するよ!

Tomo

基本操作:表をカスタマイズする方法

表を選択された状態で、テーブルボタンを押し、セルのプロパティを開く

セルのプロパティを開く

ここで背景の色をカラーグラデーションカラーコードで変更できます

背景色の設定

ヘッダー(項目名など)がある場合には、ヘッダーの設定をするとこんな感じになります↓

  項目A 項目B 項目C 項目D 項目E
           
Tomo

以上で横スクロールできる表の解説は終了になります!ちなみに、幅が狭いとスクロールしなくても表示できるので、幅は指定するといいですよ!

まとめ:もっとカスタマイズしたいならAFFINGER EXを購入しよう

AFFINGER EX

いかがだったでしょうか。今回は横スクロールできる表の作成方法を解説しました。

AFFINGERでは自分がやりたいと思ったことは、なんでもカスタマイズできるのが特徴ですよね

Aさん

もっとカスタマイズをして独自性のあるサイトを作りたい!

と、思った方いませんか?

AFFINGER EXにアップグレードすることで、さらに20種類以上のカスタマイズ要素が追加されます

オリジナリティを高めたいという方まだAFFIGNER6の方はぜひAFFINGER EXをチェックしてみてください!

便利なプラグイン付きのAFFINGERパック!

ACTION PACK3の詳細はこちら

※クリックすると公式HPに遷移します

  • この記事を書いた人

Tomo

生粋のApple信者大学生ブロガー。2021年3月よりブログを開設し、Twitterは開始1ヶ月でフォロワー600人。大学では経営学を専攻し。英語学習歴は2年で、海外経験はないが、TOEICの点数は800点台。

-AFFINGER6, ブログ