アフィンガー5のテーブル(表)カスタマイズ

アフィンガー
[st-kaiwa3 r]

記事に価格表を入れたいけどやりかたがわからない

[/st-kaiwa3] [st-kaiwa4 r]

アフィンガーのテーブルの自由度が低いな〜

[/st-kaiwa4] [st-kaiwa5 r]

デフォルトのエディター(グーテンベルク)では、テーブルのセルの結合ができない?

[/st-kaiwa5]

AFFINGER5は、高機能で使いやすいワードプレスのテーマです。

[st-kaiwa1]

使いやすいだけではなく、ユーザーが見やすい表のプラグインを教えよう!

[/st-kaiwa1]

テーブルは、料金比較など様々な場面使用用途が多いので、ここで覚えて、記事に厚みを持たせましょう!

今回の記事でわかること

  • アフィンガー5のテーブルの使い方
  • アフィンガー5のテーブルよりも使いやすいテーブルプラグイン TinyMCE Advancedの紹介
  • TinyMCE Advanced の使い方

AFFINGER PACK3(WING対応)

スポンサーリンク
スポンサーリンク

アフィンガー5のテーブルを使ってみよう

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

アフィンガー5のテーブルと書いていますが、正確には、ワードプレスで記事を書くためのエディターであるグーテンベルクに用意されているデフォルトのテーブルとなります。

[/st-mybox]

投稿⇒新規追加で記事投稿画面を開いてください。

画面右の【+】を押して、ブロックからテーブルを探します。

①検索窓の「ブロックの検索」部分に、「テーブル」と入力すると②テーブルが表示されますのでクリックしてください。

テーブル作成画面が現れます。

上図の「カラム数」「行数」を、任意で入力し、「表を作成」をクリックしてください。

今回は、「カラム数」4、「行数」3で入力し、最後に「表を作成」ボタンをクリックします。

入力通りのテーブルが作成できました。

実際に、テーブルにデータを入力してみました。

商品会社 アマゾン 楽天 ヤフー
サンプル1 12,000 11,000 11,200
サンプル2 11,230 11,560 12,000
サンプル3 9,800 1,1000 9,300

右側の「表の設定」から、一番上のセルを見出しにしたり、色をつけたりすることは可能です。

これだけでも、表を見せるだけであれば問題はありませんが、やはり物足りないという方も多いみたいですので、テーブル作成に最適なプラグインをご紹介します。

スポンサーリンク

テーブルプラグイン【TinyMCE Advanced】でアフィンガー5のブログを更に進化させよう

TinyMCE Advancedとは?

テーブルプラグインで一番人気のTinyMCE Advancedのインストールの仕方や使い方をご紹介していきます。

TinyMCE Advancedは、グーテンベルクのデフォルトのテーブルに比べて自由度が高いので、テーブルを使用する頻度が高い方は必ず入れておくようにしましょう。

ダッシュボード⇒プラグイン⇒新規追加

からインストールをしましょう!

インストール完了後は、「有効化」をクリックしてください!

TinyMCE Advancedの使い方

ダッシュボード⇒投稿⇒新規投稿

から、記事作成画面に入り、クラシックエディターを表示させます。

もし、表示されていなければ、検索窓に「クラシック」と入力するか、下の「すべて表示」を押して、そこから選択してください。

クラシックエディターが表示されたら、テーブルを作成していきましょう。

テーブルは、赤枠のA、Bのいずれからでも作成可能です。お好きな方を選択してください。

今回は、Bで進めていきます。

Bを選択、テーブル⇒縦横のテーブル数をここで選択します。

すると、画面にテーブルが表示されます。

セルの結合

便利な機能「セルの結合」のやりかたをご紹介。

  1. 結合したいセルをマウスで選択
  2. テーブルボタンを選択
  3. 「セル」⇒セルの結合

選択した2つのセルがしっかりと結合されました。

実際に入力したテーブル例です。

色を変えてみました。

  A社 B社 C社 D社 E社 F社 G社 H社
商品1 10,000円
商品2 20,000 18,000 19,000 19,500 19,800 20,000
商品3 19,800 20,000 19,300 20,000 18,900 20,100 20,000
[st-kaiwa1]

一目見ただけで、デフォルトとの違いがわかるじゃろ。

[/st-kaiwa1]

TinyMCE Advancedは、非常に使いやすいテーブルプラグインです。

アフィリエイトブログでは、料金比較表は頻繁に使用すると思いますので、ぜひインストールをしておきましょう。

TinyMCE Advancedで作ったテーブルがずれてしまう【AFFINGER5】

テーブルの横列が広くなってしまうと、スマホで見たときに、画面が左右にずれてしまうことがあります。

実際に横づれしてカクカクするページと、その修正方法を以下のページから確認することができます。

アフィンガー5の横づれするテーブル

アフィンガー5の横づれを修正したテーブル

※このページのテーブルは修正済です

タイトルとURLをコピーしました