MENU
カスタマイズ

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

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

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

手順

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

追記CSS

下記をコピぺすればOK。

/* Top画面の左上のカテゴリを下にして画像にかぶらないようにする */

@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}}

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

追記イメージはこちら。

完了!

備考

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

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