【JIN】【カスタマイズ】【追加CSS】サムネイルに重なるカテゴリー名をタイトル下に移動する

せっかく作ったアイキャッチ。サムネイル表示にしたら文字とカテゴリ名が重なっちゃった！カテゴリー名をタイトル表示の下に移動できたらいいのにな。

・・・という時に使える方法を簡単に記載します（WordPress のテーマで『JIN』を利用している方が前提です）。

手順

1. ダッシュボード > 外観 > 追加CSS へ移動。
2. 追加CSSを追記する。
3. 設定を反映する。
4. ブラウザを再読み込みし、反映されていることを確認する。

追記CSS

下記をコピぺすればOK。

コメントを添えると後からメンテナンスもしやすくなります。コードを追記するときは極力添えるようにしましょう。 /* から */ までがコメント箇所です。

1<div class="wp-block-jin-gb-block-box simple-box5">
2<p>/* Top画面の左上のカテゴリを下にして画像にかぶらないようにする */</p>
3<p>@media (min-width: 768px) { span.post-list-cat {top:auto!important; bottom:11px!important}}<br>@media (max-width: 767px){ span.post-list-cat {top:auto!important; bottom:7px!important}}</p>
4</div>

追記イメージはこちら。

備考

この方法は画像と文字が重ならなくなる点は嬉しい反面、アイキャッチのセンスが問われます。私自身のブログはまだまだ写真のみが多いため、寂しいなぁという印象。

変更を検討するときはアイキャッチでそれこそ「目を惹く」画像も併せてご検討くださいね（私もちまちま励みます）。

加藤ミサ

katomisa

XContact

趣味がなくてブログを始めたワーママブロガー。当サイト「朝ライフ（AsaLife）」を運営するうちに、ストックイラストに出会いました。「ブログ制作をきっかけに趣味を探したい人」もしくは「趣味をきっかけにブログでも情報を発信したい人」に向けて、ブログ制作にまつわる情報を発信しています。美容家SEとしても活動中。

・ブログガイド
　https://asalife.jp/blog-guide-top
・かとみさイラスト制作室
　https://katomisaillust.asalife.jp
・note
　https://note.com/katomisa3