スポンサードリンク


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.
      よっき プロフィール画像
      パソコンが大好きな青年。職業はプログラマ/SE。 フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。

      スポンサードリンク


      4 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を付けた方を優先させるよ、という意味になります。

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

      2. beluga より:

        はじめまして、wordpress初心者で表作成について色々調べていてここにたどり着きました。

        tablepressを使い簡単な表を作成することはできたのですが、Excelのようなことができる表にしたいです。

        縦100行×横20列程度の表を作りたいと思うんですが、PCスマホとも普通には表示できないですよね。
        そこで横を20列の中から10列程度に閲覧者が任意で選んで、できたら固定できる。
        表のヘッダー1行は固定したままスクロールできる。
        ソート、抽出の機能と元に戻すボタンをつける。

        初心者には難しすぎる機能かもしれないので、もしプラグイン機能拡張の作成依頼等になるということでしたらそちらで改めてお願いしたいと思っております。

        なにか解決策がありましたら、ご提案いただけないでしょうか。

      コメントを残す




      CAPTCHA


      このページの先頭へ