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

困っている人
困っている人

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

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

こんにちは、たっつー(@utakata_blog)です。

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

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

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

たっつー
たっつー

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

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

THE THOR(ザ トール)
5

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

値段

16,280円(税込)

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

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

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

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

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

記事投稿画面の表アイコン

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

表作成のマス目選択

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

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

3×5の表を作成する場合

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

作成した表

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

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

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

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

表のヘッダー部分を選択

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

セルのプロパティをクリック

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

セルの種類>ヘッダーセルを選択

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

ヘッダー部分を作成した表

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

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

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

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

WordPress管理画面の外観>カスタマイズをクリック

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

パーツスタイル設定のテーブル設定(個別ページ用)をクリック

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

テーブルデザイン設定

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

テーブルデザイン設定で任意の色を選択
それぞれの表の該当部分の説明

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

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

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

たっつー
たっつー

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

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

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

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

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

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

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

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の管理画面の「外観>カスタマイズ」に進みます。

WordPress管理画面の外観>カスタマイズ

追加CSSの「この部分に貼り付け」と書いているところに先ほどのCSSを丸ごと貼り付けましょう。最後に右上の「公開」をクリックして完了です。

追加CSSにCSSを貼り付け
たっつー
たっつー

これで横スクロールできる表がよりユーザーに優しくなりますね!

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

③.表(テーブル)のサイズを調整する

表のサイズを自由自在に調整する方法も知っておきましょう。

表を作成したら、編集したい表を選択し表アイコンから「表のプロパティ」をクリック。

表アイコンの表のプロパティをクリック

表のプロパティで幅と高さを調整していきます。

幅は100%にしておきましょう(100%にしていればモニタサイズに合わせて自動調整してくれます)。高さは300ピクセルにしてみました。

幅を100%、高さは任意のpxを入力

OK」を押せば完了です、サイズ調整で見やすい表を作成していきましょう。

たっつー
たっつー

サイズ調整も簡単ですね!!

④.表(テーブル)にアウトラインをつける

表を強調したいときはアウトラインをつけてみましょう。

下記画像はアウトラインがついていない表です。

アウトラインがついていない表

アウトラインをつけてみるとこのようになります。

アウトラインがついている表

地味ですがより表らしくカスタマイズができました。

アウトラインをつけるには下記CSSを追加するだけ。

/*テーブル アウトライン*/
.content table{
border: solid 3px #505050;
}

追加する場所は②の「”横にスクロールできます”と表示を入れる」で紹介した場所と同じです。

たっつー
たっつー

表(テーブル)を強調したい時はアウトラインをつけると目立ちます!!

CSSカスタマイズは自己責任でお願いします。
関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.14.pn[…]

最後に:表(テーブル)機能マスターしてTHE THORを使いこなそう!!

今回はTHE THOR(トール)の表(テーブル)の利用方法・活用方法を紹介してきました。

ユーザビリティのためにも積極的に表(テーブル)機能を利用してわかりやすく読みやすい記事を仕上げていきましょう。

応用編のおさらいです。

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

表(テーブル)は読者に情報をわかりやすく伝えることができるとても大切な要素です。THE THORの表(テーブル)を活用して「わかりやすかった!!」と思ってもらえる記事にしていきましょう。

THE THOR(ザ トール)
5

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

値段

16,280円(税込)

他にもTHE THORを利用してく中で役に立ったカスタマイズなどを下記記事にまとめています。ぜひ参考にしてみてください。

関連記事

こんにちは、たっつー(@utakata_blog)です。 この記事では実際にTHE THOR(トール)を利用している僕がよりよいサイト作りのために取り入れているカスタマイズを紹介します。 当ブログ(ウタカ[…]

今回は以上です。

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-19.17.14.pn[…]

関連記事

[word_balloon id="unset" src="https://memoriesto-go.com/wp-content/uploads/2020/03/スクリーンショット-2020-03-03-20.[…]

最新情報をチェックしよう!
>当ブログは「THE THOR」で作成しています!!

当ブログは「THE THOR」で作成しています!!

「THE THOR」は集客・収益に徹底的にこだわったテーマです。 MP・PWAなど最新鋭の技術を搭載し、サイトの表示速度はWordPressテーマの中でもトップクラス。

CTR IMG