みなさんこんにちは。
旅ブロガーのJonyとAi(@10to1_travel)です。
THE THORにはテーブル機能が付いています。
さすが THE THOR！便利♪
- セルのヘッダー指定ができる
- セルのサイズ・数量も自由
- 設置が簡単
本来なら何の文句もないのですが、私たちはもう少しテーブルを強調したいわけです。
そこで本日はテーブルにアウトラインを付けて表をもう少し強調させようと思います！
THE THORのテーブルはこんな感じです。
これをもう少し分かりやすくします。
地味なカスタマイズですが、このこだわりが重要なんです！笑
私たちは THE THORのカスタマイズが大好きです。
THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊｜ブログをもっとカスタマイズ！をご覧ください。
THE THOR テーブルにアウトラインを付けるカスタマイズ
それではテーブルにアウトラインを付けます。
/*テーブル アウトライン カスタマイズ*/
.content table{
border: solid 3px #505050;
}上記のコードを「追加 CSS」にコピペします。
方法が分からない人は以下の記事をご覧ください。
みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ！】ってタイトルありますよね。 でも コピペってどこに？追加 CSSって[…]
3pxの部分の数値を変えると線の太さが変わります。
線のカラーは # の部分を希望のカラーコードに変えて使用してください。
borderがアウトラインのコードです。
solidは 1本の線ですが他にも種類があります。
- dotted：点線
- dashed：破線
- double：2重線
dotted：点線
/*テーブル アウトライン カスタマイズ*/
.content table{
border: dotted 3px #505050;
}dashed：破線
/*テーブル アウトライン カスタマイズ*/
.content table{
border: dashed 3px #505050;
}double：2重線
/*テーブル アウトライン カスタマイズ*/
.content table{
border: double 4px #505050;
}私たちのサイトだけなのか、2重線は 4px以上じゃないと上手く表示されませんでした。
THE THORのテーブルの設定と使い方
THE THORのテーブルの設定方法と使い方を少し紹介しておきます。
テーブルは商品や人物・観光地など色んな紹介に使えます。
文章よりも表で説明した方が分かりやすいのでぜひ使いこなしておきましょう。
テーブルの使用はここから使用することができます。
THE THORはテーブルのカラーも変更ができます。
THE THORのおすすめ カスタマイズ一覧
私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。
そんな私たちのカスタマイズ案です。
THE THOR テーブルにアウト ラインを付けるカスタマイズ まとめ
今回のカスタマイズはとてもシンプルですが、細かいところに気を使うことでブログの見やすさはだいぶ変わります。
ぜひみなさんもひと手間加えてみてください♪
※CSSカスタマイズは自己責任でお願いします。
おわり
- 2021年4月6日
- THE THORのカスタマイズ
- CSSカスタマイズ, THE THOR