【Simplicity】CSS修正だけ!一覧表示のサムネイルの下にカテゴリ名を帯表示 | 福女アンテナ

【Simplicity】CSS修正だけ!一覧表示のサムネイルの下にカテゴリ名を帯表示

おはようございます、こんにちは、こんばんは。
ふらっふぃ(@fluffy_mybag)です。

トップ・カテゴリ一覧ページのサムネイル(アイキャッチ)の下にカテゴリ名を入れた方法を共有します。

スポンサーリンク

カスタマイズ後のイメージ

サムネイルの下に帯のように表示されます。
上に表示されるカスタマイズ方法が記載されている記事が多いので、参考になればうれしいです。

2012/12/10 時点の一覧画面

Style.cssを修正するだけでできる!

実はStyle.cssを修正するだけでできてしまいます。
以下のコードをコピペしてください。
※色などはご自分のサイトイメージに合わせて修正してください。

「@media screen and max-width: 440px){」の部分はスマートフォン向けの設定です。
PCとスマートフォンではサムネイルのサイズが異なるため、こちらの記述が必要です。
「margin-top」「width」をサムネイルのサイズに指定します。
以下のコードの場合、PC向けは「120px ✖ 120px」、スマートフォン向けは「100px ✖ 100px」になってます。

ちなみに、動作確認しているスマートフォンは「iPhone 6s」です。
他のスマートフォンで表示がずれている場合にはコメントいただけると助かります😅

参考にしたページ

以下のFAQページを参考にさせていただきました。ありがとうございます。

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › アイキャッチ画像の上にカテゴリを表示させたい このトピックには3件の返信が含まれ、1人の
Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › スタイルシートとモバイル用のCSSがぶつかってうまく表示されない このトピックには2件の
The following two tabs change content below.
47歳の独女(×1)です。 人生最後のあがき!ということでダイエットとたるみ改善に励んでおります。 50歳からの人生を模索中。どうぞよろしくお願いします! 詳しいプロフィールはこちら!
スポンサーリンク
スポンサーリンク