WordPress のテーマによってはオプションで非表示を選択できるのですが、非表示にできないテーマも多々あります。気に入ったテーマがあってもそうしたちょっとしたことでテーマ選びの幅が狭まるのは悲しいですよね。
この記事では利用しているテーマに関わらず特定の要素を非表示にする方法を説明します。
注意：変更前にテーマのライセンス表記を確認してください。テーマによっては変更が許可されていないものがあるようです。
全体の流れ
流れとしては、以下の3ステップです。
- ブラウザの開発者ツールで非表示にしたい要素を探し
- その要素に割り当てられているCSSファイルを探し
- テーマのスタイルシートを変更する
注意点としては、この方法ではテーマのアップデート時に設定が消えてしまいます。テーマのアップデートはそうそうないと思いますがご留意ください。
1：ブラウザの開発者ツールで要素を探す
まずはご自身のサイトで非表示にしたい要素が表示されているページを開きます。開発者ツールはブラウザ毎に多少差異はありますが使い方は概ね同じです。
- Google Chrome をご利用中であればメニューの「表示」-> 「開発 / 管理」-> 「デベロッパーツール」
- Safari をご利用中であれば環境設定の「詳細」タブの一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れて、メニューの「開発」-> 「Webインスペクタを表示」
- Firefox をご利用中であればメニューの「ツール」-> 「Web開発」-> 「開発ツールを表示」
ツールを開いたら「要素を選択」します。ブラウザによってアイコンに差異があるので説明が難しいのですが、「cmd + shift + C」がショートカットとして割り当てられているので押してみてください。そうすると要素検証モードになってサイトの上にカーソルをのせると要素毎に水色にハイライトされるようになります。
このモードで非表示にしたい要素にカーソルをのせてクリックします。
（開発者ツールは複雑なので細かい説明を省略してしまいますが、検索するとブラウザ毎に画像付きでわかりやすく解説しているページなどもあります。）
2：要素に当てられているCSSファイルを探す
私は Chrome をメインに開発しているので Chrome の例を示しますが、どのブラウザでも使い方は同じです。要素を選択すると画像のように下部または右側のインスペクタにその選択した要素の情報に切り替わります。
左側の画像のように非表示にしたい要素が水色になっている時にクリックすると右側の画像で赤枠で囲った部分が切り替わります。右側の画像では① で display: none; を追加しているので要素が消えていることが確認できます。
赤枠 ② に表示されているのがこの要素をスタイリングしているファイルの名前と行番号です。これで、style.css というファイルの 969 行目を変更（display: none; ）すれば要素が消せることが確認できたことになります。
3：テーマのスタイルシートを変更する
WordPress の管理画面にある「外観」-> 「テーマエディター」から 2 で見つけた「スタイルシート」を選択して同じく 2 で見つけた行番号までスクロールします。そして該当CSS を見つけたらそのCSS を変更して保存します。
複数のクラスにスタイルが当てられている場合はクラス毎に分けないと両方とも消えてしまうので注意してください。
変更の確認
スタイルシートの変更後、表示が切り替わったか確認します。表示していたページで「cmd + shift + R」でキャッシュを使わずに再読み込みさせます。表示が切り替わっていれば成功です。
非表示にならない場合はスタイルシートの変更ミスがあるか、レンタルサーバーの設定で css ファイルがキャッシュされている可能性があります。変更内容を確認すると共にレンタルサーバーの管理画面からキャッシュを消去するか、少し待ってから何度かリロードしてみてください。