アフィンガー6でスライドショー導入しホームを一気に映えさせる6つの方法

アフィンガー6でスライドショーを入れたいけれど、設定画面が多くて少し迷子になっていないでしょうか。私も最初に触ったときは、どこをいじればいいのか分からず、同じ画面を何度も行ったり来たりしていました。

結論を先にいうと、アフィンガー6のスライドショーは「場所ごとのおすすめ設定」を真似していけば、初めての人でも十分使いこなせます。

アフィンガー6のスライドショーを使うと何が変わる？

私がアフィンガー6 スライドショーを入れて感じた3つの効果

私がブログにアフィンガー6のスライドショーを導入したとき、一番大きかったのは「読者の動き方が変わった」ことでした。見た目が派手になっただけでなく、読まれる記事の種類やクリックされる場所が変わった感覚があります。

導入前と導入後のイメージを、ざっくり表にするとこんな感じです。

項目	導入前の状態	導入後の変化のイメージ
ファーストビューの印象	文字が中心で、少しさみしい雰囲気	アイキャッチが動いて、雑誌の表紙のような印象に変化
読者の動き	1記事だけ読んでそのまま離脱しがち	スライドの画像から別記事に移動してくれる回数が増えた
押されるリンクの種類	メニューや記事内のテキストリンクが中心	スライドショーのカードからのアクセスが目立つようになった
自分の更新モチベーション	見た目が地味でテンションが上がりにくい	「ここに載せたいから良いサムネを作ろう」と前向きになった

スライドショーは、単なる飾りというより「読んでほしい記事に目線を誘導するための装置」に近いです。アフィンガー6は、ヘッダーや記事内などいくつかの場所にスライドショーを簡単に配置できるよう作られているので、うまく使うとサイト全体の雰囲気をガラッと変えられます。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

アフィンガー6 スライドショーの基本仕様と注意点

アフィンガー6で使える主なスライドショーの種類

アフィンガー6では、用途や表示位置にあわせていくつかのスライドショー機能が用意されています。主なものをまとめると、次のようなイメージです。

種類	表示される場所のイメージ	主な用途
ヘッダー記事スライドショー	サイト最上部のヘッダー画像エリア	新着記事や推したい記事のアピール
画像スライドショー	ヘッダー画像エリア	サービスイメージや写真を順番に見せたいとき
サムネイルスライドショー	ヘッダー画像の下のエリア	おすすめ記事一覧やメインカテゴリーの入口
カテゴリー記事一覧スライドショー	記事内・フッター・サイドバーなど	特定のカテゴリーの記事まとめ
記事一覧スライドショー（EX限定）	記事内など任意の場所	指定した記事IDだけをスライド表示
タグ一覧スライドショー（EX限定）	記事内など任意の場所	特定タグのついた記事をまとめて表示

通常版でもかなりのことができますが、EX版を使っている場合は、記事IDやタグを細かく指定して「読ませたい記事だけを並べる」ことも可能です。

スライドショーを使うときの基本的な注意点

便利だからといって、スライドショーをあちこちに入れすぎると逆効果になることもあります。特に意識しておきたいのは、次のポイントです。

目安としては、「1ページにスライドショーは1〜2箇所」「画像サイズと枚数は欲張りすぎない」くらいを意識しておくと、見た目と快適さのバランスが取りやすいです。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

 

アフィンガー6 スライドショーを記事内に設置する手順

カテゴリー記事一覧スライドショーを記事内に入れる流れ

カテゴリー記事一覧スライドショーは、特定のカテゴリーの記事を横スライドのカード形式で見せられる機能です。関連記事の回遊を増やしたいときに、とても使いやすいパーツです。

流れとしては、ざっくり次のような手順です。

• 記事の編集画面を開く
• ブロックエディターなら「ショートコード」ブロックを追加する
• アフィンガーのタグメニューから「カテゴリー記事一覧スライドショー」を選ぶ
• 自動で挿入されたショートコード内のカテゴリーIDなどを必要に応じて調整する
• プレビューで表示を確認して、違和感があれば再調整する

