
ブログ記事の中で表を使いたいのに難しくて箇条書きですませちゃいがち。。もっと簡単に表を使えたらなあ。。。
そんな悩みをズバッと解決する裏技を教えます。プラグインを入れる必要はありません。
本記事の内容
- WordPressで表を簡単に作ってみる
- 役立つテーブル小技集
今日からアナタもテーブルマスターです。
もくじ
WordPressで表を簡単に作ってみる

それはもう簡単です。
『Google スプレッドシート』を活用してこんな表を作っていきます。
目標はこれ
名前 | フォロワー数 | 評価 |
Tさん | 500 | 3 |
Tさん | 800 | 3 |
Wさん | 1600 | 3.5 |
Aさん | 2500 | 4 |
Rさん | 5000 | 4.5 |
スプレッドシートを準備する

冒頭でもお伝えしたとおりプラグインは使いません。「Google スプレッドシート」を使います。
簡単にいうとこれは我らがGoogleが提供している無料のエクセル。だと思ってください。
まずはこちらからスプレッドシートを作りましょう。ワードプレスを設置している人たちならgmailくらい持ってますよね?gmailを持ってない人はググってまずは作ってきてください。
こんな画面になると思いますので「+」をクリック
そうすると出てきましたね。見慣れた画面が。さあ準備はこれだけ。さっそく表を作りましょう。
スプレッドシート上で表を作る
スプレッドシートでこんな感じに表を作りましょう。
出来たら表の先頭から最後までクリックしながらドラッグして範囲を選択し、「コピー」します。
豆知識
- Windows:Ctrl+Cでコピー、Ctrl+でVで貼り付け
- Mac:⌘+Cでコピー、⌘+でVで貼り付け
ワードプレスに戻ってエディタに貼り付ける
あとはコピーした表をエディタに貼り付けましょう。
こんな感じになるはずです。
この状態でプレビューを見てみましょう。
名前 | フォロワー数 | 評価 |
Tさん | 500 | 3 |
Tさん | 800 | 3 |
Wさん | 1600 | 3.5 |
Aさん | 2500 | 4 |
Rさん | 5000 | 4.5 |
このような見事な表が出来ましたね!もうこれでワードプレスの表は怖くない。
役立つテーブル小技集

ノンノンノン。これで満足してはいけません。
もっと役に立つ小技を教えますのでマスターしましょう。これでやっとアナタもワードプレスのテーブルマスターになれるはず。
表の幅を変える
これもスプレッドシート上で出来ちゃいます。
名前の幅と評価の欄をそれっぽく縮めて。。。
コピペします。はい。表の幅もなんとなく簡単に調整出来ます。これで十分です。
名前 | フォロワー数 | 評価 |
Tさん | 500 | 3 |
Tさん | 800 | 3 |
Wさん | 1600 | 3.5 |
Aさん | 2500 | 4 |
Rさん | 5000 | 4.5 |
表の色を変える
表の色を変えるのは簡単に、、、残念ながら出来ません。
スプレッドシート上で色変えてもスタイルには適用されません…
テーマによってはカスタマイズで自動で色が変わります。ちなみに有料テーマのAFFINGER5なら表の色をコピペした後に変えられるので僕はテーマで変えています。
ですが、スタイルで変えることは出来ます。
テキストエディタを開き、変えたい<td>に
style="background-color:#f1f1f1 !important"
これをこんな感じでスタイルを付与して色を変えちゃいましょっ
テキストをいじるのは抵抗ある方もいるかと思いますが、記事を読んでもらうためです。頑張りましょっ
名前 | フォロワー数 | 評価 |
Tさん | 500 | 3 |
Tさん | 800 | 3 |
Wさん | 1600 | 3.5 |
Aさん | 2500 | 4 |
Rさん | 5000 | 4.5 |
表の文字色やフォントを変える
これはワードプレス上で出来ます。
変えたい文字の色やフォントを変えるだけです。
名前 | フォロワー数 | 評価 |
Tさん | 500 | 3 |
Tさん | 800 | 3 |
Wさん | 1600 | 3.5 |
Aさん | 2500 | 4 |
Rさん | 5000 | 4.5 |
さいごに
今回は超簡単にスプレッドシートを使ってワードプレスで表を作成する方法を紹介しました。
最後にもう一度だけおさらいしましょう。
step
1スプレッドシートで表を作る
step
2幅を調整する
step
3ワードプレスにコピペする
step
ex表の色を変えたかったら変える
これでアナタもワードプレスのテーブルマスターです。