MENU
趣味

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

こんにちわ🙂 mirai(@m__style33)です。

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

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

JINのデフォルトではこんな感じです。

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

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

ではさっそく変えていきましょう。

サムネイルのカテゴリー名をタイトル下に移動するやり方

今回のカスタマイズはCSSのコードを追加します。

CSSコードの追加方法

  • [外観]→[テーマエディター]→[style.css(子テーマ)]
  • [外観]→[カスタマイズ]→[追加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]にコピペして[公開]をクリックすれば完成です✨

変更前と変更後

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

注意点

このカスタマイズは、カテゴリー名が長いと日付に重なってしまいます。
関連記事の表示の方ではタイトルが長くても重なってしまいます。

推奨設定はこれです!

  • [外観]→[カスタマイズ]→[トップページ設定]→[トップページの記事一覧デザイン選択]をマガジンスタイル
  • [外観]→[カスタマイズ]→[記事のデザイン設定]→[関連記事の表示形式]をマガジンスタイル(2カラム)

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

こんな感じで( ´•꒳​•`)
このブログはスマホから見てる方の方が多いので、ぜひとも見た目はこだわりたい!

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

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

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

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

@media (max-width: 767px) {
  .related-entry-section .post-list-mag3col a.post-list-link .post-list-meta .post-list-title {
    margin: 7px 0;
}}

するとこんな感じでスッキリします。

カスタマイズまとめ

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

これでカテゴリー名の長さなども気にせず、好きなようにアイキャッチ画像が作れますよね😀
(ピックアップマガジンなどは重なったままですがスルーでお願いします!笑。)

\ 他のカスタマイズはこちら✨ /
【JIN/カスタマイズ】プラグイン『Breadcrumb NavXT』でパンくずリストを記事タイトル上に表示&カスタマイズ方法。WordPressのプラグイン『Breadcrumb NavXT』を使ってJINのパンくずリストを記事タイトル上に表示する方法とカスタマイズ方法を書いています。...
【JIN/カスタマイズ】サイドバー固定の目次の見た目をオシャレに表示させる方法。こんにちわ🙂 mirai(@m__style33)です。 このブログでは目次にWordPressの『Table o...

POSTED COMMENT

  1. ぴろやん より:

    カテゴリー名がサムネイルにかぶってしまい、困っていたのでとても助かりました;;
    ありがとうございます!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です