WordPressのテーマを使っていて
![](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=https://www.takoboolog.com/wp-content/uploads/2021/12/lady.png&nocache=1)
ここのアイコンいらないんだよなー
ってことありませんか??
そんな時に、簡単に使えるCSSをご紹介します。
目次
具体例
私自身が実施しているものをご紹介します。
なお、cocoonのテーマを例に説明します
Before
After
![before](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=http://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.52.24.png&nocache=1)
![before](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=http://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.52.24.png&nocache=1)
![after](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=http://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.03.07.png&nocache=1)
![after](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=http://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.03.07.png&nocache=1)
上記のようにプロフィール下のアイコンを消したかったのです。
display noneを使って非表示にする
CSSにはdisplayというプロパティがあります。
displayの値を「none」にすることでその要素は非表示になります。
CSSについてもっと知りたい方はコチラをご参照ください。
非表示にする場所を探す
では、displayプロパティをどこに設定するかを探していきましょう。
ブラウザはChromeを使用してください。
①開発者モードに切り替える。
該当のページを開き、どこでもいいので右クリックをして「検証」を選択。
もしくはF12を押して開発者モードに切り替える。
②該当箇所を探す。
①が完了し、まるで囲んだ場所をクリック後、消したいものにカーソルを合わせる。すると該当箇所が光ります。
![maru](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=https://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.31.30.png&nocache=1)
![maru](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=https://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.31.30.png&nocache=1)
![gaitou](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=https://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.33.09.png&nocache=1)
![gaitou](https://www.takoboolog.com//wp-content/webpc-passthru.php?src=https://www.takoboolog.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-06-22.33.09.png&nocache=1)
これが今回の該当箇所になります。
非表示にする
今回は「author-follows」というクラスを消したいと思います。
WordPressであれば、「外観」のテーマエディタより「style.css」を選択しましょう。
.author-follows{ display:none; }
これだけでおしまい。
もし、違うクラスであれば下記のテンプレートを使ってください。
.クラス名{ display:none; }
まとめ
非表示にしたい部分はCSSのdisplayプロパティを使おう!!
もっと色々なことをしたければ下記の本の購入がおすすめ!
ブログを書くなら1冊は持っておきたいですね。
著:加藤善規, 著:できるシリーズ編集部
![](https://www.takoboolog.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://www.takoboolog.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)