スポンサードリンク


TablePressの使い方!幅やデザインを変更!設定方法は?

WordPressで表を作成するのに便利なTablePressをご紹介します!

記事を書いていると、表を作成したいことって結構ありますよね。

そんな時に重宝するプラグインです。

 

例えば、こんな表をつくることができます。

A列B列C列
値1値2値3
値4値5値6

文字を入力して、表を作成するだけなので、とても簡単です。

デザインも自由に設定できたりもするので非常におすすめ。

機能も豊富で一度使えば、手放せなくなるプラグインですね。

 

TablePressをインストールしよう!

 管理画面の「プラグイン」からTablePressを検索します。

TablePress ダウンロード

いますぐインストールをクリックし、プラグインを有効化します。

TablePressを有効化しますと、管理画面の項目に「TablePress」という項目が表示されるようになります!

TablePress テーブル作成

 

表を新しく作成したい場合は、「新しいテーブルを追加」を選択します。

 

TablePressを利用して表を作成する!

 

①TablePressの設定画面

 表を作成するときに最初に表示される設定画面。

TablePress 使い方

 テーブル名は自分が管理するときに、わかりやすい名前でOKです。

行数と列数を指定できますが、後で変更することも簡単にできますので、このままでも問題ないです。

設定が終わりましたら、「テーブルを追加」を押します。

 

 ②表に値を入力する!

TablePress 表作成

 

「テーブルの内容」という項目で、表の値を入力できます。

ちなみに画像でいうと緑枠の部分(1行目)は初期状態で見出し(th)となっています。

もし、見出しが不要な場合は、

TablePress 見出し

「テーブルの最初の行はテーブル見出しです。」のチェックを外します。

 

③列数と行数を設定する

表の列数と行数の調整の仕方です。

Tablepress 列数 行数

 

例えば、D列とE列が不要な場合、

①と②にチェックを入れ、③の削除をクリックすると、選択した列がなくなります。

列を増やしたい場合は、「○列を追加」の項目で追加するだけです。

 

行も同様の操作をすることで、行数の設定を簡単に行えます。

 

④表を記事に貼りつける方法!

こんな感じで、表に値を入力します。

TablePress 使い方

最後に画面の一番下にあります「変更を保存」ボタンをクリックすれば、完了です。

Wordpress 表 作成

保存したら、画面の一番上まで戻って、「テーブル情報」の項目を確認します。

ショートコードというものがありますので、これをコピーして、そのまま記事に貼りつけます。

たったそれだけで、作成した表を使うことができますよ!

TablePress ショートコード

これを記事に貼りつけると、以下のように表示されます。

A列B列C列
値1値2値3
値4値5値6

基本的な操作は以上です。

 

スポンサードリンク

 

TablePressをカスタマイズして自由なデザインにする!

TablePressには他にも機能が盛りだくさん。

表のデザインをもっとこだわりたい人はご覧下さい!

 

表の幅を変更する方法!

テーブルを作る時の幅の変更方法を説明します。

列の幅を指定することができます。

 

「column_widths」をショートコードに加える

例.

A列B列C列
50%20%30%

[ table id=テーブルID column_widths=”50%|20%|30%” / ]

 

ショートコードにcolumn_widthsという項目を追加し、左から順に列の幅を指定します。

例では%で可変長にしており親コンテナのサイズに依存した設定ですが、固定値も指定できます。

 

指定が少ない場合は自動で調節される

例.

A列B列C列
100px指定なし指定なし

 

[ table id=テーブルID column_widths=”100px” / ]

 

固定値で列幅を指定してみました。

表は3列あるのに対し、ショートコードには1列分の幅しか指定しませんでした。

この場合、一番左の列が100pxとなり、その他の指定しなかった列は自動調整されます。

 

また、%と固定値を混在させることもできますよ!

 

テーブルを装飾する方法!

テーブルの装飾はCSSで行うことができます。

TablePressの「プラグインのオプション」を開いて下さい。

TablePress 装飾

 

[メニュー] -> [TablePress] -> [プラグインのオプション]

 

フロントエンド オプションを開きます。

ここにカスタムCSSが入力できるので記述していきます。

 

※CSSの○の部分はテーブルIDを指します。

 

表のヘッダ(見出し)のデザインを変更する方法!

例.

地名面積(km²)人口(人)
東京2,18813,230,000
愛知5,1547,263,000
大阪1,8998,860,000

 例では、見出し色、背景色、中央揃えにしています。

