【STINGER PLUS2】記事一覧・関連記事表示のカスタマイズ

更新日:

記事一覧・関連記事の表示を変更してみました。仕上がりはこんな感じです。

前半はどのようなカスタマイズをしたかのメモです。後半では記事一覧・関連記事のカスタマイズで使う画面と項目をまとめました。

カスタマイズ方法

STINGER PLUS2 管理

  • サムネイル設定のチェックはすべて外す
  • 関連記事にカテゴリを表示する
  • 投稿に関連記事を表示する
  • 関連記事一覧に表示する見出し:関連する記事
  • 関連記事に表示する件数:デフォルト (5件)
  • 投稿の関連記事の表示・非表示

外観のカスタマイズ設定

  • GoogleWebフォントは適用しない
  • 背景色:#ffffff
  • 文字色:#737373

追加CSS

カスタマイズ方法の説明はここまでです。後半は記事一覧・関連記事のカスタマイズで使う設定画面と設定項目のまとめです。

管理画面

ワードプレス管理画面 > STINGER PLUS2 管理

サイト全体の設定

一覧記事と関連記事の設定は連動しています。一覧のサムネイル設定は関連記事の設定にも反映されます。

チェックなし

一覧のサムネイルを丸くする

一覧のサムネイルを大きくする

投稿・固定記事設定

投稿・固定記事設定 > 「記事一覧・関連記事一覧などにカテゴリを表示する」にチェックを入れます。

スクロールすると「関連記事一覧」の設定画面があります。設定できる項目は下記3つです。

  • 関連記事一覧に表示する見出し
  • 関連記事に表示する件数
  • 投稿の関連記事の表示・非表示

カスタマイズ (子テーマ)

外観 > カスタマイズ > [+] 各テキストとhタグ(見出し)

GoogleWebフォントの適応設定

GoogleWebフォントを適応するかどうかを選択できます。

NEW ENTRY & 関連記事

関連記事の見出しの背景色と文字色を選択できます。

追加CSS

適宜変更できます。関連記事部分のHTMLを抜き出したので参考にしてください。

HTMLの構造

-STINGER PLUS2

Copyright© LESS , 2019 All Rights Reserved Powered by STINGER.