【wordpress】サムネイル（アイキャッチ）上のカテゴリー表示をCSS追加で消す方法-Theme Masonic-

元々は「読書感想・車の整備・DIY」の備忘録として始めたblgだったので、見た目やレイアウトはど〜でも良かったのですが、ここ最近シンプル化を実践していて、その一環として無駄なカテゴリー表示を「非表示」にする方法を紹介したいと思うよ(´･ω･`)

Contents

こんな感じのやつね↓

パソコンからだと普通にアイキャッチしてるんだけど、スマホでプレビューすると画像の上にカテゴリー名が被ってゴチャゴチャした感じになってます。

スマホ横向きも同じく　

テーマによっては「設定」から非表示にできるのだが、masonicはデフォルトがこの状態でphp編集でもできなかったから、追加のcssで非表示にする事にしました。

ブログの微調整をする時、大体がこのchromeデベロッパーツールを使いソースをあぶりだせば解決する事ができます。

ではまず該当コードを探していきます。
chromeのブラウザで検証したいページを開き、非表示にしたい「カテゴリー」の上で右クリックで「検証」をすると、右デベロッパーツール側のHTMLがハイライト表示されます。

Stylesパネルは優先度の高い順に一覧表示されているので、今回の「カテゴリー表示」の指示を出してるのがこの部分だというのは一目瞭然です。

無効化の選択もここではできなそうなので、該当コードをコピー、メモ帳を開いてペースト。

合わせて非表示の指示　{display: none;}　を追加し合わせてコピー。

私の場合は

catagory type a {display:none;}

「外観」→「カスタムCSS」にコピペ

この指示で、スマホのサムネイル上で表示されていた「カテゴリー名」を非表示にできます（パソコン・タブレットは表示にもできる）

カテゴリー消滅(ノ)･ω･(ヾ)

ま、ま… 閲覧してくれる人にとっては「ど～でもえぇわ！」と一蹴されそうですが、自己満足ですな。

masonicユーザーさんへご参考までに・・

【wordpress】サムネイル（アイキャッチ）上のカテゴリー表示をCSS追加で消す方法-Theme Masonic-