CSSの変更方法(3つの方法を解説)

css

 

wordpressを用いてサイトの編集を行う場合、cssを変更することでデザインの修正ができます。

CSSを変更するためにはいくつかの方法があるので、ご紹介していきます。

 

方法1:カスタムCSSにて編集

テーマ毎にカスタムCSSというものがあるのですが、プラグイン「Simple Custom CSS」というものが、とても使い勝手が良いので、今回はそのプラグインを使用したとして説明をしていきます。

 

Simple Custom CSS を使えば、プラグインやテーマのデフォルト CSS に独自のスタイルを追加したり、デフォルト CSS を上書きしたりできます。

“Simple Custom CSS” の特徴

ここに書いた内容は、<head>~</head>に書いたとして読み込まれます。

そのため、後述する「style.css」に記載するよりも優先して反映されます

そして、テーマによって変更されないため、テーマを変えても引き続き残しておきたいCSSがある場合は、ここに書くことでそれが実現できます。

 

通常は、デザインに手を加える場合は、親テーマは編集せずに子テーマを編集するのが一般的だと思いますが、親テーマだけで満足している場合は、子テーマを作ることがないと思います。そうなった場合でもカスタムCSSを編集すればテーマが更新されても、設定したCSSは残ることになります。

 

子テーマを作りたくない人は、追加CSSを編集したくないはずなので(思いがけずデザインが変わってしまうことがある)カスタムCSSを編集すればよいと思います。

 

メリット

テーマ変更や更新があっても、問題なし!
→ テーマファイルを直接編集した場合とは違い、テーマを変更したり意図せずテーマのアップデートが行われたとしても、ここで設定したCSSは残ります。

 子テーマを作る必要がない!

→ 後述する「追加CSS」を利用する際は子テーマを作成することが多いが、カスタムCSSだけを使うなら子テーマを作成する必要がない。

デメリット

 うまく反映されないことがたまにある

→ 元々のテーマで利用しているCSSに上書きする仕様のため、追加するCSS定義によってはうまく反映されない。
 変更をすぐに確認できない

→ 編集した内容がどのように見た目に反映されるかをすぐに確認することができない。

利用手順

1.ダッシュボードにログイン後に初期画面の左側にある「外観」にカーソルを合わせて「カスタムCSS」を選択する。

カスタムCSS選択画面

 

2.カスタムCSSの入力画面が表示されます。

カスタムCSS入力画面

注意点:

CSSを編集して、カスタムCSSの更新を行おうとすると、「権限がありません」というエラーが出ることがあります。

これはサーバーのWAF(ウェブアプリケーションファイアウォール)機能により利用を制限されているためです。

各サーバーでのWAF機能を一時的に無効にして修正をしてください。

 

方法2:追加CSSにて編集

サイトの外観とレイアウトをカスタマイズするには、ここに CSS コードを追加すれば反映されます。

 

“追加CSS” の特徴

なんといっても編集した内容がすぐに確認できるという点です。

 

各ブラウザには開発者ツールという機能があり、その機能を使えば、部分的にどのようなCSSが適用されているかをすぐに確認でき、一時的に編集してすぐに見え方を確認することができるが、それがWordpressの標準機能として有しているという感じです。

 

他には、テーマに依存しているということ。

そのため追加CSSで編集したとしてもテーマを変えたら、今まで編集した内容がなくなってしまいます。

 

子テーマを作成して、それにいろいろな編集を加えている場合は問題ないが、大幅なカスタマイズを行う必要がなく少々のデザイン変更等のためと、親テーマに対して追加CSSでの編集を行ってしまうと、使用しているテーマが更新されたときに消えてしまうことがあります。

 

また、入力した内容に対して入力補完機能エラー検出機能もあるので、自動で補助してくれたり間違いや検出してくれるため初心者に優しいものとなっています。

 

始めたばかりの人はここにCSSコードを記入していくことをお勧めします。

 

メリット

編集した内容をすぐに確認できる!
→ テーマファイルを直接編集した場合とは違い、テーマを変更したり意図せずテーマのアップデートが行われたとしても、ここで設定したCSSは残ります。

 初心者に優しい!CSSの入力を補助してくれる!

