AFFINGER6

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

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

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

 本記事の内容

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

 本記事の信頼性


Ryota(@ryotablogger

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

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

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

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

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

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

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

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

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

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

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

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

NFTアート ブログ

2022/1/25

【初心者向け】知識ゼロから始めるNFTブログで月1万円を稼ぐ方法

NFTブログが稼げるって聞いたのですが、どうやればいいのでしょうか?完全に初心者なのですが大丈夫でしょうか? といった悩みにお答えします。  本記事の内容 【初心者向け】知識ゼロから始めるNFTブログで月1万円を稼ぐ方法  本記事の信頼性  りょーた(@ryotablogger) NFTブログなら、案件が高単価なのですぐに1万円を稼ぐ事が可能です。 とはいえ、「NFTブログの始め方が分からない。」「NFTブログで稼ぐ方法を教えてほしい!」と思っている方は多いのではないでしょうか? 今回は、知識ゼロの完全初 ...

続きを読む

NFTゲーム

2022/1/25

Blankos Block Partyの始め方と基本的な遊び方【Amazonプライム特典あり】

Blankos Block PartyっていうNFTゲームを始めたいのですが、どうすればいいのでしょうか?遊び方も教えてください。 といった悩みにお答えします。  本記事の内容 Blankos Block Partyの始め方 Blankos Block Partyの操作方法 Blankos Block Partyの基本的な3つの遊び方 Blankos Block Partyの始め方や遊び方でよくある質問  本記事の信頼性  りょーた(@ryotablogger) Blankos Block Partyは、 ...

続きを読む

NFTゲーム

2022/1/22

【初心者向け】Phantomウォレットの作り方と使い方【Solana】

Phantomウォレットを作りたいのですが、どうすればいいのでしょうか?あと使い方も教えてください。 といった悩みにお答えします。  本記事の内容 Phantomウォレットの作り方 Phantomウォレットにトークンを追加する方法 PhantomウォレットにSOLを入金する方法  本記事の信頼性  りょーた(@ryotablogger) Phantomウォレットは、Solanaのブロックチェーンに対応しているウォレットです。 とはいえ、「Phantomウォレットの作り方が分からない。」「Phantomウォ ...

続きを読む

仮想通貨

2022/1/21

【超簡単】たった10分で出来るbitFlyerの口座開設6つの手順

bitFlyerで口座を開設したいのですが、どのようにすればいいのでしょうか?初めての人でも分かるように教えてください。 といった悩みにお答えします。  本記事の内容 bitFlyerとは bitFlyerの口座を開設するために必要なもの bitFlyerの口座を開設する6つの手順  本記事の信頼性  りょーた(@ryotablogger) bitFlyerは、仮想通貨の購入や売買、送金などを行うことができる日本の暗号資産取引所です。 とはいえ、「bitFlyerの口座を作るのに何が必要なの?」「bitF ...

続きを読む

仮想通貨

2022/1/21

【2022年版】NFTを始めるための国内仮想通貨取引所おすすめ5選【初心者向け】

NFTアートを買ったり、NFTゲームを始めたいのですが、国内の仮想通貨取引所はどこがおすすめなのでしょうか?選び方とかあれば教えてください。 といった悩みにお答えします。  本記事の内容 国内のおすすめ仮想通貨取引所5選【一覧で比較】 国内仮想通貨取引所の選び方5つ  本記事の信頼性  りょーた(@ryotablogger) NFTを始めるためには、国内の仮想通貨取引所に登録する必要があります。 とはいえ、「国内の仮想通貨取引所ってどこがおすすめなの?」「国内の仮想通貨取引所の選び方を教えてほしい!」と思 ...

続きを読む

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

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