SWELLでCSSはどこに書く？追加CSSの場所と設定方法を初心者向けに解説

ブログのデザインを少し変えたいと思ったときに出てくるのがCSSです。

でも、いざCSSを使おうと思うと「SWELLではどこに書けばいいの？」と迷ってしまいますよね。

実は私も最初は同じでした。調べてみるといろいろな方法が出てきて、どれを使えばいいのか分からなくなったことがあります。

そこで今回は、SWELLでCSSを書く場所について初心者向けにわかりやすく解説します。

記事の後半では、CSSが反映されないときの対処法も紹介しているので、これからカスタマイズに挑戦したい方はぜひ参考にしてみてくださいね。

CSSとは？

私も最初は「CSSって聞いたことはあるけど、何ができるの？」という状態でした。

そこでまずは、CSSを使うとどんなカスタマイズができるのかを紹介します。

CSSでできること

CSS（シーエスエス）とは、Webサイトのデザインや見た目を調整するためのコードです。

たとえば、

• 文字の色を変える
• 文字の大きさを変更する
• 余白を調整する
• ボタンのデザインを変更する

といったカスタマイズができます。

最初は難しそうに見えるかもしれませんが、コピー＆ペーストで使えるコードも多いので、初心者の方でも気軽に挑戦できますよ◎

CSSを使うメリット

CSSを使うメリットは、自分好みのデザインにカスタマイズできることです。

SWELLは初期設定のままでも十分使いやすいテーマですが、ブログを運営していると「ここを少し変えたいな」と思うことが出てきます。

そんなときにCSSを使えば、テーマの機能だけでは難しい細かな調整もできるようになります。

また、デザインを整えることでブログ全体に統一感が生まれ、読者にとっても見やすいサイトになります。

SWELLでCSSを書く場所

CSSの役割やメリットが分かったところで、次は実際にSWELLでCSSを書く場所を見ていきましょう。

SWELLにはCSSを書ける場所がいくつかありますが、初心者の方におすすめの方法もあります。

まずはそれぞれの特徴を確認しながら、自分に合った方法を見つけてみてくださいね。

追加CSS

SWELLでCSSを書くなら、まずは「追加CSS」を使うのがおすすめです。

追加CSSは、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」から利用できます。

ここにCSSコードを入力すると、サイト全体にデザインの変更を反映できます。

私も最初はこの方法から使い始めましたが、設定場所が分かりやすく管理もしやすいため、初心者の方でも安心して利用できます◎

また、テーマを更新しても追加CSSに入力した内容はそのまま残るので、カスタマイズ内容が消えてしまう心配もありません。

CSSを初めて使う方は、まず追加CSSから挑戦してみるのがおすすめですよ。

カスタムCSS（固定ページ・投稿ページ）

固定ページや投稿ページごとにデザインを変更したい場合は、「カスタムCSS」を利用する方法もあります。

カスタムCSSを使うと、特定のページだけ文字の色やデザインを変更したり、サイト全体ではなく一部のページだけにCSSを適用したりできます。

たとえば、

• この記事だけ見出しのデザインを変えたい
• 特定のページだけ余白を調整したい

といった場合に便利です。

ただし、CSSを使い始めたばかりの方は、まず「追加CSS」を覚えれば十分です◎

ページごとの細かなカスタマイズをしたくなったときに、カスタムCSSの利用を検討してみてくださいね。

子テーマのstyle.css

さらに本格的にCSSを管理したい場合は、子テーマのstyle.cssに記述する方法もあります。

子テーマとは、親テーマの機能を引き継ぎながらカスタマイズを行うためのテーマです。

まず、「外観」→「テーマファイルエディター」をクリックします。

必ずSWELL CHILDになっていることを確認します。

style.cssにコードを記述することで、CSSをまとめて管理しやすくなるため、カスタマイズの量が増えてきた場合に便利です。

ただし、子テーマの設定には少し知識が必要になるため、ブログを始めたばかりの方は無理に使う必要はありません。

私も最初は追加CSSを使いながら少しずつカスタマイズに慣れていきました。

まずは追加CSSで基本的な使い方を覚えて、必要になったら子テーマの利用を検討してみてくださいね◎

なぜ追加CSSがおすすめなの？

SWELLでCSSを書く場所はいくつかありますが、初心者の方には追加CSSがおすすめです。

その理由は、設定が簡単で管理しやすいからです。

追加CSSはWordPressの管理画面からすぐに編集できるため、FTPソフトを使ったりテーマファイルを直接編集したりする必要がありません。

また、テーマを更新しても入力したCSSが消えにくいため、安心してカスタマイズできます。

私も最初は子テーマやテーマファイルの編集に少し不安がありましたが、追加CSSなら気軽に試せるのでカスタマイズの練習にもなりました。

これからCSSを使い始める方は、まず追加CSSから挑戦してみるのがおすすめですよ。

CSSが反映されない時の対処法

