簡単!THE THOR「追加 CSS」でカスタマイズする方法

みなさんこんにちは。

THE THORユーザーの Jonyと Ai (@10to1_travel)です。

THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。

でも

  • コピペってどこに?
  • 追加 CSSって何?
  • どうやってやるの?

って疑問が出てきますよね。

私たちもそうでした。

 
Jony
でも大丈夫!
THE THORは初心者に優しいテーマだから簡単にサイトを自分好みにカスタマイズできるぞ!
 
Ai
サイトを自由にデザインできるとブログが楽しくなるよね!

本日は THE THORのデザインをおしゃれにカスタマイズする「追加 CSSとカスタマイズする方法」を紹介します。

私たちは THE THOR歴 7ヶ月です。
当ブログのデザインのほとんどを CSSでカスタマイズしてます。

当ブログは 1分で読むことができます。

関連記事

テーマの名前 THE THOR (ザ・トール) 評判 [star-list number=4.5] [4.5点] 初心者 [star-list number=5][5点] デザイン [star-list nu[…]

ちなみに CSSが何か分かってる人は以下を飛ばして CSSの追加の方法までジャンプしてください。

THE THOR CSSの追加 方法までジャンプする

THE THOR「追加 CSS」とは?

追加 CSSとは、“Cascading Style Sheets” の頭文字をとったもので、スタイルシートとも呼ばれます。

HTMLが、見出しやヘッダ情報などWebページの文書構造を形作るための言語に対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を担っています。

今さら聞けない!CSSとは?【初心者向け】 / TECH ACADEMY
 
ちょっと難しいなあ。。。
 
もうちょっと分かりやすくするぞ!

めちゃくちゃ簡単に言うと、CSSとは「サイトのデザインを変える文字列」です。

例えば絵に置き換えるとこんな感じ。

  • サイト ▶︎ 画用紙
  • HTML ▶︎ 絵(白黒の線だけ)
  • CSS ▶︎ 筆、ペン、絵の具(カラー)
 
だいたい分かったけど、じゃあ CSSで何ができるの?
 
それを次のコーナーで説明するぜ!

THE THOR「追加 CSS」カスタマイズ できること

追加 CSSを使えばサイトの色んなデザインを改造することができます。

  • 見出しのデザイン
  • サイトのカラー
  • 文字の大きさ
  • ボタンをフワッと浮かす

例えば、CSSを追加すれば THE THORの目次も以下のようにデザインをカスタマイズすることができます。

THE THORの目次 カスタマイズ

デザインが自由自在ってロマンがありますよね♪

THE THOR CSSの追加 方法

the thor 追加 cssの方法

前置きが少し長くなりましたが、本題です。
それでは THE THORの「追加 CSS」する方法を紹介します。

本来はコードを記述するのが難しかったりしますが、THE THORなら初心者に優しいテーマでとても簡単に行うことができます。

THE THORで CSSを追加する方法は 2つあります。

  1. style-user.cssに CSSを追加
  2. カスタマイズに CSSを追加

どちらでも良いですが、私たちは後者のカスタマイズ画面に追加がオススメです。

操作が簡単ですし、画面を見ながらデザインを調節できるので分かりやすいです。

手順は以下の通り。

ダッシュボード → 外観 → カスタマイズ → 追加 CSS

と進み、CSSを追加します。

THE THOR 追加 CSS

手順は以上です。笑

 
え!?終わり??
めちゃくちゃ簡単だね!
 
だろ?
さすが初心者に優しいテーマ THE THORだな!

THE THOR「追加 CSS」の注意事項

THE THORの追加 CSSの注意事項です。

  • CSSの記述ミス
  • CSSの把握ミス
  • THE THORのアップデート

CSSの記述ミス

CSSを追加する上でもっとも注意すべきは CSSコードの記述ミスです。

コードが少しでも違うとデザインが崩れたり不具合が発生したりします。

CSSの把握ミス

CSSでデザインをカスタマイズしていると楽しくて、どんどん CSSを追加していってしまいます。

そのタイミングで CSSの不具合が起きると、どこを直せば良いのか ・どれがどれの CSSだか分からなくなってしまいます。

初心者の時は原因を見つけたり、修正することができないので、慎重に扱いましょう。

THE THORのアップデート

THE THORのアップデートにより CSSが指定している要素が変わったり、使用が変わったりします。

そうすると、CSSの要素が不具合を起こしたり、効果が無くなったりしてしまうこともあります。

THE THORでCSSを追加する時のアドバイス

アドバイスとして、

  • 【コピペだけ!】はコピペだけ
  • CSSに /*タイトル*/ を使って名前を付けておく
  • CSSコード間はスペースを空ける
  • 最初は少しづつ

失敗は成功の元です。

でも CSSでサイトがグチャグチャになってしまったら一気にやる気が失せます。
取り返しがつきませんからね。

THE THORでCSSを追加するデメリット【※追記】

ここまで話して言うのも何ですが、THE THORで CSSを追加する際のデメリットを紹介します。

※追記です。

2021年2月4日の時点で確認できたデメリットです。
最近 新たに見つかったとかではなく、単純に私たちが気づいたデメリットです。

  • ページの表示速度が遅くなる
  • 不具合が発生する

軽く説明します。

ページの表示速度が遅くなる

私たちのサイトはほとんどの部分を CSSでカスタマイズしています。

理由は THE THORと気付かれたくなかったから(オリジナルサイトにしたかった)からです。

ですがそのおかげで、THE THORの長所でもある「サイト速度」が台無しになりました。

今やモバイルで 20点まで落ち込んでしまいました。
カスタマイズのしすぎも問題ですね。

不具合が発生する

記事をリライトしてる時に気づいたんですが、別の CSS同士がぶつかって不具合が発生してました。

それを修正するのに 2時間かかりました。

ある程度いじれる人ならすぐ修正できますが、初心者には一苦労でした。

解決策!HTMLとCSSを本で勉強する!

上記のデメリットを一発で解決する方法があります。
それは HTML・CSSを勉強することです。

初心者向けにおすすめの教材や本がたくさん出てます。
それを 1冊持っておくだけでもだいぶカスタマイズに強くなります。

HTMLと CSSを勉強しておくと、もっと素敵なデザインを作ることができますし、その記事も書いて PV数を上げることもできますね。

初心者にも優しい本はたくさん出てるので、隙間 時間で HTML・CSSの勉強でもどうですか?

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

THE THOR 追加 CSSでできる主なカスタマイズ

追加CSSでできるカスタマイズはたくさんあります。

当ブログもカスタマイズしまくってるので主なカスタマイズ案を紹介しますね。

THE THORユーザーの皆さんこんにちは。Jonyと Ai(@10t […]

みなさんこんにちは。 WordPressには 2種類のテキスト・エディ […]

みなさんこんにちは。 こんな人におすすめ THE THORの画像を遅延 […]

みなさんこんにちは。 THE THOR (ザ・トール)は SEOやデザ […]

みなさんこんにちは。 今回は THE THOR(ザ・トール)の初期設定 […]

THE THOR「追加 CSS」でカスタマイズする方法 まとめ

本日は THE THORを「追加 CSS」でカスタマイズする方法を紹介しました。

一見難しそうでも、初心者に優しいテーマの THE THORなら簡単でしたね!

CSSでサイトをカスタマイズして、自分だけのオリジナル ブログを作ってくださいね。

 
最後まで読んでいただきありがとうございます!
 
気に入ったならシェアしてくれても良いんだぞ!
ありがとう!
関連記事

テーマの名前 THE THOR (ザ・トール) 評判 [star-list number=4.5] [4.5点] 初心者 [star-list number=5][5点] デザイン [star-list nu[…]

おわり

テーマの名前 THE THOR (ザ・トール)
評判 [4.5点]
初心者 [5点]
デザイン [4点]
カスタマイズ [4点]
ジャンル ブログ / アフィリエイト
ライセンス 制限なし
値段 14,800円 (税込)
購入サイト