ワードプレスの表をおしゃれにカスタマイズする方法を解説！

ワードプレスでは、簡単に表を作成することができます。

表を使うことで、複雑な情報を、ユーザーにわかりやすく伝えることができるようになります。

ただ、ワードプレスで表を作成する場合、特にスマホ表示において注意するべき点があります。

こちらでは、ワードプレスで表を作成する方法やカスタマイズについて解説したいと思います。

ワードプレスで表を作る際の注意点

ワードプレスで表を作る際には、スマホ表示においていくつか注意点があります。

注意点①横幅が狭く文の途中で改行がたくさんはいってしまう

ワードプレスで下記のような、横長の表を作成すると、パソコンでは問題なく表示されていても、スマホにすると、表示が崩れていまうことがよくあります。

上記のように、スマホ表示にすると、横長の表では、枠内の文章が長いと自動で改行されてしまい、読みにくくなってしまっています。

これらの対処法としては、次のようなものがあります。

横スクロールができるようにしたり、列幅を設定するには、HTMLとCSSの知識が必要になります。

初心者のうちは、「適度に改行を入れる」または「文字を小さくする」などで対処しましょう^^b

注意点②表の一部分が表示されていない

テーマがレスポンシブ対応していないなど、何らかの理由で表の横幅が画面幅よりも大きくなり、はみ出た部分が表示されないことがあります。

ワードプレスで作成した表は、デフォルトでは「レスポンシブ対応」になっています。

しかし、作成段階で、幅を調整してしまった時点で、「固定の幅」が設定されてしまいます。

その固定幅の合計が画面幅の合計を超えてしまった場合に、表の一部分が画面からはみ出てしまうのです。

この場合、HTMLとCSSを使って、スマホの画面幅に合わせて、表の横幅を設定する必要があります。

表は、情報を整理して、わかりやすく伝えるために便利なものです。

しかし、スマホではハードウェアの特性の観点から、表示幅に十分注意する必要があります。

ワードプレスで表を作成する方法

ワードプレスで表を作成する方法は、主に以下の3つがあります。

方法①ワードプレスの基本機能を使う

ワードプレスのブロックエディタの基本機能に、「テーブル」があります。

表を作成した後からでも、行と列を追加したり、削除することができます。

表をクリックして上部に表示されるメニューから「表の編集」をクリックすることで、以下の選択肢が表示されます。

方法②Excelで作成してコピーする

ワードプレスのブロックエディタでは、Excelで作成した表をコピー＆ペーストで挿入することができます。

Excelで作成した表も、前述したように、行と列の追加と削除ができます。

Excelで表を作成する場合、横長の表になりがちなので、スマホ表示でレイアウト崩れがないか、確認するようにしましょう！

方法③プラグインを使う

プラグインを使うことでも、ワードプレスで表を作成することができます。

おすすめのプラグインは、「TablePress」です。

「TablePress」を使うメリットには次のようなものがあります。

上記のような、ワードプレスの標準機能では難しいことができるようになります。

また、「TablePress」を使うことで、複数の記事で同じ表を共有することができます。

マスターを変更することで、他の全ての記事にある表の内容まで同時に変更が適用されます。

このように、高機能でスタイリッシュな表を簡単に作成することができます。

DataTable JavaScriptライブラリの機能を使用すると、次のような機能が実装できます。

テーブル操作と合わせて使うことで、よりわかりやすく、かっこいい表を作成することができます。

ワードプレスの表をおしゃれにカスタマイズ

ワードプレスの表をおしゃれにカスタマイズするなら、プラグインを使うのがおすすめです。

ブロックエディタの標準機能では、HTMLやCSSによる編集が制限されているため、たとえ記述があっていても、エラーになるケースが多いからです。

原因は、ブロックエディタ（グーテンベルク）の機能を保護するための制限が影響していることです。

ブロックエディタの表のカスタマイズでできることは、次の通りです。

ただ、いずれもデザイン性が低く、実用性は低いです。

ワードプレスの標準機能で表を作る場合は、クラシックブロックで、表を作成することをおすすめします。

クラシックブロック内であれば、自由にHTMLやCSSの編集をすることができます。

初心者だと、HTMLやCSSを変更したり追記することは難しいため、プラグイン「TablePress」を使用するのがおすすめです！

ワードプレスの表をおしゃれにカスタマイズする方法を解説！のまとめ

ワードプレスで表を作成する方法は、次の通りです。

初心者におすすめなのは、プラグインを使う方法です。

背景色や枠線の色など、細かくこだわりたい場合は、ワードプレスの基本機能を使うのもよいかと思います。

また、ワードプレスで表を作成する際は、スマホで表示が崩れていないか必ず確認するようにしましょう！

最後までご覧いただき、ありがとうございました！