ブログ運用

【JIN】トップページと関連記事のカテゴリを非表示にする方法

ブログテーマ「JIN」では、アイキャッチの上にカテゴリが自動的に表示されるようになっています。

とても優れた機能ですが、スマホで見ると下記のように、アイキャッチの文字にカテゴリの表示が被ってしまうことがあります。

カテゴリー名がアイキャッチに被っている画像

大事な文字が隠れてしまうのは、もったいないですよね。

解決方法は2つあります。

  1. カテゴリが表示される部分に文字を置かないように作成する
  2. カテゴリの表示を非表示にする

この記事では、上記2つを比較したのちに解決方法を説明していきます。

パソコン表示またはスマホを横向きで見た場合

スマホを横向きで見ると、カテゴリの表示が小さめになるので被りづらくなることに気が付きました。下記画像が横向きにした場合です。

スマホ横向き画面

しかし、横向きで見ることなんてありませんよね⋯。

パソコンで表示される場合もスマホ横向きで見る場合と、カテゴリの表示の大きさはほぼ同じでした。

ねずみん
ねずみん
私のブログのアクセスはパソコンより、スマホの方が多いので、やはり改善した方が良いと思いました!

解決策①カテゴリが表示される部分に文字を置かないように作成する

この方法は、誰もが考えて実践していると思います。

私も初めは下記画像のように、カテゴリが表示されることを配慮してアイキャッチを作成していました。

文字を被らないように作成したアイキャッチ画像

見て分かる通り、スマホで見た時の「カテゴリが表示される部分」は案外大きいです。

表示されることを考慮して作ると、どうしても文字が細かくなります。

カテゴリが表示されることを考え、自由に使えるスペースを表した画像がこちらです。

アイキャッチの自由に使える範囲の画像

Twitterで投稿する場合には、上下が少し切れます。

それにカテゴリが入る部分は、カテゴリ名が長ければ長いほど右に被さってしまいます

この自由に使えるスペースに文字を置く場合は、先程の画像のように文字を小さくするか、文をぎゅっと短くして真ん中に寄せるかしかないですよね。

どちらにしても少しインパクトに欠けてしまうかなと思います。

  • Twitterに投稿することを考えると、文字は大きく目立ちたい。
  • もっと広くスペースを使いたい。

そう思った私は、カテゴリの表示を非表示にすることにしました。

解決策②カテゴリの表示を非表示にする

カテゴリを非表示にする方法は、追加CSSに指定のタグをコピペするだけです。

何も難しくありません。30秒で終わります!

まず、Wordpressの管理画面から「外観」→「カスタマイズ」→「追加CSS」にいきます。

追加CSSの1行目に以下のコードを入れます。

.post-list-mag .post-list-item
.post-list-inner .post-list-meta
.post-list-cat{
display:none;
}

これで完了です。

記事下に出てくる関連記事のカテゴリも非表示にしたいときは、続けて下記のコードを入力するだけでOKです。

.post-list-mag3col-slide .post-list-item
.post-list-inner .post-list-meta .post-list-cat{
display:none;
}

2つともコピペすると、追加CSS画面はこのようになります。

追加CSS画面

変更前のトップ画面と、カテゴリを非表示にしたトップ画面の比較画像がこちらです。

トップ画面CSS変更前 トップ画面CSS変更後

いかがでしょうか。私的には、スッキリした感じがしました。

もし、戻したくなった場合は入力したコードを消せばいいだけです!

驚くほど簡単に非表示にできるので、試してみてはいかがでしょうか。

WordPressは難しい?初心者が壁にぶち当たりまくっている話
WordPressは難しい?初心者が壁にぶち当たりまくっている話WordPressを開設して2週間が過ぎ、今日は16日目です。 記事は固定ページ(プロフィール、プライバシーポリシー、免責事項)を...



ブログで稼ぎたい人向けの書籍