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

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

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

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

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

mirai

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

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

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

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

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

I N D E X

サムネイルのカテゴリー名をタイトル下に移動！
- CSSコードの追加方法
ビフォーアフターはこんな感じ
- 注意点＆推奨設定
関連記事のカテゴリー名を消してしまう！
カスタマイズまとめ

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

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

　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］にコピーしましょう。

［外観］→［テーマエディター］→［style.css（子テーマ）］
［外観］→［カスタマイズ］→［追加CSS］

必ずバックアップを取ってからカスタマイズしてくださいね😌

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

↓　↓　↓

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

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

注意点＆推奨設定

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

mirai

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

［外観］→［カスタマイズ］→［トップページ設定］→［トップページの記事一覧デザイン選択］をマガジンスタイル
［外観］→［カスタマイズ］→［記事のデザイン設定］→［関連記事の表示形式］をマガジンスタイル（２カラム）

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

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

mirai

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

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

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

　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の部分を下のように変更してください。