word-press-table-easy

ブログ

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

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

 

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

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

 

本記事の内容

  • WordPressで表を簡単に作ってみる
  • 役立つテーブル小技集

 

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

 

 

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

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

そんな簡単に作れるの?

それはもう簡単です。

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

 

目標はこれ

名前フォロワー数評価
Tさん5003
Tさん8003
Wさん16003.5
Aさん25004
Rさん50004.5

 

 

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

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

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

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

 

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

>> スプレッドシート

+をクリック

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

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

見たことある画面

 

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

 

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

表を作る

 

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

豆知識

  • Windows:Ctrl+Cでコピー、Ctrl+でVで貼り付け
  • Mac:⌘+Cでコピー、⌘+でVで貼り付け

 

コピーする

 

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

 

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

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

貼り付ける

 

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

 

名前フォロワー数評価
Tさん5003
Tさん8003
Wさん16003.5
Aさん25004
Rさん50004.5

 

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

 

役立つテーブル小技集

小技集

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

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

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

 

表の幅を変える

 

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

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

幅を調整する

 

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

 

名前フォロワー数評価
Tさん5003
Tさん8003
Wさん16003.5
Aさん25004
Rさん50004.5

 

表の色を変える

 

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

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

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

テーマならAFFINGER

AFFINGERはこちらから

SEOとカスタマイズ力の鬼

 

 

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

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

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

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

スタイルをつける

 

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

名前フォロワー数評価
Tさん5003
Tさん8003
Wさん16003.5
Aさん25004
Rさん50004.5

 

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

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

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

 

名前フォロワー数評価
Tさん5003
Tさん8003
Wさん16003.5
Aさん25004
Rさん50004.5

 

 

さいごに

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

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

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

step
2
幅を調整する

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

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

 

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

 

スポンサーリンク

-ブログ
-

Copyright © TORO LOG , All Rights Reserved.