ブログテーマ「JIN」では、アイキャッチの上にカテゴリが自動的に表示されるようになっています。
とても優れた機能ですが、スマホで見ると下記のように、アイキャッチの文字にカテゴリの表示が被ってしまうことがあります。
大事な文字が隠れてしまうのは、もったいないですよね。
解決方法は２つあります。
- カテゴリが表示される部分に文字を置かないように作成する
- カテゴリの表示を非表示にする
この記事では、上記２つを比較したのちに解決方法を説明していきます。
パソコン表示またはスマホを横向きで見た場合
スマホを横向きで見ると、カテゴリの表示が小さめになるので被りづらくなることに気が付きました。
しかし、横向きで見ることなんてありませんよね⋯。
パソコンで表示される場合もスマホ横向きで見る場合と、カテゴリの表示の大きさはほぼ同じでした。
解決策①カテゴリが表示される部分に文字を置かないように作成する
この方法は、誰もが考えて実践していると思います。
私も初めは下記画像のように、カテゴリが表示されることを配慮してアイキャッチを作成していました。
見て分かる通り、スマホで見た時の「カテゴリが表示される部分」は案外大きいです。
表示されることを考慮して作ると、どうしても文字が細かくなります。
Twitterで投稿する場合には、上下が少し切れます。
それにカテゴリが入る部分は、カテゴリ名が長ければ長いほど右に被さってしまいます。
この自由に使えるスペースに文字を置く場合は、先程の画像のように文字を小さくするか、文をぎゅっと短くして真ん中に寄せるかしかないですよね。
どちらにしても少しインパクトに欠けてしまうかなと思います。
- Twitterに投稿することを考えると、文字は大きく目立ちたい。
- もっと広くスペースを使いたい。
そう思った私は、カテゴリの表示を非表示にすることにしました。
解決策②カテゴリの表示を非表示にする
カテゴリを非表示にする方法は、追加CSSに指定のタグをコピペするだけです。
何も難しくありません。30秒で終わります！
まず、Wordpressの管理画面から「外観」→「カスタマイズ」→「追加CSS」にいきます。
追加CSSの１行目に以下のコードを入れます。
.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;
}
２つともコピペすると、追加CSS画面はこのようになります。
変更前のトップ画面と、カテゴリを非表示にしたトップ画面の比較すると、スッキリした感じがしました。
もし、戻したくなった場合は入力したコードを消せばいいだけです！
驚くほど簡単に非表示にできるので、試してみてはいかがでしょうか。
人気の商品が毎日お買得価格で登場Amazonのタイムセール▼
Amazon全ジャンルのクーポンはこちら▼
ブログで稼ぎたい方向けのおすすめ書籍です。
これを読んで実践するとステップアップ間違いなし！
