AFFINGER BLOG SEO

AFFINGER5(アフィンガー5)テーブルを作る設定と手順【初心者でも簡単です】

2020年11月28日

 

AFFINGER5で「テーブル(表)」を作るにはどうすればいいの?

 

このような疑問にお答えしていきます。

 

本記事の内容

アフィンガー5でテーブル(表)を作る方法

プラグイン「Tiny MCE Advanced」を導入する手順

 

本記事の信頼性

本記事を書いている僕はブログ三ヶ月目で収益5桁を達成した高校生です。

Twitter(hyon1182)でも情報発信を行っています。

 

今回は記事の途中でテーブルを使って見やすい表を作るときの設定方法を解説します。

 

AFFINGER5ではたくさん記事装飾機能がついていますが、表を作るカスタマイズ機能はデフォルトだと使いにくいです。

 

そこで本記事ではプラグイン「Tiny MCE Advanced」を使用したカスタマイズ方法を解説します。

 

本記事の手順に従えば5分程度で手軽に設定できると思いますよ。

 

当サイト使用テーマ

ブログ開設3ヶ月で収益5桁を達成した圧倒的「最適化」テーマ

当サイトからの購入で、通常5000円のタグ管理プラグインと稼ぐサイトの設計図がついてきます。

>>AFFINGER5について詳しく見る

 

 

テーブルを作る手順を解説

 

それではさっそくテーブルを作っていきましょう。

 

まず最初に「Tiny MCE Advanced」をインストールします。

 

このプラグインをインストールすることでWordPressのビジュアルエディターを拡張することができます。

 

注意

Tiny MCE Advancedはクラシックエディター用のプラグインです。

使用するにはClassic editorというもう一つのプラグインもインストールしましょう。

 

WordPressビジュアルエディター

 

上記の画像のようにのようにWordPressの投稿編集画面を拡張できるプラグインです。

 

今回はこのプラグインを使ってテーブルを作っていきます。

 

エディターについてはWordPress公式HPで詳しく説明されているので参考にしてください。

 

プラグインを導入する

AFFINGER5管理→『プラグイン』→『新規追加』の順にクリックします。

 

 

上記のような画面が出てくるのでプラグインをインストールしましょう。

 

 

インストールができたら設定画面の『旧エディター』を選択します。

 

 

エディターメニューを有効化して、自分が使いたいボタンをドラッグして移動させます。

 

これで記事投稿の際に手間がかからなくなるのでとても便利です。

 

投稿画面からテーブルボタンを選択

 

次はテーブルを実際に作ります。

 

まずは編集画面にあるテーブルボタンをクリックしましょう。

 

 

すると上記のようにセルを選択する画面が出てくるので自分が好みの枠に調整します。

 

これでテーブルが完成できました。

 

テーブルのカスタマイズ

それでは次にテーブルのカスタマイズ方法について見ていきましょう。

 

カスタマイズできること

  • セルの結合
  • 文字の装飾とセルの背景色
  • セルの余白

 

ひとつずつやり方を解説しますね。

 

セルを結合する

 

まずはセルを結合する方法を紹介します。

 

商品名商品A商品B
値段1,980円1,980円
発売元A社B社

 

例えば上記のような表を作るとき、値段がどちらの商品も同じなのでセルを結合します。

 

まずは結合したい部分をセンタリングします。

 

 

次に『テーブルボタン』→『セル』→『セルの結合』の順に選択しましょう。

 

 

完成後のイメージはこのようになります。

 

商品名商品A商品B
値段1,980円
発売元A社B社

 

これでセルの結合は完成です。

 

文字の装飾とセルの背景

 

次はテーブルの文字の色を変えたり背景職を変えるカスタマイズについて見ていきましょう。

 

背景色を変更する

 それではテーブルの背景色を変更していきましょう。

 

まずは背景色を変更したいセルをセンタリングします。

 

 

センタリングできたら、『テーブルボタン』→『表のプロパティ』→『高度な設定』に進みます。

 

 

背景色はあまり派手にしすぎずに青色などを選ぶと良いと思いますよ。

 

テーブルの文字色を変更する

 

 

文字色を変更するときは『テキスト色ボタン』から変更します。

 

より細かく色を設定したいときはカスタムをするのがおすすめです。

 

 

このようにカラーコードで色を選択することもできます。

 

おすすめ文字色

  • 青色:#0000ff
  • 黒色:#333333

 

このあたりのカラーコードを使用するのがおすすめです。

 

同じ黒色でも、少し灰色に近い色にすることで落ち着いた印象を出せますよ。

 

セルの余白

 

最後にセルとセルの間の感覚を設定する方法を紹介したいと思います。

 

『テーブルボタン』→『表のプロパティ』→『一般』の順にクリックしてください。

 

 

セルの余白の設定はだいたい60pxにしておくとちょうどいいと思います。

 

例えば3×3でテーブルを作った場合一つのセルのスペースを50pxにしたら高さは50×3の150pxです。

 

 

最後に

 

今回はAFFINGER5でテーブルを作る方法について解説しました。

 

だれでも簡単に設定できるので、ぜひ設定してみてください。

 

 

表などを効果的に用いることでユーザビリティを向上できるので、工夫を加えていきましょう。

 

本記事の内容はここまでです。

 

参考記事>>多すぎると危険。WordPressおすすめプラグインを7つ厳選

参考記事>>ブログ初心者でも登録できるおすすめASPを10個紹介

-AFFINGER, BLOG, SEO

© 2021 HYON BLOG Powered by AFFINGER5