サイトを育てるWordPressテーマのHTMLの要素とCSSを確認しstyle.cssを編集する方法

情報が古いため、リライト中です

お使いのWordPressテーマのcssをカスタマイズする際に使いたいのが、要素を調べることのできるツール。
どんなツールがあるかといえば、Chromeのデベロッパーツール。

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

inspector-tool_01

Firefox>ツール>Web開発>インスペクタ
(Mac:command + option + C)
を選択すると、インスペクタが起動します。
インスペクタを使うと、ブラウザ上でカーソルを当てた要素が何かを調べることができます。
画面の見方はこんな感じ。

これだけの情報がわかれば、ブログテーマのカスタマイズがはかどっちゃいますね!

要素名・ID・classをコピー

inspector-tool_02

スタイルを変えたい要素の、要素名・ID・class名をコピーしてください。

画面右側で、実際のスタイルシートを見ることができるので、赤ワクの部分をコピーし、style.cssにペーストしていくと編集しやすいです。

.flow dt {
}

プロパティを変更する

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

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

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

.flow dt {
background-color:#efefef;
}
inspector-tool_03

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

style.cssを上書き保存する

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

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

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

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

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

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

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

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

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

まとめ

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

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

でした!
要素とCSSを確認するために必要なのは、Chromeデベロッパーツールだけ。
簡単なのでお試しください。

サイトを育てる一覧へ