ワードプレスで表を超簡単に作る裏技【画像付き解説】

ブログを書く時に表を使いたいのだけれどなんか難しくて使えないよねー。。。

ブログ記事の中で表を使いたいのに難しくて箇条書きですませちゃいがち。。もっと簡単に表を使えたらなあ。。。

そんな悩みをズバッと解決する裏技を教えます。プラグインを入れる必要はありません。

今日からアナタもテーブルマスターです。

WordPressで表を簡単に作ってみる

そんな簡単に作れるの？

それはもう簡単です。

『Google スプレッドシート』を活用してこんな表を作っていきます。

スプレッドシートを準備する

スプレッドシート？プラグインかな？

冒頭でもお伝えしたとおりプラグインは使いません。「Google スプレッドシート」を使います。

簡単にいうとこれは我らがGoogleが提供している無料のエクセル。だと思ってください。

まずはこちらからスプレッドシートを作りましょう。ワードプレスを設置している人たちならgmailくらい持ってますよね？gmailを持ってない人はググってまずは作ってきてください。

>> スプレッドシート

こんな画面になると思いますので「＋」をクリック

そうすると出てきましたね。見慣れた画面が。さあ準備はこれだけ。さっそく表を作りましょう。

スプレッドシート上で表を作る

スプレッドシートでこんな感じに表を作りましょう。

出来たら表の先頭から最後までクリックしながらドラッグして範囲を選択し、「コピー」します。

ワードプレスに戻ってエディタに貼り付ける

あとはコピーした表をエディタに貼り付けましょう。

こんな感じになるはずです。

この状態でプレビューを見てみましょう。

このような見事な表が出来ましたね！もうこれでワードプレスの表は怖くない。

役立つテーブル小技集

超簡単に表を作ることができたわ！

ノンノンノン。これで満足してはいけません。

もっと役に立つ小技を教えますのでマスターしましょう。これでやっとアナタもワードプレスのテーブルマスターになれるはず。

表の幅を変える

これもスプレッドシート上で出来ちゃいます。

名前の幅と評価の欄をそれっぽく縮めて。。。

コピペします。はい。表の幅もなんとなく簡単に調整出来ます。これで十分です。

表の色を変える

表の色を変えるのは簡単に、、、残念ながら出来ません。

スプレッドシート上で色変えてもスタイルには適用されません…

テーマによってはカスタマイズで自動で色が変わります。ちなみに有料テーマのAFFINGER5なら表の色をコピペした後に変えられるので僕はテーマで変えています。

ですが、スタイルで変えることは出来ます。

テキストエディタを開き、変えたい<td>に

style="background-color:#f1f1f1 !important"

これをこんな感じでスタイルを付与して色を変えちゃいましょっ

テキストをいじるのは抵抗ある方もいるかと思いますが、記事を読んでもらうためです。頑張りましょっ

表の文字色やフォントを変える

これはワードプレス上で出来ます。

変えたい文字の色やフォントを変えるだけです。

さいごに

今回は超簡単にスプレッドシートを使ってワードプレスで表を作成する方法を紹介しました。

最後にもう一度だけおさらいしましょう。

step
1スプレッドシートで表を作る

step
2幅を調整する

step
3ワードプレスにコピペする

step
ex表の色を変えたかったら変える

これでアナタもワードプレスのテーブルマスターです。