『affinger5』記事･画像スライドショーの設定方法を解説！

こんにちは！ブリコラブログ！です。

今回は人気ブログテーマのひとつ『Affinger5（アフィンガー5）』に、

スライドショーを設定する方法を解説します！

ブログの特性上、トップページや記事が一次元・平面的なのは仕方ないところです。

スライドショーのような“動き”を付けるとページに視覚な特徴が付くばかりでなく、

訪問いただいた読者の方に“高揚感”や“期待感”が生まれるのではないでしょうか！？

またブログ内の記事がぐるぐる回って表示されることにより、

訪問いただいた読者の方が気になる記事をクリックしてくれるきっかけになります！

クリックしてくれる機会が増えれば、セッション数や滞在時間が増えますね！

それでは早速、設定方法を一緒に学んでいきましょう！

アフィンガー5：スライドショーの種類

アフィンガー5で設定できるスライドショーは、大きく2種類あります！

厳密に申しますと❶のヘッダーのスライドショーに「2種類」ありますので、

合計3種類となります。順番に見ていきましょう！

ヘッダーに記事スライドショーを設定する

• アフィンガー5管理をクリックの後、「ヘッダー」を選択。
• 「ヘッダーに記事をスライドショーで表示する」に「✔」を入れてください！

以下のように、ヘッダーに記事スライドショーが設定されます！

簡単ですよね！

スライドショーの詳細設定

「記事スライドショー設定」では、表示形式や動作に関するカスタマイズが可能です！

順番に見ていきましょう。

❶スライドショーの表示速度

ブログの表示画面上で記事のサムネがスライドするスピードを設定できます。

結論「そのままで良い」です！

デフォルト設定の「5,000」を「300」に変更してみたのですが、

スライドスピードが速すぎて認識不可能になります（苦笑）

数字が少ないほどスピードが速くなる　ということをご理解ください！

❷カテゴリーの表示

スライドさせる記事を、任意のカテゴリーに設定することが可能です。

私はブログのカテゴリーを５つ設定しておりまして、「表示するカテゴリID」に

「1,4」と入力したとします。

私の場合は　１：資産づくりカテゴリー　４：ビジネススキルカテゴリーであり、

スライドする記事はこの2カテゴリーが表示されるという具合です。

❸カテゴリーリンクを非表示

「✔」を入れると、スライド表示されるサムネのカテゴリーを「非表示」に変更できます。

❹スライドの矢印設定

「✔」を入れると、スライド表示されるサムネのスライド矢印を「非表示」に変更できます。

また「矢印のカラー」で任意カラーを設定することで、別のお好みカラーへ変更も可能です！

ヘッダー画像をスライドショーで設定する

「✔」を入れると、ヘッダー画像がランダムに表示されます！

記事内にスライドショーを設定する

・「タグ」→「記事一覧/カード」→カテゴリー一覧（スライドショー）の順に選択。

↓↓↓このように反映されます！

スライドショー設定・応用編❶：トップページに設定

当ブログでも採用している設定方法です！

設定完了までの流れは、以下の通りとなってます。

❶･❷固定ページ作成～記事スライドショー設定

• 「固定ページ」タグ  →  新規追加　をクリックして作成開始します。
• タイトルを任意設定します。※後で分かりやすいように「トップページ」など。
• スライドショー設定したい箇所に「タグ」→「記事一覧/カード」→カテゴリー一覧（スライドショー）の順に選択して、テキストを挿入します。

❸完成した固定ページを「ホームページ」に設定する

• 「外観」タグ  →  「カスタマイズ」　を選択します。
• 「ホームページ設定」をクリック後、ホームページの表示を「固定ページ」に。
• ホームページを、先ほど作成した固定ページのタイトルを選択します。

カスタマイズページで設定が完了したら、固定ページ一覧に戻ります。

作成したトップページが「フロントページ」表記になっていたら、ブログのTOPページとして

設定完了です！

記事スライドショー設定したホームページ

スライドショー設定・応用編❷：ウィジェットで任意箇所に設置

ここでは応用編で、ウィジェット機能を使って任意の箇所へ設置します。

投稿記事の下に設置した例で説明しますね！

・「外観」＞「ウィジェット」で進み、「テキスト」をドラッグします。

・次に「投稿記事の下に一括表示」のボックスにドロップします。

・「スライドショー設定・応用編❶：トップページに設定」でお伝えした、

「タグ」＞「記事一覧/カード」＞カテゴリー一覧（スライドショー）の順に選択して

作成できたコードをコピーします。

・コピーしたコードを、ドロップしたテキスト欄に貼り付けしてください！

「完了」を押すと、投稿記事の下に記事スライドショーが設定されます！

簡単ですね！

『affinger5』スライドショーの設定方法：まとめ

いかがでしたでしょうか？？

簡単に設定出来て、カスタマイズ後の効果＝ブログ雰囲気をオシャレに

変えれるなどトライする価値は十分ですよね！！

その他カスタマイズ

過去記事でアフィリエイトの貼り方や装飾文字の設定方法を、詳しく解説しております。

よろしければご参考までにご覧ください！

それでは、また次回のブリコラ！でお会いしましょう！