ビジュアルエディタと異なる場合がありますがご了承ください
はじめに
ワードプレスのテーブルは、背景色や文字色、枠線などがカスタマイズできますが、カスタマイズのプレビュー画面がないため、どのようにデザインが変わるのか、なかなかわかりづらくなっています。
特に枠線のデザインは、選択肢にただただ英単語が並ぶのみでとても分かりにくいです。
そこで、各枠線デザインで作った表をそれぞれ紹介したあと、枠線デザインのカスタマイズ方法について詳しく紹介します。
枠線デザイン一覧
枠線デザインは全部で11種類あります
- Select…(デフォルト)
- Solid
- Dotted
- Dashed
- Double
- Grove
- Ridge
- Inset
- Outset
- なし
- Hidden
Select…(デフォルト)
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Solid
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Dotted
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Dashed
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Double
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Grove
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Ridge
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Inset
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
Outset
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
なし
ワードプレス | ワードプレス |
ワードプレス | ワードプレス |
枠線デザインのカスタマイズ方法
ここからは、枠線デザインのカスタマイズ方法を紹介します。
ワードプレスでテーブル(表)を作る
テーブルアイコン→テーブルをクリックし、作りたいテーブルの行・列数を選択
枠線デザインを変更
- 枠線デザインを変えたい範囲を選択する
※表全体で変更させたいときは全体を選択
- テーブルアイコン→セル→セルのプロパティをクリック
- 高度な設定→Border style より、好きなデザインを選択
- OK をクリック
以上で完了です。
『Hidden』が表示されないトラブル
先ほどの③で『Hidden』が表示されないことがあります。
これは、画面下のタスクバー(赤枠の部分)と被って隠れているのが原因です。
画面を縮小表示することで、表示させることができます。
Ctrlキーを押しながら、マウスのホイール(真ん中のくるくる回るやつ)を手前に回してやると縮小されます。
戻すときは、Ctrlキーを押しながら、ホイールを奥側へ回します。
まとめ
今回は、テーブルの枠線デザインについて紹介しました。
デザインが分からなくなったときにまたこの記事をのぞいてみてください。
ワードプレスの表は、デフォルトのままではあまり存在感はありませんが、背景色や文字色、枠線などをカスタマイズすると、見やすくわかりやすいものにできます。
ぜひ、自分に合ったデザインを見つけてみてください!
ブログ運営・ワードプレスのカスタマイズについてほかにもいくつか紹介しています。
他のサイトでは紹介されていないような、独自の情報を発信していますので、気になった方はぜひご覧ください。