【THE THOR】表（テーブル）の色設定とスマホテーブル横スクロールの方法！便利な表を使いこなそう！

THE THORのテーブル（表）ですが、もともとの設定では白と灰色のセルで、これはもう少しどうにかできないものかと思ったことはありませんか？

私は、最近これが設定で変更できることを知りました(;^_^A

THE THORは、かれこれ１年近く使っていますが、最近色々と調べてるうちに発覚しました。

THE THORの公式マニュアルを見ても分からないところが相変わらずですが、できるかぎり分かりやすく説明したいと思います。

テーブル（表）とは

何かを比較する場合、テーブル（表）になっていると分かりやすいですよね。

下の図です！

ブログ記事でもよく見かけますね。

このサイトでもいくつかの記事で使っていますが、なぜかもともとの設定が白黒になるので、普通の表は使えないものかと思ってはいたのですが。

使い勝手もいまいちですし･･･。

ところがこのTHE THORでは、設定をすると１パターンだけですが、カスタムで色を固定出来ます。

ちょっと分かりづらいので、わかりやすく方法を説明します。

テーブル色の設定方法

設定場所と設定項目

外観⇒カスタマイズ⇒パーツスタイル設定⇒テーブル設定（個別ページ用）

この部分で設定します。

設定の表記も、分かりづらい表記なので例を出して説明しますね！

「テーブルデザイン設定」の･･･

①デザインを選択【基本（default) or 点線の2択】

基本（線の色を灰色に指定）

点線（線の色を灰色に指定）

文字色を指定

③線色を指定

④TH背景色を指定（TH=Table Headerの略）

⑤TH文字色を指定

⑥TD背景色を指定（TD=Table Dataの略）

⑦TD背景色（偶数列）を指定

どこのことだかわかりにくいので、下の表を見て下さい。

色設定について

ここで色設定ですが、自由に選べるようになっています。

下に８色のパレットがあります。

この色で良いという方は、クリックすればOKです。

他の色にしたい場合は、四角のエリアで好みの色を選択し、

右のバーで濃度を調整します。

カラーコードで指定する方法

この色にしたいというものがある場合のやり方で、カラーコード（＃＋英数字）で指定することが出来ます。

コード入力場所は以下の場所なので、好きな色のコードを入力しましょう。

カラーコードの調べ方

こちらのサイト【カラーピッカー】から取得すれば簡単にコードが調べられます。

【＃＋カラーコード】を入力すればOKです！

設定が完了したら、一番上の【公開】ボタンを押すのを忘れないようにしましょう！

使い方

表を描いてみる

投稿記事で、テーブルを選び描いてみます。

こんな感じになります・・・

TD背景色を白、線色を灰色に設定してみました。普通の表は描けましたが、ヘッダー部分に色がつきませんね･･･。

そのままテーブルを描いただけだと、ヘッダー部の色が反映されないのです。

ここで、先ほど描いたテーブルにここがヘッダーだよと指定する必要があります。

ヘッダーの設定をしよう

ヘッダーにしたい部分をドラッグして選択します。

次に、テーブルメニューから、【セル】⇒【セルのプロパティ】

ここで、【セルの種類】を【ヘッダーセル】に変更します。

ここで、KOKを押しましょう。

ここでOKを押しましょう。

これで、思い通りですね。

ヘッダーセルの部分は太文字になります。

色が気に入らない場合は、先ほどの設定に戻ってやり直しましょう。

ちなみに同じ要領で縦も出来ます。

The Thorの機能を使って横スクロールの表を作成する方法

「THE THOR」には、「スマホテーブル横スクロール」という機能が備わっています。

横スクロールの表を挿入したいところにカーソルを移動し、下記の枠内のボタンから「スマホテーブル横スクロール」の機能を実行します。

ボタンを押した後、記事内に点線の枠が表示されればOKです。

スマホテーブル横スクロールの枠内にテーブルを作成

下記の「スマホテーブル横スクロール」の枠内にテーブルが作成されればOKです。

プレビューの画面で横スクロールが動作するか確認してみてください。

ここでは、上記で紹介したものを応用して適当にスマホテーブル横スクロールの表を作成してみました。

以下のような横スクロールの表が作成できていればOKです。

まとめ

今回は、THE THORで表を使う場合の色設定とスマホテーブル横スクロールの表について、紹介しました。

マニュアルらしきものがあるんですが、分かりづらくていつもGoogle先生にお世話になっています。

表は、内容が整理されて、分りやすくする良い手段です。

色設定をして、積極的に使っていきましょう！

最後までご覧いただき、ありがとうございました。