【THE THOR】テーブルにアウト ラインを付けるカスタマイズ

みなさんこんにちは。

旅ブロガーのJonyとAi(@10to1_travel)です。

THE THORにはテーブル機能が付いています。

 
Jony
表みたいなやつだな!
 
Ai
商品の紹介とかで活躍するよね!
さすが THE THOR!便利♪
  • セルのヘッダー指定ができる
  • セルのサイズ・数量も自由
  • 設置が簡単

本来なら何の文句もないのですが、私たちはもう少しテーブルを強調したいわけです。

そこで本日はテーブルにアウトラインを付けて表をもう少し強調させようと思います!

THE THORのテーブルはこんな感じです。

これをもう少し分かりやすくします。

地味なカスタマイズですが、このこだわりが重要なんです!笑

私たちは THE THORのカスタマイズが大好きです。

THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊|ブログをもっとカスタマイズ!をご覧ください。

THE THOR テーブルにアウトラインを付けるカスタマイズ

それではテーブルにアウトラインを付けます。

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

上記のコードを「追加 CSS」にコピペします。
方法が分からない人は以下の記事をご覧ください。

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって[…]

3pxの部分の数値を変えると線の太さが変わります。

線のカラーは # の部分を希望のカラーコードに変えて使用してください。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

borderがアウトラインのコードです。
solidは 1本の線ですが他にも種類があります。

  • dotted:点線
  • dashed:破線
  • double:2重線

dotted:点線

the thor テーブル カスタマイズ
/*テーブル アウトライン カスタマイズ*/
.content table{
border: dotted 3px #505050;
}

dashed:破線

the thor テーブル カスタマイズ
/*テーブル アウトライン カスタマイズ*/
.content table{
border: dashed 3px #505050;
}

double:2重線

the thor テーブル カスタマイズ
/*テーブル アウトライン カスタマイズ*/
.content table{
border: double 4px #505050;
}

私たちのサイトだけなのか、2重線は 4px以上じゃないと上手く表示されませんでした。

THE THORのテーブルの設定と使い方

THE THORのテーブルの設定方法と使い方を少し紹介しておきます。

テーブルは商品や人物・観光地など色んな紹介に使えます。

文章よりも表で説明した方が分かりやすいのでぜひ使いこなしておきましょう。

テーブルの使用はここから使用することができます。

THE THORはテーブルのカラーも変更ができます。

外観 → カスタマイズ → パーツスタイル設定[THE] → テーブル設定(個別ページ用)

THE THORのおすすめ カスタマイズ一覧

私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。

そんな私たちのカスタマイズ案です。

THE THOR テーブルにアウト ラインを付けるカスタマイズ まとめ

今回のカスタマイズはとてもシンプルですが、細かいところに気を使うことでブログの見やすさはだいぶ変わります。

ぜひみなさんもひと手間加えてみてください♪

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

 
最後まで読んでいただきありがとうございます!

おわり