先日WordPressの記事を作成している際に、表を入れる機会があったので、今回は「WordPressに表(テーブル)を入れる方法」について説明します。
表を入れるメリットは、文章だけで伝えるよりも視覚的に伝わりやすいことです。
WordPressで表を入れるのはちょっと難しそう・・・と思われるかもしれませんが、とても簡単ですので、是非参考にしてみてください。
WordPressの基本機能で表を挿入する方法
- ここではブロックエディター編集の方法を説明します。
まずは、表を挿入したい部分で+「ブロックの追加」を選択します。 - 挿入できるブロックの種類が出てくるので、この中からテーブルをクリックする。
- テーブルを選択すると「カラム数」と「行数」を入力する画面が表示されるので、それぞれ入力し、「表を作成」をクリックすると表が挿入されます。
カラム数=列の数
行数=行の数 - 各セルをクリックすると文字が入力できます。
- 表を挿入後、表の編集をすることも可能です。
赤枠の「表を編集」をクリックすると下記のように編集可能です。
・行を上に挿入
・行を下に挿入
・行を削除
・列を左に挿入
・列を右に挿入
・列を削除
変更したい内容をクリックすると挿入された表に反映されます。
プラグイン「TablePress」で表を挿入する方法
複数ページで同じ表を利用する。などといった場合は、一括変更ができる「TablePress」がお勧めです。
ここでは例として、バージョン1.14 をインストールしています。
- メニューバー内ののプラグインにカーソルを合わせ、新規追加をクリックします。
- プラグインの検索欄にに「TablePress」と入力して検索をすると、該当するプラグインが表示されます。
その中の「TablePress」を選択しインストールします。
プラグインを有効化にすると管理メニュー内に「TablePress」が表示されます。 - テーブルを新規に作成する場合は、TablePress→新しいテーブルを追加→新規追加をクリックし、列数、行数を入力します。
(名前、説明は任意のものなので管理しやすい名前や、説明を入力してください。) - 下図はテーブルの編集画面になります。テーブルIDとショートコードは自動で生成されます。
(任意の数値を入れることも可能です。)「テーブルの内容」に各項目を入力します。 - 編集したい行(横の並び)にチェックを入れると「テーブルの操作」から行の挿入や削除・表示/非表示の切り替えなどを行うことができます。
同様に、列(縦の並び)にチェックを入れるとその列を編集することが可能です。
- 編集が終わったら下部にあるプレビューをクリックすると、表の状態を確認することができます。
(実際に記事に表示する大きさとは多少異なる場合があります。)
確認をし、変更を保存をクリックすると表が保存されます。 - テーブル情報からショートコードをコピーします。
- 投稿記事のページを開き、コードエディター編集に切り替えて、挿入したい箇所に先ほどコピーしたショートコードを貼り付けます。プレビューを確認し、表が出来たことを確認します。
HTMLを記述して表を挿入する方法
HTMLを直接記述する方法です。
エディタのコードエディター編集を利用して、<table>~</table>タグで表を挿入します。
HTMLの記述に慣れている方はこちらの方がスムーズに理想の表を作成できるかもしれません。
- コードエディター編集に切り替えてタグを記述し、コードエディター終了部分をクリックします。
- プレビューを確認すると表が作成されます。
- 細かなデザインは管理メニュー→TablePressから「プラグインオプション」の「カスタムCSS」でCSSを記述すると設定できます。
お好みのデザインを設定してみてください。
最後に
いかがでしたか。
WordPress初心者でもすぐに使える「表の入れ方」についてご紹介いたしました。
是非試してみてください。
コメント