MUZUMI
Pocket

みなさんこんにちは。ムズミです。

今回はいよいよ、wordpressのCSSを書き換える場所について解説していきます!


まずはCSSの書き換えを実感しよう

なんせこの記事のタイトルは「実践でCSS学習」。まずは自分のwordpressのCSSを書き変えてみましょう。

書き換える場所の候補は複数ありますが、最低限知っておくべきなのは「style.css」というファイルです。

Style.cssがある場所

自分のwordpressを開いてください。

ダッシュボード⇒外観⇒テーマの編集へと進む。

右側の「テーマファイル」の中からstyle.cssを選択し、編集画面をスクロールして一番下(赤枠)の部分にCSSを追記します。

追記が終わったら左下の青いボタン「ファイルを更新」を押して保存することができます。

 

ほんとにここに書きこめば反映されるの?と思いますよね。早速書きこんでみましょう。

以下のCSSをコピーし、赤枠の部分に張りつけて保存してください。

.entry-content p{
font-size: 30px;
}

要約:class=”entry-content”がついた要素の内部にある要素pは、文字サイズを30pxにすること

このコードは後で消すので、張りつける場所は覚えやすい「style.cssの一番下」であることを確認しておいてくださいね汗

張りつけと保存が終わったら、確認してみてください。
すべての記事のp要素(大抵の文章)が大きくなっているはずです。

 

※文字が大きくならなかった場合

以下の確認チャートで原因を探りましょう。

⑴CSSの変更がまだ反映されていないだけかもしれません。
F5(ctrl+F5)を押してスーパーリロードしてみてください。(ブラウザによって操作が若干異なります。)

⑵入力・保存にミスはありませんか?
CSS入力時に:、;の忘れ、保存ボタンの押し忘れがないか等を確認してください。

⑶style.css以外のCSSで変更が上書きされていませんか?
style.cssに戻り、「font-size:30px;」を「font-size:30px; !important」と書き変えて確認してみてください。
これで大きくなった場合は、セレクタ[.entry-content p]よりもさらに優先的なセレクタがどこかで書きこまれているということです。詳しくはこちら☞CSSに関する基本的なこと4(優先順位、セレクタの組み合わせ)

 

以上の3つが「CSSが反映されない主な原因」になります。

どうしてもわからなかった方は以下の方法で調べることができますが、CSSに対して慣れが必要です。今の時点では読んで「へー」と思うぐらいでいいと思います。

大きくなるはずの文字に対して、要素の調査を行ってください。

CSS欄にある「スタイルを絞り込み」にて、「font-size」と入力することで、font-sizeという書き込みを検索することができます。

 

赤矢印の部分は、「どこの何行目にかかれているのか」を表しています。上図は「style.cssの13行目に書かれている」ことを表しています。

これをもとに、反映されているのかを見て確かめることができます。

 


CSSを書き変える場所

長くなりましたが、CSSを書き変える場所を紹介していきます。

CSSを書き換える場所は

  1. style.css
  2. 追加CSS

以上になります。それぞれ解説していきましょう。

 

style.css に書き加える

ダッシュボード⇒外観⇒テーマの編集へと進む。

右側の「テーマファイル」からstyle.cssを選択し、その一番下である赤枠の部分にCSSを追記します。

style.cssの特徴

このCSSはすべての記事や固定ページなど、閲覧者が見ることができるすべての部分の見た目を編集することができます。タイトルやボタンなど変更できそうに見えない部分もすべて変えることができます。

テーマの更新を行うと今まで追記したCSSがすべて消えるので、更新の際は追記分を手動でコピーして移し替える必要があります。

 

 

追加CSSに書き加える

ダッシュボードの外観⇒カスタマイズ⇒追加CSSへと進む。

図の赤枠にCSSを書きこんで、公開ボタンを押せばCSSを正式に反映させることができます。

追加CSSの特徴

先ほどのstyle.cssと違うところは、

  • 変更の結果を見ながら編集できる
  • テーマ更新の時に、コピーを取らなくてよい

という点です。

作業画面に到達するまでがめんどくさかったり、テーマによっては利用できない、複雑なCSSだと反映されない噂がある…など、新しく出来た機能ゆえに不安定なところはありますが、非常に使いやすいです。

 


さて、これでみなさんは自分のサイトのCSSをいじれるようになりました。

これからはみなさんが自分で実践し、わからないことを調べることになります。

大丈夫。手を動かしているだけで、どんどん技術力は身についていきますよ。

みなさんのサイトが綺麗になって、末永く利用者に愛されることを祈っています!

これにて「実践でCSS学習」はおしまいです。
ここまで読んでいただき、ありがとうございました!

 

  • このエントリーをはてなブックマークに追加

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。