よく触ることが多い項目を、イメージしやすいように表にしておきます。

項目	役割のイメージ	例
id / cat	どのカテゴリーを対象にするか	cat=”3″（IDが3のカテゴリーを表示）
slide	スライドショーにするかどうか	slide=”on” でスライド表示
slides_to_show	PC・タブレット・スマホの表示枚数	“3,3,2” なら PC3枚 / タブ3枚 / スマホ2枚
slide_more	ボタンの文言	slide_more=”ReadMore” など
page / orderby	何件まで、どんな順番で出すか	page=”5″ orderby=”date” など

最初から細かくカスタマイズしようとすると疲れてしまうので、まずはデフォルトのまま出してみて、必要になったところだけ数字を変えていく方がスムーズです。

記事一覧スライドショー（EX版）で特定記事だけを見せる

アフィンガーEX版を使っている場合は、「記事一覧スライドショー」で特定の記事IDだけを並べたスライドショーを作ることもできます。収益記事や重要な記事をまとめて見せたいときに便利です。

手順のイメージは次のような感じです。

• タグメニューから「記事一覧（スライドショー）」を選ぶ
• 自動で挿入されたショートコードの id に投稿IDをカンマ区切りで指定する

たとえば、id=”12,34,56″ のように書くと、その3つの記事だけがループ表示されるようになります。「この3本だけは確実に読んでほしい」というときに、かなり使いやすい機能です。

ブロックエディターとクラシックエディターの違い

同じスライドショーでも、ブロックエディターとクラシックエディターでは操作感が少し違います。ただ、やっていること自体は「ショートコードを挿入して、必要な部分だけ数字を変える」という点で共通です。

どちらのエディターでも、分からなくなったら一度プレビューで「実際の見た目」を確認しながら調整していくと失敗しづらいです。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

 

アフィンガー6 スライドショーをトップページ・ヘッダーに表示する

ヘッダー記事スライドショーを有効化する

ヘッダー記事スライドショーは、ヘッダーのトップ画像エリアに記事のアイキャッチを次々と表示できる機能です。ブログの「名刺」のような記事を並べたいときにぴったりです。

設定の流れは次のようなイメージです。

• 管理画面の「AFFINGER管理」から「ヘッダー」を開く
• 「ヘッダーに記事をスライドショーで表示する」にチェックを入れる
• どのカテゴリーの記事を表示するかなど条件を指定する
• 切り替わりの速度や表示方法を好みに合わせて調整する
• 保存してトップページを確認する

ヘッダーエリアには「ヘッダーコンテンツ」や通常のヘッダー画像なども設定できますが、表示の優先順位はおおむね「記事スライドショー → ヘッダーコンテンツ → ヘッダー画像」となっています。ヘッダーに何も表示されないときは、この優先順位でどれが有効になっているかを確認してみてください。

サムネイルスライドショーでヘッダー下を“入口”にする

ヘッダー画像のすぐ下に、カード型の記事一覧をスライド表示できるのが「サムネイルスライドショー」です。私はここを「サイトの入り口」として使うイメージで設定しています。

設定の流れは次のような感じです。

• 「AFFINGER管理」から「ヘッダー下／おすすめ」を開く
• 「サムネイルスライドショー」を有効化する
• 対象のカテゴリーや表示件数、並び順を設定する
• PC・タブレット・スマホごとの表示枚数を決める
• 保存して、実際のトップページで見た目を確認する

ヘッダー直下は、初めてサイトに来た人の多くが必ず目にするエリアです。メインカテゴリーや、絶対に読んでほしい記事を並べておくと、サイト全体の流れが自然につながりやすくなります。

トップページで使うスライドショーの使い分け

トップページの周りで使えるスライドショーを整理すると、だいたい次のような組み合わせになります。

