WordPress【表の枠線の太さを変更する方法】AFFINGER利用者向け

AFFINGER5＆6で、表の枠線の太さを変更する方法の紹介です。

併せて、枠線のカラーの変更方法も解説していきます。

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

小豆

AFFINGER6で、表の枠線の太さの変更が上手くいかない。
ネットで調べた通りにやっているのに、なんで！？

WordPress【表の枠線の太さを変更】AFFINGERはちょっと特殊

WordPress内で作った表は、設定から簡単に枠線の太さやカラーを変更することができます。

WordPress　表　枠線の太さ　🔍で検索すれば、すぐに設定方法を調べることができますよね。

小豆

確かにやり方はたくさん出てきたけど・・。
その通りにやっても、どうしても上手くいかないんだ。

そうなんだよね。
AFFINGERの場合は、ちょっと特殊なんだ。

大福

実際に、ネットで紹介されている方法で、枠線の太さを変更してみました。

ご覧の通り、ネットで紹介されている方法では「表の一部にしか設定が反映されない」んですよね。

これは、太さの設定だけでなくカラーの設定を行った場合も一緒。

詳細な理由はわかりませんが、「AFFINGERデフォルトの設定」と「表の設定」とが干渉してしまっているのかも・・。

で、今回紹介する方法で設定を行った場合がこちら。

AFFINGERでも、無事に枠線の太さを変更することができました。

小豆

おぉ！ちゃんとできてる。
他にも枠線の設定について、もっと知りたい！

色んなパターンごとに設定方法と注意点を解説していくね。

大福

AFFINGER5＆6で表の枠線の太さを変更する方法【カラーも】

AFFINGERは「5」「6」どちらのバージョンを使用していても、操作方法は同じです。

外側の枠線のみ太く

外側・内側の枠線すべてを太く

※「#000000」は黒を指定するカラーコードです。別途任意のカラーを指定することもできます。

外側の枠線のみカラーを変更

外側・内側の枠線のカラーを変更

外側・内側で枠線の太さ、カラーをそれぞれ別々に

一部のセルのみ変更

まだまだある！AFFINGERでさらにこだわりの表を作る方法

WordPressで作る表は、設定次第でさらに見栄えのいいものにすることができます。

以下、AFFINGER利用者向けの「表に関する設定記事」を3つ紹介します。

セルの高さを変更

表内のセルの高さを変更することで、記事内での表のスペースを節約できます。

余分な余白がなくなることで、スタイリッシュにも見えますね。

表の枠線を削除

表内の枠線を削除して、スッキリとした表に見せます。

オシャレな表の作成

サンプルテキスト	車通勤	バス通勤	電車通勤
サンプルテキスト
サンプルテキスト	10,000円	20,000円	30,000円
サンプルテキスト	テキスト テキスト テキスト	テキスト テキスト テキスト	テキスト テキスト テキスト
サンプルテキスト	+ クリックして下さい 表内に長い文章を入力してしまうと、表のレイアウトも崩れてしまい見づらくなってしまう	+ クリックして下さい 表内に長い文章を入力してしまうと、表のレイアウトも崩れてしまい見づらくなってしまう	+ クリックして下さい 表内に長い文章を入力してしまうと、表のレイアウトも崩れてしまい見づらくなってしまう
サンプルテキスト	詳しくはコチラ	詳しくはコチラ	詳しくはコチラ

AFFINGERの記事装飾と併用することで、おしゃれな表を作成します。

まとめ：記事内で表を目立たせよう

ブログ記事において、表はすごく重要です。

どうせならデフォルトのままの目立たない表より、読者の目を惹くおしゃれな表を作りたいですよね。

ぜひ記事を参考に、自分だけのオリジナルの表を作ってみてください。

大福

ちなみにだけど、以前までは僕も表作りがめちゃくちゃ苦手だったよ。

なるほど。
思い通りの表を作れるまでには、多少の慣れが必要ってことだね。

小豆

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する