【ワードプレス】テーブル(表)の枠線デザイン一覧 カスタマイズ方法もあわせて紹介

この記事では、クラシックエディタでの方法を紹介します
ビジュアルエディタと異なる場合がありますがご了承ください

はじめに

ワードプレスのテーブルは、背景色や文字色、枠線などがカスタマイズできますが、カスタマイズのプレビュー画面がないため、どのようにデザインが変わるのか、なかなかわかりづらくなっています。

特に枠線のデザインは、選択肢にただただ英単語が並ぶのみでとても分かりにくいです。

そこで、各枠線デザインで作った表をそれぞれ紹介したあと、枠線デザインのカスタマイズ方法について詳しく紹介します。

 

枠線デザイン一覧

枠線デザインは全部で11種類あります

  • Select…(デフォルト)
  • Solid
  • Dotted
  • Dashed
  • Double
  • Grove
  • Ridge
  • Inset
  • Outset
  • なし
  • Hidden

 

Select…(デフォルト)

ワードプレスワードプレス
ワードプレスワードプレス

Solid

ワードプレスワードプレス
ワードプレスワードプレス

Dotted

ワードプレスワードプレス
ワードプレスワードプレス

Dashed

ワードプレスワードプレス
ワードプレスワードプレス

Double

ワードプレスワードプレス
ワードプレスワードプレス

Grove

ワードプレスワードプレス
ワードプレスワードプレス

Ridge

ワードプレスワードプレス
ワードプレスワードプレス

Inset

ワードプレスワードプレス
ワードプレスワードプレス

Outset

ワードプレスワードプレス
ワードプレスワードプレス

なし

ワードプレスワードプレス
ワードプレスワードプレス
Hidden

ワードプレスワードプレス
ワードプレスワードプレス

枠線デザインのカスタマイズ方法

ここからは、枠線デザインのカスタマイズ方法を紹介します。

ワードプレスでテーブル(表)を作る

テーブルアイコン→テーブルをクリックし、作りたいテーブルの行・列数を選択

枠線デザインを変更

  1. 枠線デザインを変えたい範囲を選択する
    ※表全体で変更させたいときは全体を選択
  2. テーブルアイコン→セル→セルのプロパティをクリック

  3. 高度な設定→Border style より、好きなデザインを選択

  4. OK をクリック

以上で完了です。

 

Hidden』が表示されないトラブル

先ほどの③で『Hidden』が表示されないことがあります。

これは、画面下のタスクバー(赤枠の部分)と被って隠れているのが原因です。

画面を縮小表示することで、表示させることができます。

Ctrlキーを押しながら、マウスのホイール(真ん中のくるくる回るやつ)を手前に回してやると縮小されます。

戻すときは、Ctrlキーを押しながら、ホイールを奥側へ回します。

 

まとめ

今回は、テーブルの枠線デザインについて紹介しました。

デザインが分からなくなったときにまたこの記事をのぞいてみてください。

ワードプレスの表は、デフォルトのままではあまり存在感はありませんが、背景色や文字色、枠線などをカスタマイズすると、見やすくわかりやすいものにできます。

ぜひ、自分に合ったデザインを見つけてみてください!

 

ブログ運営・ワードプレスのカスタマイズについてほかにもいくつか紹介しています。

他のサイトでは紹介されていないような、独自の情報を発信していますので、気になった方はぜひご覧ください。

 

それでは、よいブログライフを!
   
最新情報をチェックしよう!