広告

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

12568_affinger6-how-to-set-thumbnail-slide-show

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

Question

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

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

AFFINGER6 なら超簡単!

osaboo

こんな方におすすめ!

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

という事で、今回の記事では…

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

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

12568-1-1
完成イメージ画面

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

12568-1-1c

それではご覧ください。

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

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

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

12568-101

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

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

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

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

12568-1

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

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

12568-2a

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

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

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

補足

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

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

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

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

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

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

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

12568-3

※ 全てのカテゴリーを表示させる場合『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 管理メニューでのサムネイルスライドショーの設定(指定)は完了です。

4570_how-to-eye-catch-image-size-1a
【アイキャッチ画像の作り方・適正サイズ】を調べてみた!!

初めてでも10分でできるアイキャッチ画像の作り方をご紹介。おすすめな無料画像の検索サイトや無料で使える画像編集ソフトをご紹介。WordPressを使ったブログ記事への貼り付け手順を"1"から解説。適切な画像サイズと注意すべき点など初心者必見です!!



AFFINGER6のヘッダー周りのカスタマイズは、こちらの記事でもご紹介しています。是非、合わせてご覧ください。

2203_affinger6-customize-menu-1

AFFINGER6 カスタマイズ!メインカラーとデザイ...

3268_affinger6-customize-header-fixed-1

AFFINGER6 スクロール時にヘッダー&メニューを...

3489_affinger6-customize-header-overall-1a

AFFINGER6 カスタマイズ【ヘッダー画像を全体に...

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

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

価格:14,800円(税込)

今なら漏れなく特典付き!!

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

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

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

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

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