Gutenbergのエディタではテーブル作成機能が貧弱で困ります。
Webサービスで簡単にセル調整、ついでにCSSも作ってくれるサイトがありますので、紹介します。
テーブル作り機能はまだ弱い
Gutenbergのテーブル作成機能はまだまだ発展途上。
サイトで紹介しているJINやLightningでは、簡単に表を作成して調整する機能があります。
そういう便利な機能がない場合は、Webにあるサービスを利用するのも一つの方法です。
Table Tag Generator
Table Tag Generator というサイトでは、マウス操作でテーブルを直感的に作成することができます。
文字を入れたり、CSSを作成してくれるので、とても便利です。
公式サイト
使い方
画面上部にある小さなテーブルを操作します。
使い方はとっても簡単
- まず表の大きさ（行と列）を決める。
・数字をキーボードで入力する
・スピナーをクリックする
・マウスホイールを回す - th タグを使いたい場合
① 変換したいセルをドラッグして選択
②「td ↔ th」 ボタンをクリックしてください。 - セルを結合する場合
①結合するセルをドラッグして選択
②「結合」ボタンをクリック
③結合したセルは「分割」ボタンで元に戻せる。 - 文字を入力する場合
①「文字」 ボタンをクリックして入力モードに。
②表に直接入力できます。
③入力後、「出力」ボタンをクリック。 - CSSを適用する場合
・セルに class を設定することができます。 - 失敗したら初期化ボタンで元に戻せる。
- 表が完成したら、サイトにコピペする。
CSS
テーブルに適用するCSSも、同様のサービスを利用することで簡単にかっこいいテーブルを作ることができます♬
こちらのページでGutenbergの表の作り方と一緒にご紹介しています。
Gutenbergへの適用方法は、こちらでご紹介しています。
GutenbergのテーブルをCSSで見栄えよくGutenbergでテーブルを作成する方法と、そのテーブルをCSSで見栄え良くする方法についてご説明します。...
おわりに
いかがでしたか？
WordPressの操作が簡単になって、以前よりずっと楽にWebページを作ることができるようになりました。
テーブルも効果的に使うと、とても分かりやすいページになります。
HTMLで悩まなくても簡単にできるツールです。
活用してブログ記事をどんどん書きましょう♬
インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。
Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。
時々セールをするので、その時が狙い目！
- 【2021年】はじめてのWordPress入門講座【基礎知識・使い方・管理保守・トラブル対応】（5,400円→1,270円※セール価格）
- 【iroha】理屈は抜き！パソコンが苦手な超初心者さん向け WordPressブログの作り方（24,000円→1,270円※セール価格）
そのほかにも沢山ありますよ♪
