WordPressサイトのCSSをChromeのデベロッパーツールで編集する方法

やりたいこと

• WordPressサイトの特定箇所の表示を変更したい。
• 具体的には、記事詳細画面の下部に表示される「関連記事」。
• これをChromeのデベロッパーツール機能で非表示にする。

原因

• CSSの優先度の問題
  ※importantは使わない(なんとなく)

参考URL

Chromeのデベロッパーツールで変更を保存する方法
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

解決した方法

1. デベロッパーツールを起動
   　 該当サイトをChromeで開き、デベロッパーツールを起動します（Windowsは[F12]キー)
2. 虫眼鏡アイコン（□+↖）を押す
   デベロッパーツールの上部に表示されているタブメニュー(パネル)の、
   　 左上にある虫眼鏡アイコン（□+↖）を押す
3. サイト画面の要素を選択できる
   　 虫眼鏡アイコンの下に「Select an element in the page to inspect it Ctrl + Shift + C」という
   　メッセージが表示され、CSSを編集したい要素を選択できるようになる
4. CSSを編集したい要素を選択
   ElementsパネルのDOMエレメントツリー内から、該当のエレメント要素が選択
   　 選択された要素のCSS情報などがサイドバー(Styles)に示される
5. サイドバー(Styles)からCSSを編集
   　 該当箇所のスタイル情報から、CSS優先度の高いコードを無効化(レ点チェックを外す）
6. 編集内容を保存する
   　 Sourcesパネルからファイルを右クリックし「save as」を選択。
   　元のファイルを選択して上書き保存。

おわり