WordPressのカスタマイズ力をつける！【第一回】Firefox内蔵開発ツールを使ってCSSを編集する
コピペではできないことも自分でやれば簡単にできる
WordPressのCSSを編集するのは実は超簡単！
方法さえ覚えてしまえば、誰でも簡単に思い通りの見た目を実現できるようになる！
見た目をカスタマイズするときの最初のハードルはどこを編集したらいいのかわからないこと、編集する場所と内容がわかればカスタマイズのハードルは一気に下がります。
そのための編集箇所を見つける方法と見方、実際の編集方法までを解説していきます。
目次
Firefox内蔵開発ツールを使う理由
主な理由は以下の５つ
- 日本語対応
- インスペクター（HTMLのソースとCSSを確認できる画面）がわかりやすい
- 横に配置できる
- 要素にマウスを合わせた場合の動作等（:hover、:active、:focus）が確認しやすい
- CSSの要素や値を簡単に編集できる（スペル補助文字を入力すると候補が選択できる）
理由としてあげてみましたが、実際に使うツールを選ぶ場合は、自身が使いやすいかどうかで選びましょう。
開発ツールを使ってカスタマイズするための準備
Firefoxをインストールしていない方はまず
Firefoxをダウンロードからインストールしてください
インストールできたらFirefoxを起動
好きなサイトを表示して「F12」を押します
↑のような画面になったら一旦準備完了です。
インスペクター画面の見方
赤い枠がメニュー
機能の切り替えやカスタマイズができます。
オレンジの枠が編集するHTMLやCSSなどを表示する場所となっています。
WordPressや、他のブログも編集する際には①のインスペクターをクリック
②はオプション
③はこの枠全体を横に配置します
テーマをDark、横に配置すると↓のようになります。
矢印のボタンでレスポンシブモードとなり、スマホサイズの画面を確認できる
WordPressのCSSを実際に編集してみる
先ずは赤枠のボタンを押し、編集したい場所をクリック
オレンジの枠に選択した箇所に適応されているスタイルが表示されます。
赤線がスタイルが記述されているファイル名
青線がスタイルを適応する対象（セレクタ）
↓の赤枠の中、編集したい箇所をクリックすると編集できます。
先ずは色を変えたり、サイズを変更してみます。
（オレンジ枠のスポイトをクリックし、任意の場所を選択するとそのカラーコードをコピーできる）
新たなスタイルを追加することもできます
空欄に入力を始めると、要素や値の候補が表示されるので非常に便利です。
セレクタから全てを選択してコピーし、テーマのstyle.cssなど、カスタム用のCSSにそのまま貼り付けて確認してみましょう。
変更されていれば、納得いくまで手順を繰り返すだけです。
まとめ
インスペクター画面での編集は自分だけが確認できるので、サイトの訪問者に配慮することなくスタイルの編集、確認ができます。
簡単なCSSの知識があれば簡単にサイトをカスタマイズすることができるので、ぜひ「Firefoxの開発ツール」を使ってみてください！
ではでは〜