THETHORでCSSコードを追加記載する方法を紹介！！

 
マーシー
この記事ではTHETHOR(ザ・トール)での「CSSコードを追加記載する方法」について紹介しているよ！！

CSSコードを記載する場所

THETHORには見出し、目次など多くの機能が備わっていてデザインも数多く初期装備されていますが、自分の好みのスタイルがない場合はCSSやHTMLを使ってカスタマイズをする必要があります。

ポイント
CSSコードは基本的に「追加CSS」か「style-user.css」に記載します。
 
マーシー
まずはカスタマイズに必要なCSSコードの記載場所を覚えよう！！

追加CSSへ記載する

新しくCSSコードを追加する場合、まずは「追加CSS」へ記載するようにしましょう。

追加CSSに記載することでプレビューを見ながら作業をすることができます。これは「ライブプレビュー」という機能で、PC / タブレット / スマホの切替もできるのでとても便利です。

PC / タブレット / スマホの画面切替がワンクリックでできるので、各媒体でどんな風に表示されるのかの確認が簡単にできます。

追加CSSまでの流れ

【WordPress】

【外観】

【カスタマイズ】

【追加CSS】

基本的には「追加CSS」で作業することになるかと思いますが、CSSコードの量が増えてきたら「style-user.css」にコピペするようにしましょう。これは表示速度の改善といった、SEO対策としても大きく関わってきます。

注意点
THETHORにはSEO対策の機能も多く備わっています。「子テーマCSS(style-user.css)を非同期読み込みにする」といった高速化の為の機能は「追加CSS」には反映されませんので、注意して下さい。

style-user.cssへ記載する

追加CSSで問題なく動作確認できたCSSコードは「style-user.css」にコピペして移していきます。コピペが終わったCSSコードは「追加CSS」から削除するようにしましょう。

 
マーシー
追加CSSで上手く反映されたコードは「style-user.css」に移動するようにしよう！！

「style-user.css」までの流れ

【WordPress】

【外観】

【テーマエディター】

【style-user.css】

カスタマイズをするためにCSSコードを記載していくと、思った以上にコードが嵩張ってくると思いますので、そんな時はコードの中に文字を入れて整理しておくと便利です。

CSSコードの「セレクター」「プロパティ」には文字を入れて、どの部分のコードなのかを分かりやすくしておくことで、後から編集が必要になった場合にとても便利です。

THETHOR関連記事！！