Customize AFFINGER

AFFINGER6 ヘッダー画像の下にサムネイルスライドショーを設定する方法!

AFFINGER6 ヘッダー画像の下にサムネイルスライドショーを設定する方法!

こんにちは "osaboo"です。"@osaboo_Bot"

Question
Question

AFFINGER6で ヘッダー画像の下にサムネイルスライドショーを設定する方法が知りたい。

\\ このような「疑問を解決する」お手伝いをします!//

AFFINGER6 なら超簡単!

osaboo
osaboo

こんな方におすすめ!

  • WordPressテーマ ▶︎ AFFINGER6を使っている。
  • 簡単にサムネイルスライドショーを設定したい。
  • トップページ・固定ページをオシャレにしたい。

今回の記事では…

ヘッダー画像の下にサムネイルスライドショーを設定する方法をご紹介します。

完成イメージはこんな感じです。

サムネイルスライドショー完成イメージ
完成イメージ画面
yajirusi-sita-80x40

こんな感じでスライドします。

サムネイルスライドショー完成イメージ-2

それではご覧ください。

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

AFFINGER6サムネイルスライドショーの設定方法

サムネイルスライドショーの設定方法

それでは、「サムネイルスライドショー」をヘッダー画像の下に設置していきましょう。

AFFINGER6では、『AFFINGER 管理』メニューから簡単に設置することができます。

サムネイルスライドショー詳細設定画面を開く

『AFFINGER 管理>ヘッダ下 / おすすめ>サムネイルスライドショー』をクリックします。

AFFINGER 管理-ヘッダ下 / おすすめ-サムネイルスライドショー
yajirusi-sita-80x40

同画面上でスクロール移動して、以下の画面が表示されます。

以下の画面でサムネイルスライドショーの詳細設定を行います。

AFFINGER 管理-ヘッダ下 / おすすめ-サムネイルスライドショー-2

※ 上から順番に設定項目を解説していきます。

サムネイルスライドショー表示機能を選択

サムネイルスライドショー表示機能を有効化します。デフォルトでは『無効』が選択されているので、『フロントページ』または『全ページ』のいずれかを選択します。

補足

  • ○ 無効:デフォルト設定 ▶︎ 表示されません。
  • ● フロントページ:トップページのみにサムネイルスライドショーが表示されます。
  • ○ 全ページ:全てページのみにサムネイルスライドショーが表示されます。

※ 当記事の設定では、フロントページを選択しています。

表示されるカテゴリを指定

サムネイルスライドショーを表示するカテゴリを指定します。四角の枠内に『カテゴリID』を入力します。複数入力の場合は半角カンマで区切ります。

例:カテゴリIDが、1と3と5の場合、四角の枠内に『 1,3,5 』と入力します。 全ての入力は必ず半角)

補足・カテゴリIDの確認方法

『WordPress管理>投稿>カテゴリー』をクリックします。▶︎ 以下の画面で赤枠部の半角数字を確認

WordPress管理-投稿-カテゴリー

※ 全てのカテゴリーを表示させる場合『0』を入力します。▶︎ 新着記事を表示させたい場合には有効です。

各デバイスでの表示数を指定

各デバイスの一画面に表示されるサムネイル画像の数を指定します。

サムネイルスライドショーを表示するデバイス毎の表示数を指定します。四角の枠内に『パソコン,タブレット,スマホ』の順に半角カンマで区切って表示数を入力します。

例:「パソコンの表示数:4」「タブレットの表示数:3 」「スマホの表示数:2」の場合、四角の枠内に『 4,3,2 』と入力します。全ての入力は必ず半角)

取得記事数・表示順序・表示スタイルを指定

サムネイルスライドショーを表示する記事数を指定します。次に、表示順序の条件と付加する表示要素を選択します。最後に表示スタイルを好みに合わせて指定します。

補足

  • 取得記事数:サムネイルスライドショーに表示する記事の数
  • 表示順序
    1. 昇順(DESC):古い順に並べる(1→2→3)
    2. 降順(ASC):新しい順に並べる(3→2→1)
  • 表示順序要素
    1. ID:IDを基準とす
    2. 投稿日:投稿日を基準とする
    3. 更新日:更新日を基準とする
    4. ランダム:無作為とする
  • 表示スタイル(参考を明記)
    1. 子カテゴリーを除外する:-当記事では除外しない
    2. 日付を表示しない:-当記事では表示しない
    3. センター寄せにする(スマホ):-当記事ではセンタ寄せにしない
    4. 画像 + テキスト:-当記事ではON
    5. 画像のみ:-当記事ではOFF
    6. 画像を角丸にする:-当記事ではOFF
    7. 画像に影をつける:-当記事ではON
    8. 画像をフルサイズにする:-当記事ではON(※ 設定により画像が切れて表示される
    9. タイトルカラー:-当記事では #999999

以上で、AFFINGER 管理メニューでのサムネイルスライドショーの設定(指定)は完了です。

まとめ!AFFINGER6 ヘッダー画像の下にサムネイルスライドショーを設定する方法!

AFFINGER6で ヘッダー画像の下にサムネイルスライドショーを設定する方法をご紹介しました。AFFINGER6だから出来る簡単な設定です。サイトを豪華に見せるためにはとても有効な方法かと思うので…是非試してください。サイトのバランスを考えながら表示パターンを検討するのも楽しいかと思います!!

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

AFFINGER6_おすすめ記事!

26239_affinger6-swell-comparison-4a 1

WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。

19298_affinger6-honest-review-2a 2

AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意しました。

3969_affinger6-how-to-buy-2 3

WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。また購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。

15446_AFFINGER6-how-to-use-tag-ma-1 4

AFFINGERタグ管理マネージャー4 ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。

-Customize AFFINGER
-