表を簡単に作成できる、TablePressの使い方と表の作り方

スポンサーリンク

表を簡単に作成できる、TablePressの使い方と表の作り方

サイトを作る際にはもちろん、ブログの記事などを作成する際にを挿入したいときがあると思います。

しかしながら、WEBページに文字列として表を作成するには、HTML・CSSの知識が必要になってきます。HTML・CSSは比較的、簡単に習得しやすいと言われています。(私はそうは思わないですが…)

といっても、あくまで比較的なだけで習得するには数か月の期間が必要になるでしょう。

それですと、学習効果が低いため『TablePress』というプラグインを使用して、簡単に表を作成して記事に挿入しましょう。

HTML・CSSは、ブログ運営でも役に立つので、習得しておくのも悪くないですが、今回は表を作成することのみを考えます。興味のある方は勉強してみて下さい。意外と面白いです。

スポンサーリンク

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

まずは、WordPressでプラグインを使う際のお決まり、プラグインをご自身のWordPress環境にインストールしていきましょう。

基本的に、他のプラグインと同じ方法なので、ご存知の方は読み飛ばしてもらって結構です。

 

では、まずWordPressのダッシュボードから『プラグイン』、『新規追加』を選択しましょう。

WordPressのダッシュボードから新規追加を選択する

そうすると、以下のような『プラグインを追加』のページに移動します。

右上にプラグインを検索する箇所がありますので、そこに『TablePress』と入力してください。

検索フォームにTablePressと入力する

すると、一番最初に出てきますので、『今すぐインストール』を押しましょう。インストールには、少しだけ時間がかかりますので、すこし待ちましょう。

インストールが終了すると『今すぐインストール』が『有効化』に変化しますので、有効化を押してください。こちらも少しだけ時間がかかります。

以上で、TablePressのインストールが完了しました。

TablePressの使い方

TablePressの使い方

では、さっそくTablePressを使用していきましょう。

表を作成しましょう

まずは、サイトやブログの記事に貼り付ける表を作成していきます。

TablePressをWordPressにインストールするとダッシュボードに『TablePress』という項目が増えます。

WordPressのダッシュボードにTablePressが追加されています

上のような画像になっているはずです。

※上のような画像になっていない場合は、TablePressが正常にインストールされていません。インストール手順を見直してください。

TablePress』を押すと、作成している表の一覧が出てきますが、初期状態では何もありません。

表を新たに作成するためには、『新規追加』のタブを押してください。

TablePressから新規追加を選択してください

表の新規追加画面に移動すると、

  • テーブルの名前
  • 説明
  • 行数
  • 列数

を入力する箇所が存在しますので、入れていきます。

新規追加画面の編集方法を説明する画像

説明は、特に必要ないので入れなくても大丈夫です。

行数・列数は、必要な数を入力しますが、あとからでも簡単に編集できますので、あまり考えすぎなくても大丈夫です。

ちなみに、私もよくどっちが行でどっちが列なのかわからなくなるのですが、は右側が縦棒二本なのでと覚えておくと視覚的に判断しやすいです。

入力が終わったら、『テーブルを追加』を押してください。

編集が終了したらテーブルを追加を選択してください

すると、『テーブルの編集』画面になります。

その画面で下にスクロールしていくと、上記の画像のような編集項目がありますので、ここで表の内容を作成していきます。

文字を挿入したいところをクリックすると入力モードになりますので、そのまま文字を入力すればいいだけです。画像やリンクなどは画像下の『テーブルの操作』で設定できます。

表の設定を編集する方法を説明する画像

また、ドラッグ&ドロップで行・列の順序を変更することができます。

さらに、下のほうにスクロールしていくと詳細な設定を行えます。

表の詳細設定を編集する方法を説明する画像

テーブルのオプション』は、表のデザインに関する設定になりますので、お好みで設定しましょう。

最後にある『追加のCSSクラス』は後ほど詳しく説明していきます。

ライブラリの機能』は、JavaScriptに関する設定になります。JavaScriptはページを更新しなくてもデザインを変更したりできます。

ただ、スクロールが表示されたりするため表の邪魔になりかねません。普通の表を作成したい場合は、「このテーブルで以下のDatatables JavaScriptライブラリ機能を使用する」のチェックを外しましょう。

設定が終わったら『変更を保存』を押せば表の完成です。

設定が完了したら変更を保存のボタンを押してください

最後に、『すべてのテーブル』タグを押して作成した表が表示されているか確認しましょう。

表を記事に挿入しましょう

次は、先ほど作成した表を記事に挿入していきます。

といってもとても簡単で、『すべてのテーブル』の画面で、先ほど作成し表の名前にカーソルをあてると、メニューが表示されますので、その中の『ショートコードを表示』を押してください。

ショートコードを表示ボタンを押してください

すると、ウィンドウが出現してきますので、そこに記載されているコードをコピーしましょう。

あとは、記事にそのまま貼り付けるだけで大丈夫です。

以下のようなができていますので確認してみましょう。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

表のデザインを変更しよう

表のデザインを変更しよう

先ほど作成した表のようにデフォルト状態では、青っぽい表が作成されます。

しかしながら、CSSを利用することで表のデザインを変更することができます。CSSといっても、サンプルのコードを貼り付ければいいので安心してください。

CSSを追加する方法

まずは、デザインの変更を行うためのCSSを追加する方法を説明します。

WordPressのダッシュボードから『TablePress』、『プラグインのオプション』を選択してください。

すると、以下のような画面になります。

プラグインのオプションを選択してください

