ワードプレスでおしゃれで見やすい表を作るプラグインTablePressの使い方

 

ワードプレスの登場で、個人・企業問わず、

誰もがホームページを持つ時代になりました。

 

多少のweb知識さえあれば、誰でも簡単に

ホームページを持つことができるだけでなく、

見やすい表やサイトのデザインを施せます。

 

とはいえ、Wordpressを使いはじめたけど、

事実・・・。

そこで、そんなお悩みのあなたに、

ワードプレスのプラグイン『TablePress』を

使って簡単に表を作る方法をご紹介していきます。

 

記事内で表を使用することで、

あなたの記事はグッと読みやすくなりますよ。

 

文章でだらだら書くのではなく、

一目でわかるような表を作成していきましょう。

 

ワードプレスプラグイン『TablePress』の使い方・設定方法

『TablePress』というワードプレスの

プラグインを使うと、自分のサイト内の記事に

おしゃれな表（テーブル）を挿入できます。

プラグインを使うだけで、

こんな表も簡単に作れちゃうわけですね！

 

自分のサイトでサービスや商品を

紹介している場合は、文章で書くよりも

表を作ってしまった方が見やすくなります。

 

読者にわかりやすく伝えるためにも、

お使いのワードブレスサイトに、見やすい

表を取り入れてみてください。

 

もしプラグインなしで表を作成したい場合は、

テーブルタグを使う必要があります。

※＜table＞で囲まれたタグのことです。

 

これを覚えるのは大変ですが、プラグイン

なら一発でおしゃれな表を挿入できます！

 

「HTMLタグはよくわからない・・・」

そんな方にぴったりですね(^^;

 

さっそくプラグインを、お使いの

ワードプレスにインストールしていきましょう。

 

『TablePress』をインストール

 

ワードプレスのメニューにあるプラグインを選択し、

新規追加で『TablePress』を検索。

 

有効化したらインストール完了です。

プラグインインストールは、ご覧の通り

とっても簡単なので、今すぐやりましょう。

 

このように、誰でも簡単にできるのが

ワードプレスの魅力ではありますね。

 

表を作成する

プラグインをインストールすると、

「新しいテーブルを追加」することが、

できるようになります。

 

そこで、まず考えて欲しいのが、

タイトル 表の行（縦） 表の列（横）

以上の３点です。

表を作る際の、大枠が決まります。

 

タイトルは・・・

自分がわかりやすいものでOK。

表の行は、縦に何マス必要か？ 表の列は、横に何マス必要か？

を作る前に必ず、考えて下さいね！

 

表の中身を作成する

先ほど入力した表の行・列のテーブルが

作成されたので、次は、この

”テーブルの内容”を決めていきます。

 

一番上の行はテーブルの見出しとなり、

太字で背景に色がついて目立つようになります。

 

表の行・列を追加する

「テーブルの操作」の下にある

追加ボタンを押すと、それぞれ追加できます。

 

こんな場合もちゃんと修正できるので安心ですね。

 

また、左右についているボックスにチェック

を入れることで、下記の操作ができます。

表示・非表示の切り替え コピー 挿入 削除

 

挿入では、チェックした行や

列の上・左側にセルが追加されます。

 

セルを結合する

表に同じ内容が続くときは、

セルを統合すると綺麗に見えます。

 

行（横）で結合したいときは、

下のような操作をします。

 

列（縦）で統合したい場合も、

同様の操作をするようにしましょう♪

 

DataTablesを使用する

 

「DataTablesを使用する」に

チェックを入れると・・・、あなたの

ワードプレスのサイトを読んでいる読者が

表を自由に並べ換えることができるようになります。

 

ワードプレスプラグイン『TablePress』で作った表の色を変える方法

 

あなたは・・・

デフォルトのデザインを変えたい！ 自分のサイトに合ったデザインにしたい！

表の背景色を変えるには、

「カスタムCSS」に下のコードを記述します。

 

/*背景色を変える*/ .tablepress-id-表のID .row-行の数 .column-列の数 { background-color: 好きなカラーコード !important; }

 

行の数字を2、列の数字を3にして、

このように背景色をつけてみました。

さらに下のコードを記述すると、

表の中の文字の色も変更できます。

/*文字色を変える*/ .tablepress-id-表のID .row-行の数 .column-列の数 { color: 好きなカラーコード; }

背景色と文字色が変わると、

表の大切な部分を目立たせることことができます！

 

ワードプレスプラグイン『TablePress』で作った表の枠線を装飾する方法

ワードプレスなら、上図のように、

表の線の装飾も簡単にできます。

下のコードを追加してください。

/*見出しの線を装飾する*/ .tablepress thead th { border-bottom-width: 太さ（数字px）; border-bottom-style: 線の種類; border-bottom-color: 好きなカラーコード; }

 

サンプルの表は、太さ2px・線の種類は

dashed・カラーコードは#333333で作成しました。

 

線の種類は、下のようなものがあります。

solid：実線 dashed：破線 dotted：ドット double：二重線（ただし太さは3px以上必要）

 

また、見出し以外の表の線を変更する場合は、

下のコードを記述してください。

/*見出し以外の線を装飾する*/ .tablepress tbody td, .tablepress tfoot th{ border-top-width: 太さ（数字px）; border-top-style: 線の種類; border-top-color: 好きなカラーコード; }

 

ワードプレスプラグイン『TablePress』で作った表の横幅を変える方法

表の横幅を変えるには、

下のコードを追記しましょう。

table#tablepress-IDの数字{ width: 〇〇%; }

 

50%にすると、

こんなコンパクトな表が作れます。

記事の横幅にぴったり合わせたいときは、

100%にすればOKです。

 

【まとめ】初心者でも簡単にワードプレスでおしゃれな表ができる！

見やすくておしゃれな表を作りたい テーブルタグを使ってみたけど、よくわからない

そんな方にぴったりなプラグイン

『TablePress』を使った表の作り方を

ご紹介してきました。

 

”こんなに高機能でおしゃれな表が
作れるのは、ワードプレスならでは！”

 

デフォルトのデザインでも非常に綺麗ですので、

「とにかく表が作れればOK」という方は

そのまま挿入してしまえばすぐに使えますね。

 

<著者：宮垣秀之/会社情報>

 

【法人限定】今すぐSEO対策の相談をしたい方はLINEで！

今すぐ無料相談する！

 

【タイピングで３億円】右手腱鞘炎webライターが最も力を入れる無料講座【副業希望者限定】

こいつ誰やねん？！でクリック！

SUKETお勧めのwebツール３点

【コーチ・コンサルタント向け】プロモ型web集客の相談は無料