ブラウザの開発者ツールを使う！WebエンジニアもやってるCSSの編集法
WordPressなどのブログでCSSを編集する際にファイルを直接編集する場合、
実際にサイトに反映して確認し修正することになります。
テスト用の環境であればそれでもいいですが、
本番の環境では訪問者に修正中のページを見られてしまったり、
何度もアップロード、更新しないといけなかったりと、手間も時間もかかります。
そこで誰もが普段から使っているブラウザに搭載されている機能「開発者ツール」を使用します。
目次
１、「開発者ツール」の始め方
まずはこの「開発者ツール」を手に入れないといけません、
が大抵の方はすでに持っています。
google chromeやFirefox、Internet Explorerなど主要なブラウザには機能が付いています。
ので、起動してみましょう。
ブラウザを起動してください。
そして、「F12」を押してみてください、もしくは「右クリック」から「検証、要素を調査、要素の検査」を選択します。
コードが表示されれば成功です。
２、CSS編集の仕方
いよいよCSSを編集していきます。
下の矢印の部分の要素を赤枠の部分で編集できます。
サイト矢印にマウスを合わせて「右クリック」から
「検証、要素を調査、要素の検査」で編集したい大まかな場所を指定
コードの矢印の部分で編集したい箇所を正確に指定します。
そして赤枠で編集します。
初めの数文字を入力すれば候補が出るので非常にべんりです。
編集内容はリアルタイムに表示されます。
希望通りの見た目になったら編集内容をコピーして、CSSのファイルに張り付けます。
アップロードして確認出来たら完了です。
３、まとめ
WordPressでCSSを編集する際はできればバックアップを取っておくといいです。
バックアップがあれば後から元に戻したい場合にすぐにもとにもどせます。
編集前にはバックアップ（コピーでいい）を心がけましょう！
ではでは～