AFFINGER

AFFINGER5で表の枠線の色を変更する方法【記事ごとに可】

表の枠線の色変更

AFFINGER5で表の枠線の色を変更する方法を紹介しています。

今回紹介する方法では、AFFINGER5デフォルトの機能は使わないので記事ごとに異なるデザインの表が作成できます。

 

こんな人のお役に立てる記事です。

小豆
AFFINGER5で作ったデフォルトの表の見た目がどうも気に入らない。
で、表の枠線の色を変えてみようと思ったけど全然うまくできない。
誰か、やり方を教えて。

AFFINGER5で表の枠線の色を変更する方法

まずは「デフォルトの表」と「枠線の色を変更した表」を比べてみて下さい。

デフォルトの表

  A B C
テキスト 100円 200円 300円
テキスト 1,000円 2,000円 3,000円
テキスト × ×

枠線の色を変更した表

  A B C
テキスト 100円 200円 300円
テキスト 1,000円 2,000円 3,000円
テキスト × ×

わかりやすいように表の枠線を赤に設定してみました。

今回紹介する方法を使えば、こんな感じで表の枠線の色を簡単に変更することができます。

小豆
枠線の色は確かに変更できているけど・・。
普通に黒の方が見た目が良いような気がする。
確かにこの表の見た目はイマイチだね。
枠線の色を変えたスタイリッシュな表を記事後半で作ってみたから、デザインはそっちの方が参考になるかも。
大福

 

ちなみにAFFINGER5で表の枠線の色を変更しようとすると、こんな感じになってしまうんですよね。

  A B C
テキスト 100円 200円 300円
テキスト 1,000円 2,000円 3,000円
テキスト × ×

なぜか設定した色が表の一部だけ反映されないんです。

これ、どうやらAFFINGERに設定されているのスタイルシートと関係しているみたい・・。

ただ、今回紹介する方法には難しい知識や操作は一切不要!

めちゃくちゃ簡単にできるので安心してください。

 

AFFINGER5で表の枠線の色を変える方法は2つある

AFFINGER5を使用している場合、表の枠線の色を変更する方法は2つあります。

枠線の色を変更する方法

  1. AFFINGERのカスタマイズ機能を使って変更する
  2. プラグイン「TinyMCE Advanced」側で変更する

 

両者とも方法は解説していきますが、僕のおすすめは圧倒的にの方法。

というものの方法で変更を行った場合は、ブログ内で使用されているすべての表に設定が反映されてしまいます。

逆にの方法は、記事ごとに自分好みのデザインの表を作ることが可能なので便利です。

AFFINGER5で表の枠線の色を変更する手順

枠線の色を変更する方法

  1. AFFINGERのカスタマイズ機能を使って変更する
  2. プラグイン「TinyMCE Advanced」側で変更する

大福
おすすめは、記事ごとにデザインを変えられるの方法だよ。
 

❶ AFFINGERのカスタマイズ機能を使って変更する

AFFINGER5のカスタマイズ機能を使用すれば、ブログ内の表のカスタマイズを一括して行えます。

 

WordPressメニュー

WordPressメニュー外観カスタマイズオプションカラーtable(表)

表のボーダー色

表のボーダー色でブログ内すべての表の枠線の色を一括設定できます。

 

❷ プラグイン「TinyMCE Advanced」側で変更する

TinyMCE Advanced

こちらの方法は、WordPress無料プラグイン「TinyMCE Advanced」を使用しています。

TinyMCE Advancedは、表の作成や記事の装飾などをボタン一つで行えるすごく便利なプラグインです。

大福
インストールしておけば、ブログ作りの効率が上がること間違いなし!

 

手順は簡単3ステップです。

手順

  1. 表を作成
  2. 表のプロパティで枠線の色を設定
  3. セルのプロパティで枠線の色を設定

 


  • 表を作成

    まずは、通常通り表を作成します。

      A B C
    テキスト 100円 200円 300円
    テキスト 1,000円 2,000円 3,000円
    テキスト × ×

  • 表のプロパティで枠線の色を設定

    表全体を選択表全体を選択

    表のプロパティ

    テーブルアイコン表のプロパティ高度な設定枠線の色

    枠線の色に設定したいHTMLカラーコードを入力します。

    ここでは赤(#f44336)を設定しました。


  • セルのプロパティで枠線の色を設定

    セルのプロパティ

    先ほど同様表全体を選択後、以下の操作を行います。

    テーブルアイコンセルのプロパティ高度な設定枠線の色

    枠線の色に入力するHTMLカラーコードは、必ず②番の色と合わせて下さい。


表の枠線の色を変更してこんな表を作ってみました

「表の枠線の色の変更」と合わせて、ちょっと色々とカスタマイズしてみました。

  • デフォルトの表
  A B C
画像 表示 表示 表示
サイト名 写真AC イラストAC O-DAN
テキスト
テキスト テキスト テキスト テキスト
テキスト サイトへ移動 サイトへ移動 サイトへ移動
  • カスタマイズした表
  人物1-50 人物2 人物3
画像 表示 表示 表示
サイト名 写真AC イラストAC O-DAN
テキスト 🔺
テキスト テキスト テキスト テキスト
テキスト サイトへ移動 サイトへ移動 サイトへ移動

 

小豆
おぉ!
同じ表とは思えないくらい見た目が違う。

こちらの表は、以下のカスタマイズを行っています。

  • 枠線の色の変更
  • セルの高さの変更
  • セルの背景色の変更
  • テキストカラーの変更
  • テキストクリックで画像を拡大表示

 

こちらの記事が参考になります。

 

まとめ:自分のブログだけのオリジナルデザインの表を作ろう

「商品やサービスの比較」「スペックの表示」などをするときに表はとても便利ですよね。

ダラダラと文章で書くよりも、ぱっと見でわかりやすく物事を読者に伝えることができます。

で、どうせならスタイリッシュで見た目の良い表を作りたいですよね。

 

紹介した方法、記事を参考にぜひ自分好みの表を作ってみて下さい。

 

AFFINGER5の購入を検討している人は、こちらの記事をどうぞ。

AFFINGERの評判
AFFINGERの評判を使用歴1年の僕が解説【見本サイトも紹介】

続きを見る

AFFINGER5お気に入り記事装飾
AFFINGER5でお気に入りの機能や記事装飾20選【2020年版】

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記