Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やりたいこと

  • 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」を選択。  元のファイルを選択して上書き保存。

おわり

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした