管理人『ふっく』はこんな人

表作成プラグインTablePressが便利!使い方や幅のカスタマイズ方法

ある程度WordPressが使いこなせるようになっても難しいのはTableタグですよね。表が簡単に作成できるプラグインTablePressをご紹介します。

表作りが簡単に

テーブルタグって複雑ですから、ブログは書けるけど表は作れないっていう人も多いのではないでしょうか?TablePressをインストールすれば誰でも綺麗な表を作成することができるようになります。

TablePressで作成した表は並び替えなどもすることができるようになるので、非常に便利ですし、表をうまく使いこなすことでわかりやすいサイト作成ができるようになります。

TablePressをインストールする

ダッシュボード『プラグイン』→『新規追加』でTablePressを入力し、インストールをしましょう。

tablepress

プラグインを有効化すると、ダッシュボードにTablePressが追加されているはずです。

tablepress

テーブルの追加をクリックし、『新しいテーブルを追加』に必要なことを記入しましょう。

テーブル追加 新しいテーブルを追加

『テーブルの内容』に表に書きたいことを記入しましょう。出来上がったら一番下の『変更を保存』をクリックしましょう。

テーブルの内容

新しいテーブルの作成が終わったら『全てのテーブル』から選択ができるようになっています。

ショートコードを表示をクリックすると、ショートコードを獲得できます。このショートコードをブログの表を表示したいところに貼るだけです。

すべてのテーブル ショートコード

こちらの記事にさきほどのショートコードを貼るとこんなかんじになります。

リンゴゴリララッパパンダ
サイズ
黄色白黒
種族食べ物動物楽器動物
好き・嫌い好き普通好き好き

TablePressの幅をカスタマイズする

最初の設定だと全てが均等の表が出来上がります。幅を簡単にカスタマイズする方法を説明します。

ABCD
10%30%30%30%
こちらは幅が左から10%、30%、30%、30%となっています。
トータルで100%にする必要があります。

pxで表記することもでき、1つだけ入力すれば後は自動的に表示されます。

幅のカスタマイズ方法は先程の用にショートコードをはりつける時に

[table “” not found /]

このようにcolumn_widths以下を追加します。パーセンテージを変えれば色々と幅を変えることができます。◯にはid番号を入力してください。

通常はテーブルが幅いっぱいに表示されるようになっていますが、こちらもカスタマイズすることができます。

プラグインのオプションからカスタムCSSに入力をしていきます。

カスタムCSS

テーブルの幅を半分にしたいときは

.tablepress-id-◯ {
width: 50%;
}

このように記載しましょう。

こんなかんじに表示されます。

ABCD
10%30%30%30%

並び替えを辞める

初期設定だと並び替えができるようになっていますが、並び替えをする必要がないときには『DataTablesを使用』のチェックを外しましょう。

並び替え

これで普通の表のようにすることができます。

更にカスタマイズする

部分部分に色を付けて強調することもできます。
重要な部分に赤や黄色で装飾すると見やすくなりますね。

リンゴゴリララッパパンダ
サイズ
黄色白黒
種族食べ物動物楽器動物
好き・嫌い好き普通好き好き
.tablepress-id-◯ .row-2 .column-3,
.tablepress-id-◯ .row-3 .column-5,
.tablepress-id-◯ .row-5 .column-2,
.tablepress-id-◯ .row-5 .column-2, 
.tablepress-id-◯ .row-5 .column-2{
background-color: yellow;
color: red;
font-weight: bold;
}

rowが行、columnが列になっています。

WordPressで表を作ることに抵抗があった人も、TablePressを使えば表作成をマスターできると思いますよ。記事の内容によっては表にしてあげたほうが訪問者にわかりやすいものも多いので、ぜひぜひ活用していきましょう。

【メルマガ登録】無料オンライン講座プレゼント