【WordPress】表作成かんたんガイド

この記事では、CocoonテーマのWordPressブログで簡単な表を作成する方法について説明していきます。

WordPress初心者ガイド：かんたん表作成

ブログ記事を書いてると表を入れたい場面があるかと思います。
サービスを比較したり、文章だけでは伝えづらいことをわかりやすくしたり。

Dさん

表作成したい！！

今回はWordPressのブロックエディタを使った、基本的な表の入れ方をまとめていきます。

WordPressで表を差し込むには、「テーブル」という機能を使います。

編集画面でブロックを追加します。
画面左上の「＋」ボタンまたは選択行右側の「＋」ボタンを押すか、新しい段落で「/」を入力します。

いろいろなブロックを選べるようになるので、そこから「テーブル」を選択します。

作りたい表のカラム（縦列）数と行（横）数を選んで「表を作成」をクリックします。

するとこんな感じになります。

あとはセルの中に項目とか数値とかを入れてけば出来上がり。

エクセルやスプレッドシートからも持ってくることができます。

貼り付けたい箇所を選択して、、

コピペしたら、、↓

未着 / 下書き中	投稿日	カテゴリ

簡単に出来上がり！

Dさん

表の中身を入れ替えて使い回す場合は、

あらかじめスプレッドシートに型を作っといた方が楽かも。

表が出来たら、あとは細かく調整していきます。

表の調整したい箇所をクリックしたら上に出てくる項目から、
三本線の「カラムの配置を変更」を選んだら、カラム（列）単位で配置の調整ができます。
（左寄せ、中央配置、右寄せから選択）

試しに中央配置にしてみました。

これだけでは味気ないので装飾したいですね。

装飾するには、画面右、設定項目の「ブロック」タブから半月みたいなマークの「スタイル」を選択します。

「ストライプ」を選択すると、奇数行がグレー背景になって少し見やすくなります。

「色」を選択すれば文字の色や背景色が変更できます。
背景色を追加すれば偶数行とコントラストになってより見やすくなります。

「タイポグラフィ」では、グラフのサイズを変更したり、フォント変更できます。

こんな感じ。

スタイルのすぐ左側にある「設定」から、セルの幅を固定することもできます。
また、表の上下にヘッダー、フッターをつけてさらに見やすくすることもできます。

だいぶそれらしくなりました。

なにか足りないと思ったら表の枠線がありませんでした。

枠線はスタイルの下の方にある「枠線」って項目から設定できます。