AFFINGER5

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

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

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

 本記事の内容

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

 本記事の信頼性


Ryota(@ryotablogger

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

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

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

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

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

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

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

カスタマイズする
【初心者向け】アフィンガー5のカスタマイズ法【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. スライドショーの矢印アイコン:表示・非表示、カラーの変更

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

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

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

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

no image

AFFINGER5

2021/5/31

アフィンガー5の子テーマは絶対に必要!導入方法もあわせて解説

アフィンガー5ではなぜ子テーマを使用しなければいけないのでしょうか?子テーマの導入方法もあわせて教えてください。 といった悩みにお答えします。  本記事の内容 アフィンガー5の子テーマとは?【絶対に必要な理由】 子テーマの導入方法 当ブログではカスタマイズ済みの子テーマを特典としてお付けします!  本記事の信頼性 りょーた(@ryotablogger) 結論からお伝えすると、アフィンガー5を導入したら絶対に子テーマを使う必要があります。 とはいえ、「アフィンガー5にはなぜ子テーマが必要なの?」「子テーマの ...

続きを読む

AFFILIATE

2021/6/2

【審査なし】すぐに無料登録できるASPは3つ

ブログを始めたばかりなのですが、審査なしで登録できるASPってありますか? といった悩みにお答えします。  本記事の内容 ASPとは? ASPに必要な審査とは? 審査なしのASPは3つ  本記事の信頼性 りょーた(@ryotablogger) ブログを開設してすぐに登録できる、審査なしのASPがあります。 とはいえ、「審査なしで登録できるASPってどこ?」「通常、審査ってどうすれば受かるの?」と思っている方は多いのではないでしょうか? 今回は、審査なしで登録できるASPについて解説していきます。 本記事を ...

続きを読む

AFFINGER5

2021/6/1

アフィンガー5でスマホのフッターに固定メニューを表示させる方法

スマホのフッターに固定メニューを表示させたいのですが、アフィンガー5でもできますか?やり方を教えてください。 といった悩みにお答えします。  本記事の内容 スマホのフッターに固定ニューを表示する方法 フォントとアイコンサイズを変更する方法 スマホのフッターに固定メニューを表示する際の注意点2つ  本記事の信頼性 Ryota(@ryotablogger) アフィンガー5では、スマホのフッターに固定メニューを表示させることができます。 とはいえ、「アフィンガー5でスマホのフッターに固定メニューを表示させる方法 ...

続きを読む

AFFINGER5

2021/5/24

【1分でできる】アフィンガー5でTwitterカードを設定する方法

Twitterでブログの記事のURLを貼り付けたときに画像とタイトルを表示させる「Twitterカード」というものを使いたいのですが、アフィンガー5ではどのように設定すればいいのでしょうか? といった悩みにお答えします。  本記事の内容 Twitterカードとは? アフィンガー5でTwitterカードを設定する方法 Twitterカードの表示を確認する方法  本記事の信頼性 Ryota(@ryotablogger) アフィンガー5ならたったの1分でTwitterカードの設定をすることができます。 とはいえ ...

続きを読む

GAMING CHAIR

2021/6/3

【最新版】ゲーミングチェアマットおすすめ5選【選び方と傷の対処法を解説】

ゲーミングチェアと一緒にチェアマットを購入したいのですが、どれを買えばいいのか分かりません。おすすめや選び方を教えてください。 といった悩みにお答えします。  本記事の内容 チェアマットを導入すべき3つの理由 チェアマットの選び方 おすすめのゲーミングチェアマット5選 万が一、傷や凹みが付いてしまった場合の対処法  本記事の信頼性 Ryota(@ryotablogger) ゲーミングチェアマットは、床の傷や凹み、騒音を抑えてくれるゲーミングチェア購入者に必須のマットです。 とはいえ、「チェアマットの選び方 ...

続きを読む

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

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数もアップします。

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

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

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

-AFFINGER5