【JIN/カスタマイズ】サムネイルの左上にあるカテゴリー名を記事タイトル下に移動する方法。

こんにちわ🙂 mirai（@m__style33）です。

WordPressのテーマ『JIN』のブログカスタマイズ第２弾です✨

今回はトップページの記事一覧のサムネイルの左上にあるカテゴリー名をタイトルの下に移動させるカスタマイズしたいと思います。

『JIN』のデフォルトではこんな感じでアイキャッチに重なって表示されてます。

mirai

アイキャッチ画像のデザインによっては、カテゴリー名が重なって見づらくなってしまうんですよね…( ´•꒳​•`)💦

アイキャッチ画像は記事の顔！

…と思いながらも自分の場合はそこまで手の込んだアイキャッチ画像を作ってるわけではないんですが、せっかく凝って作ったアイキャッチ画像に重なってしまうとなんか気になっちゃいますよね。

かといって、カテゴリー名に重なりそうなところを避けてアイキャッチ画像を作るのもめんどくさい！

なので今回はカテゴリー名を記事タイトルの下に移動させてスッキリさせましょう！

サムネイルのカテゴリー名をタイトル下に移動！

とっても簡単！
今回のカスタマイズはCSSのコードを追加するだけです！

@media (min-width: 768px) {
 span.post-list-cat {
top:auto !important;
bottom:11px !important;
}}
@media (max-width: 767px) {
 span.post-list-cat {
top:auto !important;
bottom:7px !important;
}}

このCSSを追加するだけで移動できます。

参考リンク【JINカスタマイズ】サムネに重なるカテゴリー名をタイトル下に移動したい。が、やっと解決した。｜元アフィ子の片思い奮闘記。

CSSコードの追加方法

WordPressの管理画面から、どちらかの方法で追加します。
慣れないうちは［追加CSS］にコピーしましょう。

ビフォーアフターはこんな感じ

記事タイトル下にしたことによって、アイキャッチ画像の文字などもはっきり見えるようになりました✨

※このブログでは現在公開日の日付を非表示にしています。

注意点＆推奨設定

このカスタマイズは、カテゴリー名が長いと日付に重なってしまいます。
関連記事の表示の設定によってはタイトルが長い場合でも重なってしまうのでどうにかしたいところですよね。

mirai

なるべく綺麗に表示させるための推奨設定はこれです！

しかしこれでもスマホでの関連記事の方では重なってしまう可能性が大です💦

こんな感じにタイトルに被ったり日付に重なるんですよね。
これじゃせっかく下に移動させても見た目がよろしくない…！

mirai

このブログはスマホから見てる方の方が多いので、ぜひとも見た目はこだわりたい！

関連記事のカテゴリー名を消してしまう！

なのでこのブログでは思い切って関連記事のカテゴリー名は消すことにしました。
消したい場合は以下のコードを追加CSSかstyle.css（子テーマ）に追加してくださいね。

@media (min-width: 768px) {
  .post-list-mag3col a.post-list-link .post-list-meta .post-list-cat {
    display:none; } }

@media (max-width: 767px) {
  .post-list-mag3col a.post-list-link .post-list-meta .post-list-cat {
    display:none; } }

/*　余白　*/
@media (max-width: 767px) {
  .post-list-mag3col a.post-list-link .post-list-meta .post-list-title {
    margin: 7px 0;
}}

このカスタマイズは関連記事の表示形式をマガジンスタイル（３カラム）に設定している場合のものになります。
他の表示形式に設定している方は.post-list-mag3colの部分を下のように変更してください。

するとこんな感じでスッキリします。
もし関連記事のカテゴリー名が必要ないと思った場合は消してしまいましょう。

カスタマイズまとめ

今回はトップページの記事一覧のサムネイルの左上にあるカテゴリー名をタイトルの下に移動させるカスタマイズをしました。

これでカテゴリー名の長さなどを気にすることなく、好きなようにアイキャッチ画像が作れますよね😀

［※追記］
現在このブログでは公開日の日付を非表示にしています。

【JIN/カスタマイズ】プラグイン『Breadcrumb NavXT』でパンくずリストを記事タイトル上に表示＆カスタマイズ方法。WordPressのプラグイン『Breadcrumb NavXT』を使ってJINのパンくずリストを記事タイトル上に表示する方法とカスタマイズ方法を書いています。...

【JIN/カスタマイズ】サイドバー固定の目次の見た目をオシャレに表示させる方法。こんにちわ🙂 mirai(@m__style33)です。 このブログでは目次にWordPressの『Table o...