アフィンガー6で表(テーブル)の作り方を解説します

アフィンガー6で、テーブルを作ってみましょう。

ブログを頑張っている人、これから頑張ろうとしている人、

記事に表を入れるとSEOに良いと、どこかで見聞きしました。

そう言えば、検索上位のサイトって

表(テーブル)を作るのって、難しくないです。

なので
積極的に表(テーブル)を取り入れましょう。

時々、横スクロールする表を見かけますが、とてもよくてきた機能
だと思います。

アフィンガー6ならでの機能ですね。

表(テーブル)を作るのは少し面倒な部分があります。

一番簡単なのはエクセルで表を作成して
スクショしてブログに貼り付ける。

しかし、これじゃ意味がありません。

面倒な事をやるからこそ意味があります。

その前にAdvanced Editor Tools (旧名 TinyMCE Advanced)というプラグインを
ワードプレスにインストールしてください。

Advanced Editor Toolsのインストールのやり方

ワードプレスのダッシュボートから

プラグイン ＞ 新規追加

右上のキーワード検索窓に

"Advanced Editor Tools"と入れます。

下記のプラグインが現れるので、クリックすると
インストールが始まります。

アフィンガー6で表(テーブル)の作り方

・ワードプレスの記事を入力する場面で、マウスを動かしてプラスマークを探します。

・クラシック版の段落を選びます。

・「テーブル」かアイコンを選びます。(どちらでも良いです)

・この段階で作りたい表の何行にするか何列にするか決めます。

・マウス操作でマス目をなぞって、列数と行数が決めます。

・今回は3×4のテーブルにします。

マウスのワンクリックで以下のような表ができあがります。

WordPressテーマ 「ACTION（AFFINGER6）」

表の背景に色を付けていきましょう。

・色を付けたい表の中のセルをマウスでドラックしていきます。

・テーブルアイコンからセルのプロパティを選びます。

・セルのプロパティから高度な設定を選びます。

・四角の部分をクリックします。

 

・色あいのバーで何色系か決めます。
・色の濃さを決めます。
・色コードが出て、OKで色が決定されます。

・背景色が出来上がりました。

テーブルの横スクロールをやりましょう

スマートフォンで記事をよんでいると、
時々、横スクロールする表が出てきませんか？

表は横長サイズになってしまう場合がおおいので、横スクロールする表は字体も
崩れないので、見やすいですね。

アフィンガー6は、簡単に横スクロールする表をつくる事ができます。

ポイントは表を作る前に設定が必要になる事です。

 

準備として

プラグインのAdvanced Editor Tools (旧名 TinyMCE Advanced)設定が必要になります。

それでは、このプラグインを設定していきましょう。

まずは、

ワードプレスのダッシュボードにいったん戻ります。

【プラグイン】＞【インストール済プラグイン】

 

・「スタイル」のタグを、上の方にドラックしてください。
・「変更を保存」

・クラシック版の段落を表示させます。
・「スタイルタグ」から一番下のテーブル＞横スクロールするを選びます。

・四角い枠が現れます。
・その中に、表を作ると横スクロール型ができます。

この段階ではスマートフォンで確認すると確認できます。

PCでも、横スクロールをしたい場合

PCでも横スクロールしたい場合は少しだけhtmlの操作が必要になります。

・表の中をどこでも良いのでクリックします。
・HTMLとして編集を選びます。

・プログラムが現れます。
・一番上の行に図のようにboxの後に"「半角スペースを空けてpc」と入力します。

出来上がりはこんな感じになります。

元に戻すには、ビジュアル編集を選びます。

・PCでプレビューすると横スクロールが完成しているのがわかります。

どうでしょうか。

少し手間がかかりますが、慣れてくれば
どうってことないと感じるハズです。

WordPressテーマ 「ACTION（AFFINGER6）」