ブログの運営方法

【AFFINGER5】WordPressブログで「きれいな表」を作る方法

2020年11月30日

WordPressできれいな表を作る方法をご紹介します。

Advanced Editor Tools というプラグインを入れればきれいな表を作れますよ。

AFFINGER5には表を作る機能はないの?
AFFINGER5の場合もプラグインを入れる必要がありますよ。

タグを設定すれば、スマホ画面でスクロール表示させられます。

ポイント

  • Advanced Editor Toolsをインストールしましょう。
  • Advanced Editor Tools でエディタを拡張できます。
  • 表を塗りつぶしたり、スクロール設定したりできます。

 

この記事では、Advanced Editor Tools を使って表を作る方法を解説していきます。

表の塗りつぶし、スマホ画面でスクロールなどを設定できます。

 

※今ならYOYAN BLOG限定特典付きです。

✔購入手順

AFFINGER5の購入手順を知りたい方は、アフィンガー5の購入手順と初期設定【すぐカスタマイズできる】をご覧ください。

 

表を作る方法

アフィンガー5で表を作るにはプラグインが必要です。

Advanced Editor Tools というプラグインをインストールしましょう。

表を塗りつぶしたり、スクロール設定したりできますよ。

 

 

プラグインを入れる

Advanced Editor Tools というプラグインをインストールしましょう。

 

Advanced Editor Tools は、以前はTinyMCE Advancedという名前でした。

なので、「TinyMCE Advanced」と検索しても見つけられますよ。

 

Advanced Editor Tools は、Wordpressのエディタを拡張するプラグインでして、表のほかにも様々な機能があります。

 

 

Advanced Editor Tools をインストールする

WordPressのプラグイン新規追加画面で、「Advanced Editor Tools」を検索してインストール→有効化(activate)しましょう。

表を作る1

 

 

 

Advanced Editor Tools を設定する

インストール出来たら、設定→Advanced Editor Tools →旧エディター(TinyMCE)を開きます。

表を作る2

 

 

 

下記の赤枠が、表を作成するツールです。

表を作る5

 

 

 

参考

✔その他の機能

Advanced Editor Toolsでは、その他にもエディタ機能を追加できます。

以下の赤枠から、ツールバーにドロップすれば機能を増やせるので、好きな機能を選びましょう。

表を作る6

 

 

 

表をつくる

投稿画面で、表が作れるようになりました。

表の色を変える、サイズを変えるなど細かな設定ができますよ。

 

 

表を挿入

ツールバーから「テーブル」を選択して、作りたい表のサイズを選びましょう。

表を作る7

 

 

以下のように表が挿入できました。

表を作る8

 

 

表の塗りつぶし

塗りつぶしたい部分を選択します。

表を作る9

 

 

この状態で、「セルのプロパティ」を選択します。

表を作る10

 

 

「高度な設定」を選ぶと背景色を選択できます。

表を作る11

 

 

これで、選択した部分を塗りつぶせました。

表を作る12

 

 

以下が作成した表です。

サンプル サンプル サンプル サンプル サンプル サンプル
a
b
c

 

 

 

スクロール設定

スマホ画面でスクロールさせましょう。

<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。

投稿画面をテキストに変更して、表を<div class="scroll-box"></div>で囲みます。

以下の画像では、<div class="scroll-box">だけが見えますが、表の最後を</div>で閉じています。

表を作る14

先ほどの表をスマホで見るとスクロールできるようになりました。

 

サンプル サンプル サンプル サンプル サンプル サンプル
a
b
c

 

スマホ画面で見るとスクロール出来ますよ。

 

まとめ

  • アフィンガー5で表を作るには、Advanced Editor Tools というプラグインをインストールしましょう。
  • Advanced Editor Tools は、Wordpressのエディタを拡張するプラグインでして、表のほかにも様々な機能があります。
  • 表を塗りつぶしたり、スクロール設定したりと細かく設定できますよ。

 

AFINGER5の購入手順は、アフィンガー5の購入手順と初期設定【すぐカスタマイズできる】にまとめています。

※今ならYOYAN BLOG限定特典付きです。

 

 

-ブログの運営方法
-

© 2021 YOYAN BLOG Powered by AFFINGER5