表示位置	向いているスライドショー	おすすめ用途
ヘッダー画像エリア	ヘッダー記事スライドショー	新着・人気記事、ブログの方向性が分かる記事
ヘッダー画像エリア	画像スライドショー	サービスやブランドのイメージ写真
ヘッダー下	サムネイルスライドショー	メインカテゴリーやおすすめ記事の一覧
記事下・フッター	カテゴリー記事一覧スライドショー	関連記事や次に読んでほしい記事の紹介

「何を使うか迷う」という場合は、まずはヘッダーで記事スライドショー、ヘッダー下でサムネイルスライドショー、フッター付近でカテゴリー記事一覧スライドショーという3点セットからスタートしてみると、バランスが取りやすいです。

アフィンガー6 スライドショーのデザイン調整とカスタマイズ

表示速度・切り替えアニメーションを調整する

ヘッダー記事スライドショーなどでは、切り替え速度やアニメーションの種類を管理画面から簡単に変えられます。見ている側の感覚に合わせて、ちょうどいいスピードにしておきたいところです。

主に調整できるのは、次のような項目です。

項目	無難な設定の目安	コメント
表示速度	3000〜5000ミリ秒	体感で3〜5秒程度。長文のテキストがあるなら少しゆっくりめに
表示方法	フェードまたは横スライド	落ち着いたサイトならフェード、動きを出したいならスライド
自動再生	基本はON	自動で動いてくれた方が、目に入りやすい
無限ループ	ON	途中で止まるより、くるくる回っている方が自然に見える

切り替えが速すぎると落ち着かないですし、遅すぎると「変わらないな」と感じられてしまいます。実際に自分の目で見ながら、違和感がないところを探してみてください。

サムネイルスライドショーの見た目を整える

サムネイルスライドショーは、PC・タブレット・スマホごとに表示枚数を変えたり、サムネイルの比率をそろえたり、矢印の表示を切り替えたりと、細かい調整がしやすい機能です。

代表的な調整ポイントをまとめると、こんなイメージです。

項目	何を変えるか	おすすめの考え方
PC・スマホごとの表示数	横に並べるカードの数	PCは3〜4枚、スマホは2〜3枚にして詰め込みすぎない
サムネイル比率の反映	画像の縦横比をそろえるかどうか	比率をそろえた方が、全体がきれいに整って見える
タイトルの文字数	何文字まで表示するか	長すぎると2行以上になり、ゴチャっと見えやすい
矢印の表示	左右のナビゲーション矢印を出すか	どこまでスクロールできるか分かりやすくなるので基本はON
タイトル背景を暗くする	文字と画像のコントラストを強める	明るいサムネイルが多いならONにすると文字が読みやすい

特にスマホで見るとき、背景と文字色のコントラストが弱いとタイトルが読みにくくなります。「タイトル背景を少し暗くする」設定を試してみると、一気に見やすくなるのでおすすめです。

スライドショー用の画像サイズ・容量の考え方

スライドショーは画像を何枚も読み込むので、画像サイズや容量を気にしないと、表示が重くなってしまいます。きれいさと軽さのバランスを取ることが大事です。

ざっくりとした目安として、1枚あたりの容量はできるだけ小さめ、ヘッダー用など大きく出る画像も、拡大しても粗くならない範囲で抑えておくと安心です。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

アフィンガー6 スライドショーが表示されないときのチェックリスト

まず確認したい基本の4ステップ

不具合が起きたときは、難しいことを考える前に、次の4つを順番に見ていくのがおすすめです。

• 対象の記事やカテゴリーにアイキャッチ画像が設定されているか
• ショートコード内のID（カテゴリーID・投稿ID）が正しいか
• 全角・半角の混在やカンマ位置の打ち間違いがないか
• キャッシュ系プラグインを使っている場合は、キャッシュを削除したか

