【WordPress】カテゴリーなど不要な要素を削除

カスタマイズ性に富んだWordPressのテーマSWELL。ただ設定しているうちに「これいらないんだけど……」っていうのがチラホラ。大体は外観→テーマ内にあるメニューなどからカスタマイズできるんだけど、中にはちょっといじらないと編集できない項目も。

そんな項目もCSSに記述することで簡単に変更することができたので備忘録として残しておこう。

要素の確認はFirebug Liteで確認

サイトの構造を知るためにはソースコードを確認するのが手っ取り早いんだけど、知識があまりないと目的の要素を探すのも一苦労。今ではChromeの開発者ツールでも同じようなことができるんだけど、なんとなく直感的ではないというか、単純に私が使いこなせていない。

かつて使っていたFirebugがChromeの機能拡張にあったので、そちらをインストールしてみた。

Firebug Lite:
https://chromewebstore.google.com/detail/firebug-lite-for-google-c/ehemiojjcpldeipjhjkepfdaohajpbdo

インストール後にFirebug LiteのアイコンかF12を押せばウィンドウが分割され、要素を確認できるというもの。

▲何が便利って、Inspectにチェックを入れて、気になる要素にマウスカーソルを合わせると、その場所を示すclass属性が強調されて表示されるという点!

まあ基本的に使うのは消したい要素のclass属性を確認するというものだけなんだけどね。

余計なものなど……あるよね〜

消したかったのは、投稿記事下部に表示されるカテゴリーやタグのアイコンと、記事一覧ページに表示される– category –っていう表示。

▲カテゴリやタグはタイトルの下部にも表示してあるので、記事の下部に配置されててもかぶるだけなので削除したかった
▲無駄に英語でイタリックなフォントだったので、ちょっとサイトデザインに合わない

これを先ほどインストールしたFirebug Liteで確認してみると、それぞれのclass属性が確認できる。

▲例えば投稿記事下部のカテゴリー表示はp-articleFootだというのがわかる

あとはこれらを削除するおまじないをstyle.cssに記述すればOK。WordPressのダッシュボードにある、外観→テーマファイルエディターでstyle.cssに記述ができるので、下記のように記述してファイルを更新のボタンを押せばOK。

.p-articleFoot{

  display: none;

}

.c-pageTitle__subTitle{

  display: none;

}

.wp-block-image figcaption {

  text-align: left;
}

一番下の.wp-block-image figcaptionの記述は、画像のキャプションをセンターではなく左ぞろえにするもの。これでひとまずは気になっていたところが解消できた!

追記:さらに、いろいろ調整したい部分が出てきたので、最終的にはこんな感じで落ち着いた。

/* 投稿記事下部のカテゴリーを非表示*/
.p-articleFoot{
  display: none;
}

/* カテゴリー一覧ページのサブタイトルを非表示*/
.c-pageTitle__subTitle{
  display: none;
}

/* キャプションを左ぞろえ*/
.wp-block-image figcaption {
  text-align: left;
}

/* 投稿画像を角丸*/
.wp-block-image img {
	border-radius:10px;
}

/* パンくずリストを非表示*/
#breadcrumb {
 display: none;
}

/* メインビジュアルのスクロールをPCで非表示、SPで表示*/
@media screen and (min-width: 960px) {
.p-mainVisual__scroll{
display:none;