【CSS】AFFINGER5で記事(スライドショー)の日付を見やすくする方法




悩み人

AFFINGERのテーマを使用していますが、投稿記事のスライドショーの日付が背景と同系色で見えません。

このようなお悩みに回答します。

本記事の内容

・追加CSSにコピペするだけ!

本記事の信頼性

hiroki6(@hiroki6__)

当ブログはOPENCAGE(オープンケージ) という、ブロガー向けのテーマを扱っているサイトのWordPressテーマ「STORK19」 というテーマを利用しています。

今回は、ブログテーマのAFFINGERを使用している方向けの情報共有です。

記事をスライドショーのように見せる機能がアフィンガーには備わっていますが、その際に、アイキャッチ上に日付が表示されます。

ぞの日付が、背景と同系色の場合、日付の表示が見えにくいケースがあります。

そのため、日付がしっかりと見えるように、日付の後ろに楕円の背景を付けることで、どんなアイキャッチでも日付が確実に見えるようになります。

追加CSSに追記

追加CSSに追記

以下のCSSをカスタマイズ内にある「追加CSS」に追記するだけです。

色やサイズは、適宜数値を修正してください。

.post-slide-date {
    background-color: #B2B2B2;
    border-radius: 6px;
    padding: 3px;
    opacity: 0.5;
}

まとめ

サイトを見やすくして、ユーザビリティを上げていきましょう。

今回は以上です。

シェアしてくれると喜びます。

ABOUT US

hiroki6
ブログ×本せどり / hiroki6運営(月4500PV)/ 本せどり(月33万)【経歴】大学 / イギリス留学 ▶ 大学院 / NPO法人チーム創設 ▶ 学生起業失敗 ▶ IT企業でWebマーケ担当(月45万 + せどり月15万)▶ 2年で退職 ▶ 会社経営(物販・Webマーケ)● 複業と独立を応援します ● 20代