はじめWordPress Gutenbergの表・テーブルの作り方が知りたい。
Gutenbergの表が使いづらい時はどうすれば？
本記事は、上記のように悩んでいる方のために記事を書いています。
こんにちは！ツヨシ（@24shi_web）です。
2017年1月よりブログを始めて、現在は専業ブロガーとして活動しています。Wordppress歴も約3年になります。
さて、あなたもWordPress Gutenbergでの表・テーブルの作り方・使い方で悩んでいましたか？
WordPress Gutenbergは非常に使いやすいエディターですが「表・テーブル」に関してはまだ微妙というのが正直な感想です。
なので、この記事では表の基本的な使い方とより複雑な表・テーブルを作成するのにおすすめの方法を解説していきます。
お洒落なサイトが誰でも作れる！
ブログを書くのが楽になるテーマ「SWELL」
- 誰でも簡単にオシャレなブログが作れます！
- WordPressの使いやすさがアップします！
- キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です！
- アフィリンクの一元管理機能が標準装備されてます！
＼一度使うと他のテーマには戻れません！／
※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです！
1.WordPress Gutenbergでの表・テーブルの作り方。
早速ですがWordPress Gutenbergで表・テーブルの作り方を解説していきます。
具体的には以下の通りです。
- 「表ブロック」を選択
- 列数・行数の選択
- テキストを入力し、表を作成する
※Gutenberは「表ブロック」の機能が低いのが正直残念なポイントです。今後のWPアップデートで「表ブロック」の機能が改善されることを願うばかりです。
「表ブロック」の機能を補うやり方については記事後半でお話します。
1-1.「表ブロック」を選択
まずは「表ブロック」を選択します。
1-2.列数・行数の選択
次にお好みの列数・行数を選択します。
※ちなみに、列数・行数に関しては後からでも追加変更できます。
1-3.テキストを入力し、表を作成する
すると以下のように、表（テーブル）が表示されるのでテキストを入力し内容を作成しています。
具体的に表ブロックでできることは以下の通りです。
- 列・行の追加
- セル内に画像挿入
- 表のスタイル設定
- セルの幅を均一に固定
- ヘッダー・フッターセクション
- セル全体の色変更
①列・行の追加
列や行が足りないと感じた場合、後からでも追加挿入が可能です。
②セル内に画像挿入
セル内にも画像を挿入することが可能です。
③表のスタイル設定
スタイルでは、表のスタイル（デザイン、機能）を一発で簡単に変更することができます。
現在選択できるスタイルは以下の通りです。
- デフォルト
- ストライプ
スタイルは基本2種類のみです。種類が少ないのが残念なのと自由度が低いですね。
④セルの幅を均一に固定
表のブロック詳細設定に「固定幅のテーブルセル」という選択肢がありますが、こちらをONにする事で、セルの横幅を均一に固定することが可能です。
こちらの設定をOFFにしたままだと、テキスト量が多いセルの横幅が長くなり、テキスト量が少ないセルは横幅が短くなります。
⑤ヘッダー・フッターセクション
ブロックの詳細設定の「表の設定」からヘッダー・フッターセルを追加が可能です。
項目を記載するのに便利な「ヘッダー・フッターセル」です。
⑥セル全体の色変更
最後は右ウィンドウの詳細設定の「表の設定」からセル全体の色を変更することが可能です。
ただし、あくまでも「セル全体」の色変更となっているので正直使い勝手は悪いです。
特定のセルだけ色変更したいと思っても「表ブロック」からは行う事はできません。
2.複雑なテーブルは「クラシック」を使うのがおすすめ！
はじめGutenberの「表ブロック」だと思うような表が作れないんだけど、どうにかならないの？
Gutenberは非常に使いやすいエディターであることは間違いないのですが「表ブロック」の機能性は低いです。
- セル結合ができない
- 一部のセルの色変更
個人的には上記の機能はかなり重要かなと思っています。
なので、上記のように悩んでいる場合は、表作成の時だけ「Classic Paragraphブロック」を使うことをおすすめします。
ちなみに「Classic Paragraphブロック」とは旧エディタのことです。
実際に「Classic Paragraphブロック」で表を作成する手順は以下の通りです。
- Classic Paragraphブロックを選択
- Classic Paragraphブロック内の「テーブル」を選択
- 作成したい表の列・行数を選択
- テキストを入力し、表を作成する
※ちなみに、Classic Paragraphブロックを表示させるためにはプラグイン「TinyMCE Advanced」が必要になりますのでインストールしましょう。
2-1.Classic Paragraphブロックを選択
まず、Classic Paragraphブロックを選択します。
2-2.Classic Paragraphブロック内の「テーブル」を選択
次にClassic Paragraphブロック何にある「テーブル」を選択します。
Classic Paragraphブロックに「テーブル」が表示されていない方は、「WordPressの設定（左ウィンドウ）→TinyMCE Advanced」で「テーブル」を表示項目に追加しましょう。
↓ドラッグ&ドロップで簡単に設定可能です。
2-3.作成したい表の列・行数を選択
次に、列・行数を選択し、表を作成します。
2-4.テキストを入力し、表を作成する
以上の流れで、Classic Paragraphブロック内に表が作成されたと思うので、後はテキストを入力し、表を作成していきましょう。
ちなみにClassic Paragraph（旧エディター）における「表」の作り方についてはバズ部の記事がとてもわかりやすく説明してくれているのでおすすめです。
まとめ
今回は、WordPress Gutenbergの表・テーブルの作り方について解説してきました。
Wordpres Gutenbergは非常に良い使いエディターですが「表ブロック」だけはまだ少々使いづらく、できない機能も存在しています。
そんな時は本記事でご紹介した「Classic Paragraph」で代用しつつ記事を書く事をおすすめします。
また、いずれはアップデートでWordpres Gutenbergの「表ブロック」でもセル結合や個別のスタイル変更ができるようになると思われますのでそれまでの辛抱ですね。
是非参考にしてみてください。以上です。
【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。
当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。
しかし、有料コンテンツで提供している情報は「楽して稼ぐ！」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。
また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。
月7桁をを達成したサイト設計方法です！
初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 案件を選ぶ際の7つのポイントが学べます。
- 購入されやすい商品の特徴。
- 案件選びで重要な見るべきポイント。
- 案件を取り組む際に確認すべき事項。
＼アフィリ案件を選ぶ秘訣が学べます！／
