AFFINGER6

【PV数アップ】アフィンガー5のスライドショーを設定する3つの方法

アフィンガー5のスライドショーの設定方法がわかりません。よくトップページに記事をスライドしているオシャレなサイトを見かけるのですが、同じことをやってみたいので教えてください。

といった悩みにお答えします。

 本記事の内容

  • アフィンガー5のスライドショーを使うべき理由
  • アフィンガー5のスライドショーを設定する3つの方法
  • アフィンガー5にスライドショーを導入する際の注意点2つ

 本記事の信頼性


Ryota(@ryotablogger

アフィンガー5のスライドショーは、デザインがオシャレになり、回遊率が上がる超便利な機能です。

とはいえ、「アフィンガー5のスライドショーを設定する意味は?」「アフィンガー5のスライドショーを設定する方法を知りたい!」と思っている方は多いのではないでしょうか?

今回は、アフィンガー5のスライドショーを設定する3つの方法について解説していきます。

本記事を読むことにより、アフィンガー5のスライドショーを使いこなすことができるようになります。

そうすることで、読者の回遊率が上がりたくさんの記事を読んでもらうことができるので、PV数のアップに期待ができます。

スライドショーは設定箇所がたくさんあるのですが、超分かりやすく解説しているので参考にしてみてください!
りょーた

また、スライドショーを使ったデザインのカスタマイズについては、【初心者向け】アフィンガー5のカスタマイズ法【0からやるデザイン術】で詳しく解説しています。

カスタマイズする
【初心者向け】アフィンガー6のカスタマイズ方法を0から解説

続きを見る

まだAFFINGER5を導入していない方は、アフィンガー5は買って損なし!リアルな感想を初心者向けにレビューもチェックしてみてください。

アフィンガー5のスライドショーを使うべき理由

アフィンガー5のスライドショーを使うべき理由

アフィンガー5のスライドショーを使うべき理由は以下の通りです。

  1. サイトがオシャレになる
  2. SEO対策にも効果的
  3. 読者の目を引く

1つずつ解説していきます。

その①:サイトがオシャレになる

1つ目の理由は、「サイトがオシャレになる」からです。

文章だけでは味気ないサイトになってしまいますが、スライドショーを設定することにより、動きが出るので他とは違ったオシャレなサイトになります。

また、アフィンガー5の他の機能と組み合わせれば唯一無二のサイトになること間違いなしです。

ブログは単調なデザインになりがちですが、スライドショーを設定するだけで一味違ったサイトに仕上がります!
りょーた

その②:SEO対策にも効果的

2つ目の理由は、「SEO対策にも効果的」だからです。

スライドショーを設定すれば、内部リンクにもなりますし、たくさんの記事が表示されるので、たくさんの記事を読んでもらえる確率がかなり上がります。

そのため、回遊率が上がり滞在時間が伸びるのでSEO対策にも効果的となります。

直接的な影響はありませんが、少しの対策が大きな成果へとつながります!
りょーた

その③:読者の目を引く

3つ目の理由は、「読者の目を引く」からです。

スライドショーは動きがあるのでそれだけで気になります。

そのため、「どうやって設定しているんだろう?」「どのテーマを使っているんだろう?」といった感じで興味を持ってもらうこともできます。

ブログは興味を持ってもらうことが重要ですが、スライドショーだけでも十分な効果を発揮します!
りょーた

アフィンガー5のスライドショーを設定する3つの方法

AFFINGER5で記事スライドショーを設定する方法は2つ【導入するべき理由】

アフィンガー5では、3つのスライドショーを設定することができます。

  1. ヘッダーにアイキャッチ画像をスライドショーで設定する
  2. ヘッダーに投稿済みの記事をスライドショーで設定する
  3. 記事内に記事スライドショーを設定する

1つずつ解説していきます。

その①:ヘッダーにアイキャッチ画像をスライドショーで設定する

まずは、ヘッダー画像をスライドショーにするやり方を解説していきます。

完成イメージは以下の通りです。

早速設定していきましょう。

WordPress管理画面より、「AFFINGER 管理」「ヘッダー」「ヘッダー画像設定」をクリックしてください。

「ヘッダー画像をスライドショーで表示する」にチェックをいれて、「Save」をクリックしましょう。

次にスライドショーで表示する画像を設定していきます。

WordPress管理画面より、「外観」「カスタマイズ」をクリックしてください。

さらに「ヘッダー画像」をクリックして、「現在のヘッダー」の下にある「新規画像を追加」で画像を設定しましょう。

同様に、スライドさせる画像を2枚以上設定してください。

設定し終えたら「公開」をクリックして完了です。

あとは以下を参考にしてお好みにカスタマイズしていきましょう。

 ヘッダー画像スライドショーの説明

  1. スライドショーの表示方法:フェードイン・アウト、右から左、左から右
  2. スライドショーの表示速度:数値 小=画像のスライド速度が速くなる
  3. 横並びにする

ちなみに、スライドショーの表示速度はあまり早すぎても見にくくなるので、デフォルトの5000ミリ秒がおすすめです。

その②:ヘッダーに投稿済みの記事をスライドショーで設定する

次に、ヘッダーに投稿済みの記事をスライドショーにするやり方を解説していきます。

完成イメージは以下になります。

早速設定していきましょう。

まずは、WordPress管理画面より、「AFFINGER 管理」「ヘッダー」「記事スライドショー設定」をクリックしてください。

「ヘッダーに記事をスライドショーで表示する」にチェックをいれれて、「Save」をクリックすれば完了です。

あとは以下を参考にしてお好みにカスタマイズしていきましょう。

 記事スライドショーの説明

  1. スライドショーの表示方法:フェードイン・アウト、右から左、左から右
  2. スライドショーの表示速度:数値 小=画像のスライド速度が速くなる
  3. 表示するカテゴリID:「投稿」→「カテゴリー」で「ID」の下に表示されている数値
  4. カテゴリーリンク・投稿日:表示・非表示
  5. スライドショーの矢印アイコン:表示・非表示、カラーの変更

ちなみに、「記事スライドショー」を設定すると「ヘッダー画像をスライドショー」に設定していても、優先して表示されます。

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

最後に、当ブログのトップページでも設定している、記事内に記事スライドショーを設定するやり方を解説していきます。

完成イメージは以下の通りです。

ゲーミングデバイス

2021/9/15

【HyperX Wrist Rest レビュー】ひんやりして快適!手首の疲れを軽減してくれる優れもの!

ゲームをしていると手首が痛くなってしまうので、リストレストを買おうと思っているのですが、HyperXのリストレストってどうですか?実際に使ってみた感想を教えてください。   といった悩みにお答えします。    本記事の内容 HyperX Wrist Restのスペック HyperX Wrist Restの開封・外観 HyperX Wrist Restの3つの特徴 HyperX Wrist Restの使い心地 HyperX Wrist Restを購入する前の2つの注意点 HyperX Wrist Restの ...

続きを読む

ゲーミングマウスパッド

2021/9/13

【Logicool G】ゲーミングマウスパッドおすすめランキング

Logicool Gのゲーミングマウスパッドを購入しようと思っているのですが、どれを買えばよいのかわかりません。商品の特徴なども一緒におすすめを教えてください。 といった悩みにお答えします。  本記事の内容 Logicool Gのゲーミングマウスパッドおすすめランキング【比較】 第1位 G640r【ちょっと大きめサイズ】 第2位 G240t【極薄1mmの定番サイズ】 第3位 G840【大判サイズ】 第4位 G440t【ハードタイプの定番サイズ】 第5位 POWERPLAY【ワイヤレス充電】  本記事の信頼 ...

続きを読む

ゲーミングマウスパッド

2021/9/13

G840でPOWERPLAYを使った時の凸凹(段差)を解消したら快適だった

Logicool G840を購入したのですが、POWERPLAYを下に敷いたら、サイズが大きすぎて凸凹して段差が出てしまします。どうにか平らにする方法はありませんか? といった悩みにお答えします。  本記事の内容 G840でPOWERPLAYを使った時の凸凹(段差)を解消する方法  本記事の信頼性 りょーた(@ryotablogger) Logicool G840は、かなりサイズが大きいため、POWERPLAYを下に敷くとサイズが合わず、凸凹(段差)してしまい、マウスが引っかかってしまうことがあります。 ...

続きを読む

ゲーミングマウスパッド

2021/9/13

【Logicool G840 レビュー】これを待っていた!大判でシンプルなゲーミングマウスパッド

Logicool Gからやっと日本で発売が決まった「G840」という大判のシンプルなゲーミングマウスパッドを購入しようか迷っています。POWERPLAYを使っているのですが、反応するのでしょうか?実際に使った感想も教えてください。 といった悩みにお答えします。  本記事の内容 Logicool G840のスペック Logicool G840の開封・外観 Logicool G840の5つの特徴 Logicool G840の使い心地 Logicool G840を購入する前の2つの注意点 Logicool G8 ...

続きを読む

ゲーミングマウスパッド

2021/9/13

【Logicool G440t レビュー】ハードタイプでツルツル!滑りやすさ重視のゲーミングマウスパッド

Logicool Gの「G440t」というハードタイプのゲーミングマウスパッドを購入しようと思っているのすが、ソフトタイプと比べてどうなんでしょうか?実際に使った感想を教えてください。 といった悩みにお答えします。  本記事の内容 Logicool G440tのスペック Logicool G440tの開封・外観 Logicool G440tの5つの特徴 Logicool G440tの使い心地 Logicool G440tを購入する前の2つの注意点 Logicool G440tの評判は?【口コミを紹介】   ...

続きを読む

まずは、記事スライドショーを設定する記事を選択します。(今回は新規記事を使って設定していきます。)

WordPress管理画面より、「投稿」「新規追加」をクリックしてください。

新しい記事を作成したら、「タグ」「カテゴリ一覧(スライドショー)」をクリックしましょう。

すると、以下のようなコードが挿入されます。

 shortcode
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

基本的には、これで記事内に記事スライドショーの表示が完了となります。

あとは以下を参考にしてお好みにカスタマイズしていきましょう。

 記事スライドショーの説明

  1. st-catgroup cat="表示させるカテゴリ【カテゴリID】"
  2. page="記事表示数【任意の数値】"
  3. order="記事を新しい順【desc】または古い順【ask】に表示させる"
  4. orderby="並べる方法【id・date・modified・ran】"
  5. child="子カテゴリーの表示【onかoff】"
  6. slide="スライド【onかoff】"
  7. slides_to_show="画面に表示する記事総数【pageで指定した数字以内】,3,2"
  8. slide_date="日付表示【onかoff】"
  9. slide_more="続きを読む【任意の文章】"
  10. slide_center="モバイル端末で両端の表示【onかoff】"
  11. fullsize_type="画像のみ【card】または画像とテキスト【text】"

ちなみに、カテゴリーIDは「投稿」「カテゴリー」「ID」の下に表示されている数値となります。

また、記事スライドショーはコードを貼り付けるだけなので、

  • サイドバー
  • フッター
  • その他ウィジェット

にも表示することができるので、色々設定してみましょう。

お疲れ様でした!記事スライドショーを活用して回遊率を上げてPV数をアップさせましょう!
りょーた

アフィンガー5にスライドショーを導入する際の注意点2つ

記事スライドショーを導入する際の注意点2つ

アフィンガー5にスライドショーを導入する際には、以下の2点に注意しましょう。

  1. 読み込みにより表示速度が低下する
  2. 複数設定は離脱率を高めてしまう

1つずつ解説していきます。

その①:読み込みによる表示速度の低下

アフィンガー5にスライドショーを設置することにより、読み込みに時間がかかり、表示速度が低下してしまいます。

なぜなら、スライドショーでは、以下の動作を同時に行っているからです。

  • 画像を表示させる
  • 画像をスライドさせる
  • テキストを表示させる

もっと細かく解説するとかなり複雑になるので割愛しますが、そういった動作をさせるためのソースコードを読み込む必要があるため、必然的に表示速度が遅くなります。

特にトップページは一番最初に読み込むページとなるので、ヘッダー画像と記事スライドショーの併用は控えましょう。

他のページや記事に設置する場合も、多くて2つぐらいまでにとどめておくと良いでしょう。

サイトの表示速度はSEOにも影響するので、できる限り早くしておくと良いですよ!
りょーた

アフィンガー5の表示速度を爆速にしたい方は、アフィンガー5で表示速度を爆速にする方法【5つの項目をチェック】をチェックしてみてください。

表示速度を爆速にしたい方は
アフィンガー5で表示速度を爆速にする方法【5つの項目をチェック】

続きを見る

その②:複数設定は離脱率を高めます

アフィンガー5にスライドショーを複数設定すると、「離脱率」が高くなります。

なぜなら、前項の読み込み速度の低下もそうですが、単純に「うっとおしい」からですね。

人間って動くものを反射的に見てしまうため、1つの画面内に複数動くものがあるとかなり負担となります。

読み手のことを考えてできる限り負担がないように、複数設定する場合には、距離を離して設定するようにしましょう。

ブログの滞在時間が短い方は見直してみましょう!
りょーた

まとめ

今回は、【PV数アップ】アフィンガー5のスライドショーを設定する3つの方法といった内容を解説しました。

もう一度おさらいをすると、アフィンガー5のスライドショーの設定方法は、

  1. ヘッダーにアイキャッチ画像をスライドショーで設定する
  2. ヘッダーに投稿済みの記事をスライドショーで設定する
  3. 記事内に記事スライドショーを設定する

上記の3つになります。

また、スライドショーを設定することにより、回遊率が上がりPV数もアップします。

とはいえ、たくさん設置してしまうと、

  • 離脱率の増加
  • サイトの表示速度低下

といったデメリットもあるので、必要最低限の設置にとどめておきましょう。

-AFFINGER6