CSSを書いたのにデザインが変わらないと、「コードを間違えたのかな？」と不安になりますよね。

しかし、CSSが反映されない原因は意外とシンプルなことが多いです。

ここでは、まず確認しておきたいポイントを紹介します。

キャッシュを削除する

CSSを書いたのに反映されない場合は、まずキャッシュを削除してみましょう。

キャッシュとは、一度表示したWebページの情報を一時的に保存しておく仕組みのことです。

そのため、CSSを変更しても古い情報が表示されたままになり、変更内容が反映されていないように見えることがあります。

私も「コードを間違えたかな？」と思っていたら、キャッシュが原因だったことが何度かありました。

ブラウザの再読み込みやキャッシュの削除を行うことで、変更内容が反映される場合があります。

CSSが反映されないときは、まずキャッシュを確認してみてください。

コードの記述ミスを確認する

キャッシュを削除しても反映されない場合は、CSSの記述に間違いがないか確認してみましょう。

CSSは記号やスペルを正しく入力する必要があるため、ほんの少しの入力ミスでも反映されないことがあります。

たとえば、

• 「;（セミコロン）」が抜けている
• 「{ }（波かっこ）」の位置が間違っている
• クラス名やID名のスペルが違っている

といったケースです。

私もCSSを書き始めた頃は、たった1文字のミスが原因で反映されなかったことが何度もありました。

セレクタが間違っていないか確認する

CSSの記述に問題がない場合は、セレクタが正しいか確認してみましょう。

セレクタとは、CSSをどの部分に適用するのかを指定するためのものです。

たとえば、見出しのデザインを変更したい場合でも、指定するセレクタが間違っているとCSSは反映されません。

インターネットで見つけたCSSコードをそのままコピーした場合、使用しているテーマや環境によってはセレクタが異なることもあります。

私も最初は「コードは合っているはずなのに反映されない…」と悩んでいましたが、原因を調べてみるとセレクタが違っていたことがありました。

CSSが反映されないときは、コードだけでなくセレクタも確認してみましょう。

よくある質問

ここまでSWELLでCSSを書く場所や、反映されないときの対処法について紹介してきました。

最後に、CSSについて初心者の方からよくある質問をまとめました。

同じ疑問を持っている方は、ぜひ参考にしてみてくださいね◎

CSSを書いたのに変わらない

CSSを書いたのにデザインが変わらない場合は、キャッシュが残っている可能性があります。

まずはブラウザを再読み込みしたり、キャッシュを削除したりしてみましょう。

また、CSSの記述ミスやセレクタの間違いが原因で反映されないこともあります。

反映されないときは焦らずに、コードをもう一度確認してみてくださいね。

子テーマのstyle.cssは必要？

いいえ、必ずしも必要ではありません。

CSSのカスタマイズであれば、「外観」→「カスタマイズ」→「追加CSS」から設定できるため、初心者の方は追加CSSを利用すれば十分です。

子テーマは、本格的なカスタマイズを行ったり、テーマファイルを編集したりする場合に活用されます。

まずは追加CSSで基本的な使い方を覚え、必要になったタイミングで子テーマの利用を検討してみてくださいね◎

CSSは消しても大丈夫？

追加したCSSを削除すると、そのCSSで変更していたデザインが元の状態に戻ります。

たとえば、文字の色や見出しのデザインをCSSで変更していた場合は、SWELLの初期設定や元のデザインが表示されるようになります。

CSSを削除しただけでサイト自体が消えたり、記事の内容がなくなったりすることはありません。

ただし、後から元に戻したくなる場合もあるため、削除する前にコードをメモしておくと安心ですよ。

CSSの知識がなくても使える？

はい、CSSの知識がなくても使えます。

最近はブログやWebサイトで使えるCSSコードがたくさん紹介されているため、まずはコードをコピー＆ペーストして試してみるだけでも大丈夫です。

私自身も最初からCSSの知識があったわけではなく、気になるカスタマイズを少しずつ試しながら覚えていきました。

もちろん、CSSの仕組みを理解できるとカスタマイズの幅は広がりますが、最初から完璧に覚える必要はありません。

まずは気軽に挑戦して、少しずつ慣れていきましょう。

まとめ

今回は、SWELLでCSSを書く場所について紹介しました。

SWELLには複数のCSS記述方法がありますが、初心者の方には「外観」→「カスタマイズ」→「追加CSS」がおすすめです。

また、固定ページや投稿ページごとに適用できるカスタムCSSや、子テーマのstyle.cssに記述する方法もあります。

CSSは最初こそ難しそうに感じますが、実際にはコピー＆ペーストで使えるコードも多く、少しずつ慣れていくことができます。

私自身も分からないことだらけの状態から始めましたが、CSSを使うことでブログのカスタマイズがさらに楽しくなりました。

まずは追加CSSから気軽に挑戦して、自分好みのブログ作りを楽しんでみてくださいね。