• プライマリナビゲーションにスキップする
  • メインコンテンツにスキップ
  • メインサイドバーにスキップ
  • フッターにスキップ
ダブスト

ダブスト

日本のスモールビジネスに武器を

  • プラグイン
    • すべて
    • 無料
    • 有料
    • ビジネスモデルから探す
    • 機能から探す
    • 目的から探す
  • テーマ
    • すべて
    • 無料
    • 有料
    • Genesis Framework
    • Storefront
  • ダブスト活用法
    • ビジネスモデル別レポート(20種)
    • 機能別レポート(16種)
  • 動画チュートリアル
  • サポート
    • 使い方マニュアル
    • よくある質問
    • バージョンアップ情報
    • リリーススケジュール
    • お問い合わせ
    • Web制作業の方へ
  • ログイン
  • 会員登録詳細
  • bookmarksお気に入り
ホーム chevron_right プラグイン chevron_right 機能から探す chevron_right WordPress プラグイン chevron_right ページ作成・カスタマイズ chevron_right 表・チャート・テーブル chevron_right TablePress chevron_right TablePress の使い方 (1.1)
chevron_leftTablePress 目次expand_more
目次
  • テーブルプレスの設定画面
  • テーブル(表)の作成
  • テーブルの編集
  • 記事にテーブルを追加する
  • 便利な機能

TablePress の使い方 (1.1)

  • テーブルプレスの設定画面
  • テーブルの作成
  • テーブルの編集
  • 記事にテーブルを追加する
  • 便利な機能

テーブルプレスの設定画面

作成したテーブルの一覧表や、新規追加、インポート・エクスポートの設定を行います。

サイドメニュー > 表埋め込み をクリックします。
「TablePress」の設定画面が表示されます。

 

テーブル(表)の作成

テーブルの情報を入力します。

  1. サイドメニュー > [TablePress] > [新しいテーブルを追加] をクリックします。
    TablePress_サイドメニュー_1
    設定画面が表示されます。
    TablePress_設定画面_3
  2. [テーブルの名前] 、[詳細]、 [行数]、 [列数]の各項目に入力します。
    TablePress_設定入力説明_4
    ・これらの項目は作成後に変更可能です。
    ・[テーブル名]、 [詳細] は省略可能です。
  3. [テーブルを追加] ボタンをクリックします。
    TablePress_テーブルを追加ボタン_5
    テーブルの編集画面が表示されます。
    ・この時IDとショートコードが自動で生成されます。
    (任意の値を入力することもできます。)
    TablePress_新規追加>編集画面_2
    新しく作成されたテーブルが [テーブルの内容] に表示されます。
    TablePress_新規テーブル_6

 

テーブルの編集

テーブルに行・列の挿入や削除、表示・非表示の切り替え、大きさの変更をします。

表に値を追加する

  1. [テーブルの内容] の項目で、表の値を入力します。
    TablePress_テーブル入力枠_7
    赤枠の部分(1行目)は初期状態で見出しとなっています。(下図)
    TablePress_テーブルタイトル行見出しが不要な場合は、[テーブルのオプション] 項目の「テーブルの最初の行はテーブル見出しです。」のチェックを外します。
    TablePree_テーブルオプションヘッド行

列数と行数を編集する

表の列数と行数を追加したり、削除したりします。
「D列」と「E列」が不要な場合を例として表を調整してみましょう。

  1. 下部の [テーブルの操作] 項目で、削除したい列にチェックを入れます。
    「D列」と「E列」の下部にあるチェックボックスにチェックを入れました(下図①、②)
  2. 下部の [テーブルの操作] 項目から、[削除] ボタンをクリックします。(下図③) 選択した「D列」・「E列」が表から削除されました。
    TablePress_列削除後
    行・列の「追加/削除」、「表示/非表示」なども、設定を行う行・列にチェックを入力 > [テーブルの操作] 項目の操作ボタンを押下 で同様に設定できます。
    TablePress_テーブル操作ボタン枠

セルの大きさの変更

セルの大きさの変更するには、各セルの右下部分をドラッグします。
TablePress_セルの拡大

作成した表の確認

  1. 表の状態を確認するには、設定画面下部の [プレビュー] をクリックします。
    TablePress_プレビューボタン
    プレビューでテーブルが表示されます。TablePress_作表プレビュー
  2. 問題がなければ、[変更を保存] をクリックします。
    TablePress_変更を保存ボタン
    テーブルが保存されます。

記事にテーブルを追加する

保存したテーブルをショートコードを使って記事内に埋め込みます。
※ショートコードは新しいテーブルを作成すると、自動的に生成されます。

  1. テーブルプレスの設定画面の上部を表示します。
    TablePress_新規追加>編集画面_2
  2. ショートコードをコピーします。
    TablePress_ショートコードをコピー
  3. 作成したテーブルを挿入したい記事内の好きな箇所にコピーしたショートコードをペースとして挿入します。
    TablePress_ショートコードを記事挿入
  4. または、記事作成画面のビジュアルエディタの [TablePressからテーブルを挿入] のアイコンをクリックします。
    TablePress_テーブル挿入アイコン
    ※このアイコンはテーブルを作成すると、自動的に追加されます。 作成した表の一覧が表示されます。
  5. 記事に追加するテーブルの [ショートコードを挿入] ボタンをクリックします。
    TablePress_表のリスト>ショートコード挿入ボタン
    記事内にコードが追加されました。
  6. 記事編集の右上画面の [プレビュー] ボタンをクリックします。

    プレビュー画面が表示されます。
    TablePress_表の挿入_プレビュー
  7. 編集の右上画面の [更新] ボタンをクリックします。
    TablePress_変更を保存ボタン
    設定が保存され、テーブルがサイトに表示されます。

便利な機能

DataTables Java Scriptライブラリの機能で各種オプションを使用できます。
該当項目にチェックを入れると、訪問者が以下の操作を行うことができます。

    • 一度に表示されるテーブルの行数の設定
    • 検索、フィルター機能の使用
    • データの並べ替え
      TablePress_DataTablesJavaScriptライブラリ機能設定画面

このプラグインを使うと、HTMLやCSSを知らない方でも、簡単な操作で色々な表を作ることができます。
表を見やすくより詳細に装飾する場合は、CSSを利用して見栄えをよくすることも可能です。
表を作るときは「TablePress」を利用してみましょう。

 

メインサイドバー

目次
  • テーブルプレスの設定画面
  • テーブル(表)の作成
  • テーブルの編集
  • 記事にテーブルを追加する
  • 便利な機能
カート
カートに何も入っていません
合計(税別) 0円
カートを確認
0 shopping_cart close

Footer

ダブスト

日本のスモールビジネスに武器を

世界のスモールビジネスに選ばれた武器を、
日本のスモールビジネスへ

サービス

  • プラグイン
  • テーマ
  • ダブスト活用法 無料レポート
  • チュートリアル
  • 無料会員特典

サポート

  • 使い方マニュアル
  • よくある質問
  • バージョンアップ情報
  • リリーススケジュール
  • お問い合わせ
  • 取材・インタビュー(準備中)
  • 無料相談(準備中)

会社情報

  • 会社概要
  • 利用規約
  • 特定商取引法に基づく表示
  • プライバシーポリシー
  • 学校をつくっています

パートナー

  • アフィリエイト(継続・2ティア)募集
  • パートナー募集(準備中)
  • Web制作業の方へ

Copyright © 2026 ダブスト All rights reserved.