AFFINGER5 Wordpress

AFFINGER5で記事一覧(スライドショー)の更新日を見やすくする方法

WING (AFFINGER5)の記事一覧パーツ

WING (AFFINGER5)テーマには、カテゴリ内の記事の一覧を簡単に挿入する機能があります。

スライド式のカテゴリ一覧

コード不要で簡単設置

記事一覧を挿入する方法を知りたい方は、以下のリンクから本家のサイトをご覧ください。

関連

【WordPress】トップページにカテゴリ一別の一覧を作成する方法

http://the-money.net/wp_top_category_itiran/

この便利な機能ですが、しかしアイキャッチ画像によっては、記事の更新日がうまく表示されないことがあるのです。例をみてみましょう。

画像によっては更新日が見えない

あと、テキストの色が白なので、背景が白い画像の場合は更新日の文字も読みづらいですね。

アイキャッチ画像は正方形で白以外の色の背景のものを選べばこの問題はないのでしょうが、現実として、アイキャッチ画像にそこまでこだわり抜いてないことも多いのではないでしょうか。

毎回アイキャッチ画像に時間を費やすのも面倒なので、できれば汎用的な対策で対応したいところですよね。

今回は、更新日が見づらい問題に対する対応策を二つ紹介します。

対応策1 - 日付を表示させない

一つ目の対応策は、そもそも更新日を表示させないようにすることです。

これはカテゴリ一覧を作成するときのショートコードの設定で簡単に行うことができます。カテゴリ一覧のショートコードにはいくつかパラメータがあり、その中のslide_dateというパラメータの値を「off」に設定すれば更新日は表示されなくなります。

これがもっとも簡単な対処策ですが… どうしても更新日を見せたいという場合はなんの解決にもなっていませんね。そんな方は次の対応策をご覧ください。

対応策2 - 追加CSSでスタイルを変更する

二つ目の対応策は、CSSを調整して更新日のテキストのスタイルを直す方法です。

AFFINGERテーマのすごいところは、かなり細かいところまで設定変更だけでカスタマイズ点にあると思っているので、カスタムなCSSを追加するのはできる限り避けたいというのが僕の考えです。

しかしあれこれ探し回ってもどうしても見つからなかったので、以下の対応をしました。

追加CSSの追加手順

まずは、管理メニューから、外観 → カスタマイズを選択。

外観のカスタマイズ画面になったら、一番下にある「追加CSS」選択。

テキストエリアに以下のスタイルを追加。

記事一覧のスライドボックスの表示を確認してみましょう。以下のように表示が反映されるはずです。

更新日の文字に背景色を追加

だいぶ見やすくなりましたね。

変更が終了したら「公開」ボタンを押して変更を保存しましょう。

補足しておくと、

  • post-slide-dateは、AFFINGER5でカテゴリ一覧の中の日付のテキストをラップしているDIV要素のクラス。将来、製作側で変更があるかもしれないので、その点は自己責任で対応。
  • background-colorで背景色を指定。
  • border-radiusによって、背景の枠に丸みを持たせている。
  • paddingによって、ボックスと更新日のテキストの間に多少の空白を持たせている。
  • opacityによってボックスの色を半透明にしている。値は0から1の間の小数の数値を指定する。

カスタマイズは自己責任で

今回はちょっとしたCSSの調整でスタイルを修正する方法を紹介しました。

軽微なCSSの変更なのでほとんど影響はないはずですが、この内容はAFFINGER5 (2019/2/23時点での最新版)を元に作成しています。

テーマ内のHTMLの構造や、使用するCSSのクラス名などは製作者の一存で決める内部仕様であり、将来のバージョンでも同じ方法で使えることは保証されていませんので、あらかじめご了承の上お試しください。

-AFFINGER5, Wordpress

Copyright© 技術系のメモ , 2019 All Rights Reserved.