やりたいこと
- WordPressサイトの特定箇所の表示を変更したい。
- 具体的には、
記事詳細画面の下部に表示される「関連記事」。 - これをChromeのデベロッパーツール機能で非表示にする。
原因
- CSSの優先度の問題 ※importantは使わない(なんとなく)
参考URL
Chromeのデベロッパーツールで変更を保存する方法
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
解決した方法
- デベロッパーツールを起動 該当サイトをChromeで開き、デベロッパーツールを起動します（Windowsは[F12]キー)
- 虫眼鏡アイコン（□+↖）を押す
デベロッパーツールの上部に表示されているタブメニュー(パネル)の、
左上にある
虫眼鏡アイコン（□+↖）を押す - サイト画面の要素を選択できる 虫眼鏡アイコンの下に「Select an element in the page to inspect it Ctrl + Shift + C」という メッセージが表示され、CSSを編集したい要素を選択できるようになる
- CSSを編集したい要素を選択 ElementsパネルのDOMエレメントツリー内から、該当のエレメント要素が選択 選択された要素のCSS情報などがサイドバー(Styles)に示される
- サイドバー(Styles)からCSSを編集 該当箇所のスタイル情報から、CSS優先度の高いコードを無効化(レ点チェックを外す）
- 編集内容を保存する Sourcesパネルからファイルを右クリックし「save as」を選択。 元のファイルを選択して上書き保存。