特にIDまわりのミスは、私も何度もやりました。ダッシュボードの「投稿」や「カテゴリー」の一覧画面で、IDを一つずつ見直してみるだけで解決することも多いです。

よくある症状と原因・対処法まとめ

よくあるトラブルパターンを表にすると、次のような感じになります。

症状	原因の例	対処の方向性
まったく何も表示されない	ID間違い、スライドショー機能がOFFになっている	設定画面で対象機能がONか確認し、IDをもう一度チェックする
レイアウトが崩れて見える	テーマの追加CSSや他プラグインのスタイルと競合	追加CSSを一時的に無効化し、どの記述が影響しているか切り分ける
一部の記事だけ表示されない	その記事にアイキャッチ画像が設定されていない	対象記事にアイキャッチを設定してから再度確認する
ヘッダーが真っ白で画像が重なって見える	ヘッダーコンテンツと記事スライドショーなどが競合	どちらか片方をOFFにするか、表示エリアを整理してあげる
設定を変えても表示が変わらない	キャッシュプラグインやブラウザのキャッシュが残っている	キャッシュを削除し、シークレットウィンドウなどで再表示を確認する

どうしても原因が分からないときは、テーマ公式マニュアルの該当ページを見ながら、一つずつ設定を見直していくと、意外とシンプルな見落としに気づくことも多いです。

 

---

★ちょっとブレイク★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

---

 

よくある質問（アフィンガー6 スライドショー編）

Q1. アフィンガー6 スライドショーは1ページに何個まで入れても大丈夫ですか？

A. テーマ側で厳密な「何個まで」という数値が決められているわけではありませんが、表示速度や読みやすさを考えると、1ページあたり1〜2箇所までに抑えるのがおすすめです。特にヘッダーと記事内の両方にアフィンガー6のスライドショーを入れるときは、画像枚数やサイズをしっかり調整して、読み込みが重くなりすぎないように気をつけてください。

Q2. アフィンガー6 スライドショーに表示する記事はどう選べばいいですか？

A. 基本的には、次の3パターンから選ぶと失敗しにくいです。

• ブログの方向性や世界観が伝わる代表的な記事
• 商品レビューやサービス紹介など、収益につながる記事
• 初心者向けの導入記事や、全体をまとめたハブ記事

カテゴリー記事一覧スライドショーなら、カテゴリー自体を慎重に選び、EX版のスライドショーなら記事IDを指定して「この数本だけを並べる」というイメージで選ぶと、アフィンガー6のスライドショーをうまく活用できます。

Q3. アフィンガー6 スライドショーと他プラグインのスライダーは併用してもいいですか？

A. 併用そのものは可能ですが、JavaScriptやCSSの競合で表示が崩れるケースもあります。特に、別のスライダープラグインとアフィンガー6のスライドショーを同じページに入れると、動きが重なって違和感が出ることがあります。

どうしても他プラグインを使いたい場合は、次のように整理しておくとトラブルが減ります。

• トップページではどちらか一方のスライドショーだけを使う
• テーマ側のスライドショーをOFFにして、プラグイン側に一本化する

まずはアフィンガー6のスライドショーだけで構成してみて、物足りない部分が出てきたら慎重に追加を検討する、くらいの感覚がちょうど良いと思います。

まとめ｜アフィンガー6 スライドショーで回遊率を底上げしよう

この記事のポイントを整理します

今日からできる最初の一歩としては、まず自分のブログの中で「必ず読んでほしい記事」や「メインカテゴリー」を3つほどピックアップしてみてください。そのうえで、どこか1箇所だけでいいので、カテゴリー記事一覧スライドショーを記事内に設置してみるのがおすすめです。

慣れてきたら、ヘッダー記事スライドショーやサムネイルスライドショーも少しずつ追加していき、見た目やクリックのされ方の変化をチェックしてみてください。一度コツをつかめば、アフィンガー6のスライドショーは、サイトの回遊率アップにもデザイン面にも大きく貢献してくれます。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