→ 入力した内容に関して、標準で入力補完機能やエラー検出機能を有しているので、誤りにすぐ気付ける。

デメリット

 長いコードを記入すると管理がしにくい

→ 追加CSSの欄は横幅が地味に狭いですし、一行が長い場合は改行が入って見にくいです。そのCSSコードで問題なければ、後述する “style.css” に移すことをお勧めします。
 修正ミスをしたら戻せない

→ 編集中にミスをして気付かずにそのまま保存してしまうと戻す術がないので、修正するときは内容を定期的にテキストファイルで保存するなどバックアップをとりながら作業しましょう。

利用手順

1.ダッシュボードにログイン後に初期画面の左側にある「外観」にカーソルを合わせて「カスタマイズ」を選択する。

追加CSS

 

2.左側のメニューから「追加CSS」を選択する。

追加CSS_2

 

3.下のエリアにCSSコードを入力します。

追加CSS_2

 

方法3:”style.css” にて編集する

“style.css” の特徴

“style.css” に書き込む場合、扱いとしては外部CSSファイルということになるため、CSSとして反映される優先度は低くなります。

 

また、外部ファイルであることから管理面としてはgoogleからも推奨される形になります。

(CSSの記述が多い場合は、追加CSSにつらつら書くより外部コンテンツとして利用するほうが把握しやすく、管理しやすいです。)

 

またWordpressの仕様として、子テーマにてstyle.cssを利用している場合は、親テーマ → 子テーマの順に読み込みます。

そのため二つのファイルを読み込むため、若干表示速度として遅くなります。

 

メリット

 量が多いコードの場合管理がしやすい!
→ 入力しているCSSコードが多いと管理をするのが大変になる。そのため、例えばCSSの種類ごとにファイルを分けることが可能です。

 変更頻度が少ないものを入れて置ける!

→ 優先度が低いため、おおまかなデザインをつくるCSSは “style.css” で書いておいて個別にデザインの修正が必要なものは追加CSS等を用いて編集します。

 メモを入れ込める!

→ 追加CSSはなぜかメモ(/* ~ */)を入れると保存ができなかったりしますが、”style.css” はメモを入れ込めるので後々見たときにCSSコードの意味を忘れないようにしておけます。

デメリット

 変更をすぐに確認できない

→ 編集した内容がどのように見た目に反映されるかをすぐに確認することができません。

利用手順

1.ダッシュボードにログイン後に初期画面の左側にある「外観」にカーソルを合わせて「テキストエディター」を選択する。

style.css

 

2.左側のメニューで “style.css” を選択する。

style_css_2

 

3.真ん中のエリアにCSSコードを入力します。

 

最後に

おすすめの方法としては、

  1. 追加CSSに書き込み、見た目がどのようになるかを確認しながらCSSを設定する。
  2. CSSの内容が固まったら、”style.css” に内容を移す。

という流れにするのが良いと思います。

 

 

なお、それぞれにCSSを設定した場合の優先度は、

追加CSS ≧ カスタムCSS > style.css

になるかと思いますのでCSSの同じ設定内容を複数に書くことでこんがらからないよう、注意して設定してください。

 

やっている最中に、なぜか指定したCSSコードが効かない。という状況に陥ることがあるかと思います。

 

理由はいろいろなんです。(テーマで元々設定されているCSSが影響している、同内容が複数で指定されている際に優先度が思っているものと違う。など)

 

その場合は、!importantを設定すればなによりも優先して読み込んでくれます。

頻発はよくないですが、分からない場合は、!importantを使用しても良いと思います。

 

そして、それでもなぜか反映されないというとき。
例えば、”style.css” や “カスタムCSS” を編集した際に、反映されない。など

 

その場合は、 キャッシュをクリアして読み込んでみてください。

例)Windowsの場合は、Ctrl + Shiftを押しながら R を押せばキャッシュがクリアになって再度読み込まれます。

Macの場合は、 + Shift を押しながら R を押します。

 

 

Follow me!

コメントを残す

CAPTCHA