【コピペで簡単】THE THORでやっとくべき＆おすすめCSSカスタマイズ

2021年12月10日
ブログ運営
1551view

この記事がおすすめの人

有料テーマ『THE THOR』を利用している
THE THORでおすすめ＆必須の追加CSSを知りたい
CSSカスタマイズを紹介しているおすすめのサイトを知りたい
表や埋め込み動画がスマホで崩れて困る

1 追加CSSでカスタマイズ！
2 CSSとは？
3 やっておくべきCSS
- 3.1 表をスクロールさせるCSS
  - 3.1.1 デモ
  - 3.1.2 コード
- 3.2 埋め込みYouTubeのレスポンシブ対応
4 おすすめ追加CSS
5 CSSカスタマイズに役立つサイト
6 まとめ

追加CSSでカスタマイズ！

SEOにも強く、豊富なカスタマイズが可能で、人気の高いワードプレステーマ『THE TOHR（ザ　トール）』

ちなみにこのサイトもザトールを利用しています。

ザトールには100を超えるカスタマイズ項目があり、「プラグインがいらない」とまで言われるほど、万能なテーマです。

そんなザトールですが、いくつか自分でプログラミングコードを打ち込んで、カスタマイズすべき点があります。

それをしていないと、スマホで表や動画の埋め込みが見切れたりとトラブルが発生します。

また、CSSカスタマイズをすることで、ちょっとしたデザインのカスタマイズが可能になります。

この記事では、

ザトールで追加しておくべきCSS
おすすめCSSカスタマイズ

の2つをまとめて紹介していきます

CSSとは？

先ほどから何度か紹介している『CSS』について簡単に紹介します。

『CSS』とは、ウェブページを装飾するためのプログラミングコードのことです。

CSSを使うことで、色・サイズ・動きなど、様々な「デザイン」をカスタマイズできます。

そんなCSSは、ザトールでは『追加CSS』という項目で簡単に追加できます。

追加CSSの場所
ダッシュボード＞カスタマイズ＞追加CSS
⇓ここにコードを記述していきます⇓

やっておくべきCSS

ザトールでやっておくべき追加CSSを紹介します。

ザトールの追加CSSの枠にコピペして利用してみてください。

表をスクロールさせるCSS

スマホ等で画面よりも横幅の大きい表を自動でスクロールできるようにするCSSです。

デモ

この下の表が横にスクロールできるはずです。

デモ

コード

右上のボタンをクリックして簡単にコピーできます。

.scroll-box {
overflow: auto;
margin-bottom:10px;
white-space: nowrap;
}
.scroll-box::-webkit-scrollbar {
height: 10px;
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;
background: #F3F3F3;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #CCCCCC;
}
@media only screen and (min-width: 768px) {
.scroll-box {
white-space: normal;
}
}

埋め込みYouTubeのレスポンシブ対応

埋め込んだYouTube動画の幅を画面の幅に応じて自動で変えるCSSです。

@media only screen and (max-width: 480px){
#viewCard:checked ~ .archive .archive__item, #viewNormal:checked ~ .archive .archive__item, #viewWide:checked ~ .archive .archive__item {
width: 100%;
}
.archive__item {
margin-bottom:30px;
}
}