THE THOR(トール)の表(テーブル)機能をカスタマイズしよう!!｜基本編〜応用編

※当ページのリンクには広告が含まれています

悩んでいる人

THE THORで表(テーブル)を活用したいけどよくわかりません…基本的な使い方からカスタマイズ方法など色々知りたいです！

こんな悩みを解消します。

こんにちは、ペコ(@utakatablog2)です。

今回はWordPressテーマ”THE THOR(トール)”の表(テーブル)の基本的な使い方や知ってると便利なカスタマイズ方法を７つに分けて紹介していきます。

表は情報をわかりやすく伝えるための重要なツール
THE THORの表の作成・ヘッダー・色の設定｜基本編
THE THORの表のカスタマイズ方法４選｜応用編

ユーザーの視認性を高めるためにも積極的に使ったほうがいい表(テーブル)の使い方をマスターして活用していきましょう!本記事を参考にいい感じにカスタマイズしてオリジナリティも出してください。

ペコ

表を作るとユーザーの滞在時間が伸びやすくSEO的にも効果的です。

応用編では表(テーブル)をより効果的に使えるカスタマイズ方法を見出しごとに紹介していきますね。

毎日「また増えた！」を実感。集客・収益に徹底的にこだわった結果へ導く次世代WordPressテーマ「ザトール」。

値段	16,280円(税込)

THE THOR(ザトール)公式サイトはこちら

1 THE THORの表(テーブル)機能の使い方｜基本編
2 THE THORの表(テーブル)機能の使い方｜応用編
3 最後に:表(テーブル)機能マスターしてTHE THORを使いこなそう!!

THE THORの表(テーブル)機能の使い方｜基本編

まず基本編ではTHE THOR(トール)の表(テーブル)の作成方法を下記３つに分けて手順を追って紹介していきます。

基本的な表(テーブル)の作成手順
表(テーブル)にヘッダーを入れる手順
表(テーブル)の色の設定方法

①.基本的な表(テーブル)の作成手順

表(テーブル)を作成するには、記事投稿画面の「表アイコン」をクリック。

「テーブル」にカーソルを合わせるとマス目が出てきます。

今回は例として「3×5」の表(テーブル)を作成してみましょう。

マス目をスライドして「3×5」マスが反転するように選択していきます。

すると下記のように空の表(テーブル)が出現します。

基本的な表(テーブル)はこれで完成です。あとはマスごとに文字を埋めていくのみ。

ただこれでは見づらいのでヘッダー部分をいじっていきましょう！

②.表(テーブル)にヘッダーを入れる手順

それでは先ほど作成した表(テーブル)に戻って、ヘッダー部分を下記画像のようにドラッグして選択しましょう。

選択できたら、表アイコンの「セル＞セルのプロパティ」をクリック。

セルのプロパティの画面が出てくるので、赤枠のようにセルの種類を「ヘッダーセル」に切り替えて「OK」をクリック。

これでヘッダー部分の色が変化するので見やすい表(テーブル)にすることができました。

③.表(テーブル)の色の設定方法

デフォルトの状態は色が地味なので好みの色を設定する手順を紹介していきます。

少々ややこしいですが、わかりやすく説明していきます。

まずは、WordPressのダッシュボードから「外観＞カスタマイズ」をクリック。

カスタマイズの中の「パーツスタイル設定＞テーブル設定(個別ページ用)」に進みます。

テーブルデザイン設定の画面で色を選択していきます。

例としてこのように設定してみました。反映させると下記のようになります！

それぞれの反映箇所は図中で紹介していますが、テキストで説明するとこんな感じです。

文字色：表の文字色
線色：表の線色
TH背景色：ヘッダー部分の背景色
TH文字色：ヘッダー部分の文字色
TD背景色：表の背景色(奇数列)
TD背景色(偶数列)：表の背景色(偶数列)

設定方法が少しややこしいですが、この手順で色の設定が可能です。

ペコ

ここまでマスターできれば表(テーブル)の基本的な作成は大丈夫！

THE・THOR(ザ・トール)の公式HPはこちら

THE THORの表(テーブル)機能の使い方｜応用編

続いてはTHE THOR(トール)の表機能をよりパワーアップするためのカスタマイズ方法を紹介していきます。

今回紹介するのは以下の通り。気になるカスタマイズ方法を試してみてください！

表(テーブル)を横スクロールさせる
”横にスクロールできます”と表示を入れる
表(テーブル)のサイズを調整する
表(テーブル)にアウトラインをつける

①.表(テーブル)を横スクロールする

THE THORでは表が横に長くなるとき、横にスクロールすることが可能です。

記事投稿画面で下記画像の赤丸内のアイコンをクリックしてみましょう。

すると点線の枠が出現します。

あとは点線内でスライドさせたい表を作成するだけ。今回は例として横に長い表を作成してみました。

プレビューで確認してみるとこんな感じです(下の図は画像なのでスクロールしません)。

ペコ

特にスマホで閲覧する際に横スクロールは便利ですね！

②.”横にスクロールできます”と表示を入れる

続いては横スクロールすることがすぐわかるように下記画像のように「横スクロールできます>>>」と表示を入れてみましょう。

表示させる方法はWordPressの追加CSSに下記CSSを追加するだけです!!

/*横スクロール*/
@media screen{
.tableScroll:before {
content: “横にスクロールできます >>>”;
font-size:80%;
font-weight:800;
color:#0268b7;
position: relative;
position: -webkit-sticky;
position: sticky;
left: 0;
animation: yokoSC 1.5s ease-in-out infinite alternate;
}
}
@keyframes yokoSC{
0% {opacity:.2;}
100% {opacity:1;}
}
@-webkit-keyframes yokoSC{
0% {opacity:.2;}
100% {opacity:1;}
}
@-moz-keyframes yokoSC{
0% {opacity:.2;}
100% {opacity:1;}
}
/*横スクロールここまで*/

追加する場所はWordPressの管理画面の「外観＞カスタマイズ」に進みます。