CSSを使ってデザインも自由に変更することができます。

 

表のデータ部分のデザインを変更する方法!

例.

地名面積(km²)人口(人)
東京2,18813,230,000
愛知5,1547,263,000
大阪1,8998,860,000

データ部分のデザインも設定できます。

例では、背景色を赤にしています。この他にもいろいろカスタマイズすることができます。

 

 

表の特定の部分のデザインを変更する方法!

例.

地名面積(km²)人口(人)
東京2,18813,230,000
愛知5,1547,263,000
大阪1,8998,860,000

CSSでrowとcolumnを指定することで、特定のセルのデザインを変更することができます。

 

以上です。

こちらの記事に掲載したものを応用すれば、いろんなことができますよ。

The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


3 Responses to “TablePressの使い方!幅やデザインを変更!設定方法は?”

  1. Avanti-2nd より:

    はじめましてAvanti-2ndと申します。
    CSSは初めてでサッパリ分からない初心者です。

    色んなサイトを見て入力して表は完成しましたが、まだ付け加えたいのですが何度やっても上手くいきません。
    下記のTablePressのCSSについて質問があります。

    .tablepress-id-1 thead th,
    .tablepress-id-1 tbody tr:first-child td,
    .tablepress-id-1 tbody td,
    .tablepress-id-1 tfoot th {
    border: 1px solid #000000 !important;
    color: #000000 !important;
    }

    .tablepress-id-2 thead th,
    .tablepress-id-2 tbody tr:first-child td,
    .tablepress-id-2 tbody td,
    .tablepress-id-2 tfoot th {
    border: 1px solid #000000 !important;
    color: #000000 !important;
    }

    id-1の方は1行目に背景色をつけて、文字を中央揃えにしたいと思っています。

    id-2のほうの方は3列ありますが、1番左の列の背景色と、1行目の背景色を変更(Γ←こういう感じです。)背景色は同じ色です。
    それに加えて、1行目の文字を中央揃えにしたいです。

    どこに、どういう入力をすれば出来るのでしょうか?

    方法があれば教えてください。
    よろしくお願いします。

    • よっき よっき より:

      Avanti-2ndさん、はじめまして。
      以下にサンプルの記述例を挙げさせて頂きます。

      >> id-1の方は1行目に背景色をつけて、文字を中央揃えにしたいと思っています。

      TablePressの設定で「id-1」の表を確認します。「テーブルの最初の行をテーブル見出しにする」にチェックが入ってますでしょうか?

      〔CSSの記述例〕
      /* 表の1行目の背景色の変更と中央揃え. */
      .tablepress-id-1 th {
      background: #f00 !important; // 背景を赤色にする
      text-align: center !important; // 文字列を中央揃え
      }

      >> id-2のほうの方は3列ありますが、1番左の列の背景色と、1行目の背景色を変更(Γ←こういう感じです。)背景色は同じ色です。

      同じくTablePressの設定で「id-2」の表を確認します。「テーブルの最初の行をテーブル見出しにする」にチェックが入ってますでしょうか?

      〔CSSの記述例〕
      /* 表の1行目の背景色を変更. */
      .tablepress-id-2 th {
      background: #f00 !important; // 背景を赤色にする
      }
      /* 表の1列目の背景色を変更. */
      .tablepress-id-2 td.column-1 {
      background: #f00 !important; // 背景を赤色にする
      }

      〔補足〕
      ① 1行目を指定したい場合は「.tablepress-id-X th { //CSSの記述 }」 (Xは表番号)
      ただしこれでは「表見出し」を指定していない表ですとthタグが生成されずうまく動作しません。
      そういう場合は「.tablepress-id-X tr.row-1 th,.tablepress-id-X tr.row-1 td { //CSSの記述 } 」の方が安全です。

      ② 1列目を指定したい場合は「.tablepress-id-X td.column-1 { //CSSの記述 }」 (Xは表番号)

      ③ 2行目の3列目だけ指定したい場合は.tablepress-id-X tr.row-2 td.column-3 { //CSSの記述 }」 (Xは表番号)

      詳しくは以下の画像をご覧下さい。
      TablePress 表の色付け

      ④ CSSの記述で「important」を指定しておりますが、これは他にCSSで同じプロパティ(背景色の変更など)を指定した際に、importantを付けた方を優先させるよ、という意味になります。

      すみません、もしかしたら分かり辛いかもしれません・・・。

コメントを残す




*

このページの先頭へ