赤枠の『カスタムCSS』にCSSのコードを入力して『変更を保存』を押せば、デザインを変更することができます。

1行のみ背景の色を変更する(※2行目以降)

では、実際に表のデザインを変更していきます。

まずは、表の一行のみ背景の色を変更する(※2行目以降)方法です。

※一行目は、少しコードが違いますのでご注意ください。

上記のCSSを先ほどのカスタムCSSに追記していきますが、その前に少しCSSを編集します。

変更しなければいけない場所は、

  • tablepress-id-N
  • row-X
  • background-color: #ff0000;

の三か所です。

『tablepress-id-N』は、表のIDで、表を記事に埋め込む際に記入したショートコードの数字になります。

table id=2 / ←この数字

N』の部分をIDに変更してください。(上記の例だと、tablepress-id-2

『row-X』は、変更したい行の数字を指定します。二行目なら『row-2』にしてください。

『background-color: #ff0000;』は、変更する色を指定します。こちらは、カラーコードを入力しなければいけませんので、

WEB色見本 原色大辞典 – HTMLカラーコード

こちらを参考に好きな色のコードを探しましょう。

今回は、『#ff7f50』を使用していきます。

変更した場合の例は、以下です。

※tablepress-id-Nは自身の表のIDを入力してください。

変更後の表はこちらです。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

一行目の背景を変更する

次は、一行目の背景を変更します。

CSSコードは以下です。

変更しなければいけない場所は、

  • tablepress-id-N
  • background-color: #ff0000;

の二か所のみ変更していきます。

こちらは、

1行のみ背景の色を変更する(※2行目以降)

と同じですので、こちらを参考にしてください。

変更後の表は、以下のようになります。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

奇数行の背景の色を変更する(※1行目以外)

奇数行の背景の色を一括に変更することもできます。

一行目は、含みませんので注意してください。

CSSコードは以下です。

変更しなければいけない場所は、

  • tablepress-id-N
  • background-color: #ff0000;

の二か所のみ変更していきます。

こちらは、

1行のみ背景の色を変更する(※2行目以降)

と同じですので、こちらを参考にしてください。

変更後の表は、以下のようになります。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

偶数行の背景の色を変更する

偶数行の背景の色を一括に変更することもできます。

CSSコードは以下です。

変更しなければいけない場所は、

  • tablepress-id-N
  • background-color: #ff0000;

の二か所のみ変更していきます。

こちらは、

1行のみ背景の色を変更する(※2行目以降)

と同じですので、こちらを参考にしてください。

変更後の表は、以下のようになります。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

一行目の列(セル)の背景の色を変更する

こちらは、まずは完成を見てもらったほうがわかりやすいと思います。

完成は以下です。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

このように一行目の色を個別に変更することができます。もちろんうまく使用することで、奇数列、偶数列の色を変更したり、すべての列の色を変更したりすることもできます。

以下が、変更するためのCSSコードです。

変更しなければいけない場所は、

  • tablepress-id-N
  • column-X
  • background-color: #ff0000;

の三か所です。

『tablepress-id-N』と『background-color: #ff0000;』は、

1行のみ背景の色を変更する(※2行目以降)

と同じですので、こちらを参考にしてください。

『column-X』は、変更したい列の番号に変更してください。

複数列変更したい場合は、

.column-1 .column-2

のように増やしていけば大丈夫です。

二行目以降の列の背景の色を変更する

二行目以降の列の背景の色を変更していきます。

以下が、変更するためのCSSコードです。

変更しなければいけない場所は、

  • tablepress-id-N
  • column-X
  • background-color: #ff0000;

の三か所です。

『tablepress-id-N』と『background-color: #ff0000;』は、

1行のみ背景の色を変更する(※2行目以降)

と同じですので、こちらを参考にしてください。

『column-X』は、変更したい列の番号に変更してください。

複数列変更したい場合は、

.column-1 .column-2

のように増やしていけば大丈夫です。

この列の背景の色の変更には、行のように奇数、偶数一括指定ができませんのでうまく指定して作成するようにしてみてください。

変更後の表は、以下のようになります。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

また、一行目の列(セル)の背景の色を変更すると組み合わせることで、列全体の色を変更することができます。

マウスホバー時の背景の色を変更する

表の背景の色を変更しただけでは、マウスのカーソルをあてた際(マウスホバー)にデフォルトの色が表示されてしまいます

せっかく、背景の色を変更したのにこれでは不格好なので、こちらも変更していきましょう。

変更方法は、先ほどまで追加していたコードに『:hover』を付け加えたものをさらに追加します。

具体的には、

こちらの奇数行の背景の色を変更するコードに

このようなCSSコードを追加することで、マウスホバー時の色を変更することができます。

マウスホバー時の色を変えたり、透明度(opacity)を変更することで、よりデザイン的な表を作成することができます。

テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト
テストテストテストテストテスト

複数の表のデザインを指定する

今まで、一つの表のデザインを紹介してきましたが、ブログ内の表のデザインを一括で変更したい場合です。

といってもとても簡単で、今までCSSコードを追加する際に『tablepress-id-N』というを書いていましたが、こちらを『tablepress』に変更するだけで大丈夫です。

まとめ

このように、『TablePress』を使用することで、とても簡単に表を作成して記事に挿入することができます。

画像ではなく、しっかりとHTML文字で作成されますのでSEO対策にもなります。

ぜひ、使ってみてください。

また、デザインのCSSに関しては、質問があればできるだけ対応しようと思いますので、その際はコメントかお問い合わせにお願いします。

コメント