ブログで発信したい、だけどデザインもこだわりたい、そんなあなたへ贈るWordPress テーマblanc note.

wordpress-customizeWordPressのカスタマイズ
WordPressのカスタマイズ

HTMLの要素とCSSを確認しstyle.cssを編集する方法

WordPressのカスタマイズ
この記事は、WordPressテーマのCSS部分をカスタマイズする手順の補足記事です。未読の方は合わせてどうぞ。

お使いのWordPressテーマのcssをカスタマイズする際に使いたいのが、要素を調べることのできるツール。
どんなツールがあるかといえば、昔から有名なのはFireFoxのアドオン「FireBug」。Chromeのデベロッパーツールをお使いの方も多いですね。
最近、Firefoxの開発ツールが便利だと小耳に挟みました。
試したところ使い勝手がよかったので、Firefoxの開発ツールでブログの要素を調べ、style.cssを編集する方法をご紹介いたします。

Firefox開発ツールのインスペクタを起動する

Firefox>ツール>Web開発>インスペクタ
(Mac:command + option + C)
を選択すると、インスペクタが起動します。
インスペクタを使うと、ブラウザ上でカーソルを当てた要素が何かを調べることができます。
画面の見方はこんな感じ。
inspector-tool_01
これだけの情報がわかれば、ブログテーマのカスタマイズがはかどっちゃいますね!

要素名・ID・classをコピー

スタイルを変えたい要素の、要素名・ID・class名をコピーしてください。
inspector-tool_02
画面右側で、実際のスタイルシートを見ることができるので、赤ワクの部分をコピーし、style.cssにペーストしていくと編集しやすいです。

プロパティを変更する

例では、下記の5つのプロパティが設定されていました。

  • background-color(背景色)
  • padding(内側の余白)
  • text-align(要素内での左寄せ・右寄せ・センタリング等)
  • border-radius(角丸)
  • margin-bottom(外側下の余白)

変えたいプロパティだけを変更すればOK。
背景色を変えたいのであれば、background-colorのみ変更しましょう。

変更するとどうなるかは、インスペクタツールで確認できるので、まず試してからcssを書いた方が確実です。
inspector-tool_03

style.cssを上書き保存する

「よ〜しこれに決めた!」思ったら、子テーマのstyle.cssに書き込みます。
親テーマを直接編集している場合は、style.cssの何行目に書いてあるかをチェックし、直接変更してください。

リロードしスタイルが反映されたか確認する

style.cssをリロードし、デザインが変われば成功です!

スタイルが変わらない場合は?

いくつか理由が考えられるので、対応してみてください。

ブラウザのキャッシュを削除

ありがちなのが、キャッシュが悪さをしていること。
ブラウザのキャッシュって意外と強力で、外部ファイルのキャッシュがなかなかクリアされないことがあります。
そんな時は、ブラウザのキャッシュを削除してから確認してください。

CSSの優先順位が影響していることも

次に考えられるのが、CSSの優先順位です。
あなたが書いたCSS、打ち消されてませんか?

まとめ

HTMLの要素とCSSを確認しstyle.cssを編集する手順は

インスペクタを起動する
要素名・ID・classをコピー
プロパティを変更する
style.cssを上書き保存する

でした!
要素とCSSを確認するために必要なのは、Firefoxだけ。
簡単なのでお試しください。
保存

Category : WordPressのカスタマイズ
ほんわかクリエイター るこ

Web系のお仕事をしています。
むちゅめ(6歳/早生まれ/小学生1年生)大好きな親バカ系。
LOFT、無印、生活の木、伊東屋が好き。
自然溢れる場所に惹かれはするものの、めんどくさがりの省エネ派。ぐでたまを尊敬してます。

ブログ一覧へ戻る