ブログ記事を書いている時、ここに表を挿入したいのに！という時にやり方がわからないことはありませんか？
表を作りたいけどやり方がわからないので、仕方なく箇条書きなどでごまかしたりしていませんか？
初心者の方はHTMLをいじって表を作るなんてハードルが高すぎますよね？
今日はそんな方の疑問を解決するため簡単に表を作成する方法を解説したいと思います。
この記事を読むと
- 簡単に表が作れるようになる。
- ブログの見栄えがよくなり読まれるようになる。
WordPressのプラグインで表を作る
表を簡単に作るには『TinyMCE Advanced』というプラグインを紹介したいと思います。
TinyMCE Advancedのインストール
①プラグイン→新規追加をクリックします。
②キーワード欄に「 TinyMCE Advanced 」を入力します。
③今すぐインストールをクリックします。
④有効化をクリックします。
TinyMCE Advancedの設定方法
設定方法は初心者でもわかりやすくそれほどありませんが、これはというものだけ説明します。
ツールバー設定→「 TinyMCE Advanced 」を選択します。
設定画面が表示されます。
Block EditorかClassic Editorを設定
2018年12月のWordPressのアップデートでこれまでのエディタと大きく仕様が変わり、Block Editor(Gutenberg)になりました。
Block Editor(Gutenberg)は慣れるまで使いにくいという方が多いのでプラグインなどで旧エディタを使われている方も多いと思います。
プラグインを入れて旧エディタを使っている方はClassic Editor(TinyMCE)タブを選択して設定してください。
僕はBlock Editor(Gutenberg)を使用しています。
Editorメニューバーの設定
Block Editor(Gutenberg) の設定ですが、それほど変わりませんのでこの説明で十分かと思います。
Enable the editor menu (recommended).はチェックを入れたままにしてください。
下のアイコン集から入れたい機能をメニューバーの赤枠部分にドラッグ&ドロップします。
僕はシンプルが好きなので赤枠を付けた、「下線」「背景色」「リンクの削除」を設定しています。
表の作り方
それでは実際に表を作っていきましょう。
Block Editor(Gutenberg) では表を作るブロックを追加する際に、「Classic Paragraph」を選択します。
ブロックにEditorメニューバーが表示されます。
表を挿入する
テーブルアイコン→テーブルをクリックするとマス目が表示されます。
マス目の数で行と列の数を決めます。
この例では4行、3列の表ができます。
セルに文字を入力
それぞれのセルに文字を入力します。
文字を揃える
文字を揃えたいセルを範囲選択して赤枠のアイコンをクリックします。
この例では2行目を中央揃えにしています。
行挿入
挿入したい行にカーソルを合わせます。
テーブルアイコン→行→行を下に挿入をクリックします。
※行を上に挿入したい場合は行を上に挿入をクリックします。
列挿入
挿入したい列にカーソルを合わせます。
テーブルアイコン→列→列を右に挿入をクリックします。
※列を右に挿入したい場合は行を上に挿入をクリックします。
行削除
削除したい行にカーソルを合わせます。
テーブルアイコン→行→行を削除をクリックします。
列削除
削除したい列にカーソルを合わせます。
テーブルアイコン→列→列を削除をクリックします。
セルの結合
結合したいセルを範囲選択します。
テーブルアイコン→セル→セルの結合をクリックします。
枠線の色を変更する
変更したいセルを範囲選択します。
テーブルアイコン→セル→セルのプロパティをクリックします。
高度な設定タブ→枠線の色をクリックします。
色のパレットから好きな色をクリックします。
背景色を変更する
枠線の色の変更と同様に背景色を変更したいセルを範囲選択し、
テーブルアイコン→セル→セルのプロパティをクリックします。
高度な設定タブ→背景色を選択します。
色のパレットから好きな色をクリックします。
表の完成
プレビューを見るとこのような表が作成されます。
いかがでしたでしょうか。
こんな時に表が作れればいいのにという場面でも簡単に表が作成できると
思います。
是非、試してみてくださいね！
