アフィンガーでスライドショー(スライダー)を設定する方法

 

こんにちわ。

元SEOコンサルタントであり、現在web集客のコンサル企業で働きながら副業でアフィリエイターをしている秋田 健です。

 

アフィ子アフィ子

アフィンガーでスライドショーを表示させたいんだけど、どうすれば良いのかわからないよ~

アフィ男アフィ男

アフィンガーにしたからには、スライドショーはぜひ使いたい機能だもんね!僕も知りたいな!

秋田 健秋田 健

わかりました!!ではスライドショーを徹底的に使いこなしていきましょう!

 

ということで、アフィンガーでスライドショーを設定する方法を図解でわかりやすく解説していきます!

すごく簡単に設定できますから、あまり肩に力を入れず、手順通り丁寧に進めていってみてくださいね!

 

※あきけん(@akitaken0530

 

①スライドショー(スライダー)とは?

そもそも「スライドショー(スライダー)」とはどんな機能なのでしょうか。

そして「どんな効果を持っているのか」、まずはそこを理解して頂きたいと思います。

 

「スライドショー(スライダー)」については、特に説明は必要なさそうですが、念のため下図をご覧ください。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

上図は画像のため、停止していますが、実際には5秒間隔で画像が横にスライドしていきます。

※ちなみに表示間隔も設定できるので、ご安心ください!

 

みなさんもよく見かけることがあるのではないでしょうか。

アフィンガーではこのスライドショー(スライダー)をとても簡単に設置することができますよ!

 

アフィ男アフィ男

なんか見た目のインパクトもあって、興味のある記事があったらついついクリックしちゃいそうだ!

秋田 健秋田 健

まさにアフィ男の言う通り、非常にインパクトがあって訪問者に対して視覚的に訴えることができます!

 

ただ勘違いしないで頂きたいことがあります。

確かにスライドショー(スライダー)は視覚的に非常に効果が高く、印象も良く映るケースが往々にしてあります。

 

ですが、よく考えてみてください。

特にトップページにスライドショー(スライダー)を設定したいと考えている方は、注意が必要です!

 

基本的に訪問者(ユーザー)はトップページから流入してくることはありません。

ほとんどが、なんらかの記事から流入をしてきます。

 

きっと当ページをご覧の「あなた」もそうなのではないかと思います。

 

だからこそ、記事(コンテンツ)の質が求められ、「おっ!この人すごいわかりやすく、詳しく書いてあるな!」と思ったら、他の記事(コンテンツ)も見てみたくなりますよ?

あるいは、ファンとなってくれて、トップページを「お気に入り登録」してくれるかもしれません!

 

それであれば、スライドショー(スライダー)は「サイト内を回遊してもらう」という点においては最大限の効果を発揮してくれるでしょう!

 

アフィ子アフィ子

確かに気に入ったサイトの最新記事とかすごい気になるかも

アフィ男アフィ男

そうだね!どのくらい更新されているのかとか、リアルタイムの情報なのかな?とかも気になるところだよね!

秋田 健秋田 健

まさに訪問者(ユーザー)、未知なるファンに対して良いアプローチが出来ますよね!つまり、何が言いたいかと言うと!

 

スライドショー(スライダー)は質の高いコンテンツがあって、なおかつトップページを見てくれた訪問者(ユーザー)に対して強い影響を与えるということです。

 

またアフィンガーでは、画像スライドショー(スライダー)の設定も簡単です。

そしてサイトのトップページ(画像)においては「アバブザフォルド」「ゴールデントライアングル」というテクニックがあります。

 

ここでは長くなってしまいますので省略しますが、「0Start~放置システム最短サイト構築~」を手にして頂いた方はお分かりのはずです!

※「0Start」とは私が作成したアフィリエイト教材です。記事の最後に紹介だけしております。

 

結論から言うと、画像スライドショー(スライダー)にすることで、そのテクニックの効果が薄れるということもあります。

 

また画像スライドショーは「カメラ」「景色」「撮影」など、風景画や絵コンテなどテキスト(文字)を必要としない場合に活用することがほとんどで、逆に言うと、それ以外のジャンルで戦っている方にとってはあまり利用することのない機能だと思います。

 

とは言え、画像・記事スライドショー(スライダー)を設置したいと考えている方は、「自分自身のサイトをどうしたいのか?」。

それをしっかりと考えてから設置することをオススメします!

 

②画像スライドショーを設定する方法

さて、少し前置きが長くなってしまいましたが・・・

ここからは実際に「アフィンガーでスライドショー(スライダー)を設定する方法」について、図解を交えながら説明していきます!

 

まずは「画像スライドショーの設定方法」から行ってみましょう!!

手順は次の通りです。

 

1.画像を複数枚アップロード
2.AFFINGER管理で設定

 

めちゃくちゃ簡単なので、すぐに設定できますよ!

1.画像を複数枚アップロード

画像スライドショー(スライダー)にするのですから、画像1枚というわけにはいきませんね(笑)

まずは画像を複数枚用意してください!

 

準備した上で・・・

「外観<ヘッダー」をクリックしてください。

アフィンガーでスライドショー(スライダー)を設定する方法

 

続いて「新規画像を追加」をしてください。

アフィンガーでスライドショー(スライダー)を設定する方法

 

下図の手順で画像をアップロードしていってください!

アフィンガーでスライドショー(スライダー)を設定する方法

 

画像のアップロードの準備が整ったら、下図の様になっているはずです。

アフィンガーでスライドショー(スライダー)を設定する方法

 

すみません、私は少し適当に画像を漁ってアップしています。

カスタマイズ画面で行うことは以上となります。

2.AFFINGER管理で設定

WordPressのトップに戻り、「AFFINGER管理<ヘッダー」とクリックしてください。

その中にある「画像スライドショー設定」の項目で設定していきます。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

スライドショーの表示方法:これはお好みで設定してください。

スライドショーの表示速度:ここでスライド秒数を設定できます。

横並びにする:画像が横並び状態でスライドしていくかどうかです。

 

マストで設定する必要があるのは「ヘッダー画像をスライドショーで表示する」に☑チェックを入れることだけです!

とても簡単ですね!

 

実際にどんな感じで表示されているか、自分のサイトで確認してみてください!

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

上図のように両サイドに「<>」があれば設定出来ています!

画像スライドショー設定はこれで以上となります。

 

③記事スライドショーを設定する方法

さて、おそらくこちらが本題の方が多いはず。

「記事スライドショー(スライダー)を設定する方法」について、図解を交えながら説明していきます!

 

まず、アフィンガーでは「スライドショー(スライダー)」を様々な場所に自由に設定することができます

 

主な設置場所1.ヘッダー

2.ヘッダー複数表示

3.トップページ上

4.サイドバー

5.記事内

主にこんな場所が想定されますね!

それぞれの設置場所によって順番に説明していこうと思います。

1.記事スライドショー:ヘッダー

まずはイメージがないと設定しようがないと思いますので、下図をご覧ください!

こちらは、ヘッダーに堂々と1記事丸々表示され、なおかつスライドショーになっているパターンです。

 

アフィンガーでスライドショー(スライダー)を設定する方法

※今回は【第二新卒】成功する転職論を運営されている「Mr.ダービーBoy」さんに掲載ご協力頂きました。ありがとうございました!

 

では早速ですが、「AFFINGER管理<ヘッダー」をクリックしてください。

「記事スライドショー設定」を探してください。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

上図の赤丸部分☑チェックを入れるだけで、記事スライドショーがヘッダーに表示されるようになります。

 

スライドショーの表示方法:お好みで設定してください。

スライドショーの表示速度5,000ミリ秒=5秒です。

 

特筆すべき部分はこのくらいです!

あとは「スライドショーの矢印をどうしたいか」など、少し細かな設定が可能となっています。

 

ちなみに、下図の青枠のように他の項目に「他の設定が優先中です」と表示されるようになります。

アフィンガーでスライドショー(スライダー)を設定する方法

 

ヘッダーは基本的に1つしかありません。

そのため、ヘッダーの各項目には優先順位が付けられています。

 

優先順位記事スライドショー設定>ヘッダー画像コンテンツ>ヘッダー画像エリアのウィジェット>画像スライドショー(ヘッダー画像)

ここでの設定(記事スライドショー設定)が一番優先される項目となっています。

このような序列がありますので、「あれ、設定しているのに反映しないぞ?」と思ったら、この部分を見直してみてくださいね!

2.記事スライドショー:ヘッダー複数表示

続いて、先ほどとは異なりヘッダーに複数の記事スライドショーを表示させたい場合となります。

イメージは下図の通りです。

 

アフィンガーでスライドショー(スライダー)を設定する方法

参考:【第二新卒】成功する転職論

 

ヘッダーに計3記事が表示され、スライドショーになっているのがお分かり頂けると思います。

※ちなみに表示数も変更できます。

 

では早速ですが、「AFFINGER管理<ヘッダー」をクリックしてください。

「ヘッダーコンテンツ設定」を探してください。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

上図の様に「タグ<記事一覧<カテゴリー一覧(スライドショー)」を選択してください。

 

すると・・・

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

上図の様になったかと思います。

それぞれの青枠の意味を改めてお伝えしておきます。

 

「page=5」:スライドされる総数

3,3,1」:左の3がスライド表示数。ここを仮に「5」とすれば、ヘッダーに表示される記事数が5記事掲載され、スライドされる形になります。

「ReadMore」:このテキストは変更可能です。例えば「もっと読む」などにしても良いかもしれませんね!

 

※補足:上図の「type=””」のあとに「type=”card“」と入力すると、画像だけの表示。「type=”text“」と入力すると、「画像+記事タイトル」だけの表示となります。記事のアイキャッチなどこだわって作成されている方は、もしかしたら活用する方もいると思いましたので、補足として付け加えさせて頂きました。

 

実際に変更までして頂きましたので、ぜひ参考にしてみてください!!

その際の設定がこちらです。

アフィンガーでスライドショー(スライダー)を設定する方法

 

そして実際の表示がこちらです。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

このように、表示数や総数、テキストを簡単に変更することができるというのもアフィンガーのメリットですね!!

3.記事スライドショー:トップページ上

アフィンガーには、「挿入コンテンツ」部分があります。

サイトのトップページのヘッダー下あたりになります。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

他のWordPressだと固定ページなどで作成しなければいけない部分ですが、アフィンガーでは「挿入コンテンツ」として作成することが出来ます。

 

では早速ですが、「AFFINGER管理<トップページ」をクリックしてください。

「挿入コンテンツ」を探してください。

 

実は上記<ヘッダ複数表示>で解説した手順と同じになります。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

これでトップページ上=「挿入コンテンツ」に記事スライドショーを設定することが出来ます。

このやり方を覚えてしまえば、後は応用となります!!

4.記事スライドショー:サイドバー

サイドバーのスライドショーのイメージは下図の通りです。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

サイドバーは1記事分がスライドしていくことになります。

この部分に仮に5記事分あったら、小さくなりすぎてしまい逆に見にくいので当たり前の設定ですね!

 

では「外観<ウィジェット」をクリックしてください。

複数のウィジェットの中から、「STINGERカスタムHTML」を探し、「サイドバートップ」に追加してください。

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

続いて、「STINGERカスタムHTML」に以下のコードを入力してください。

 

[st-catgroup cat=”0″ page=”5″ order=”desc” orderby=”id” child=”on” slide=”on” slides_to_show=”1″ slide_date=”” slide_more=”” slide_center=”off”]

 

アフィンガーでスライドショー(スライダー)を設定する方法

上図のようになっていればOKです!

最後は忘れずに「保存」をクリックしてくださいね!!

5.記事スライドショー:記事内(Gutenberg)

「投稿」から記事を執筆できる状態にしてください!「いつものページ」ですかね!

 

アフィンガーでスライドショー(スライダー)を設定する方法

 

「クラシック版の段落」を選択してください。

 

アフィンガーでスライドショー(スライダー)を設定する方法

もはや、覚えてしまったと思いますが(笑)

ここでも「タグ<記事一覧<カテゴリ一覧(スライドショー)」を選択することで、記事内に記事スライドショーを自由に設定することができるようになります!

 

これで、スライドショーの設定は以上となります。

 

秋田 健秋田 健

いかがでしたでしょうか?思いのほか簡単に設定できることがお分かり頂けたのではないかと思います!!

アフィ子アフィ子

本当だ~すごい簡単だし、自分のしたいようにスライドショーを設置できるからなんか楽しみ!

アフィ男アフィ男

うんうん!これでスライドショー設置は怖くないね!サイトに合わせたカスタマイズをしていこうと思うよ!

 

最後になりますが、最初の方にも説明した通りサイト運営には、それなりのテクニックなどもあります。

もちろん、小手先のテクニックだけで収益を上げる!なんてことを考えている人は少ないと思いますし、そんな簡単ではない。ということも皆さんはご理解されていると思います!

 

アフィンガーは「稼ぐ」に特化したWordPressテーマですから、選んだ皆さんは非常に正しい選択をしたのではないかと私は思います。

とは言え、稼ぐテーマを選んだからと言って、100%稼げるわけではありません。

 

あくまで「稼ぎやすくなった」という解釈が正しいでしょう。

ただ、少なくともアフィンガーを選ばれた方は「稼いでいきたい」と考えている方だと思います。

 

問題は「稼ぎ方を知っているか知らないか」です。

残念ながら収益の差はほとんどこの部分が占めていると言っても過言ではありません。

 

もし、アフィンガーを選び、というよりもアフィンガーを選ばれている「あなた」だからこそ、本気で稼いで頂きたいと思いますので、興味のある方は私が半年足らずで月収100万を到達した全ノウハウを参考にしてみてください。

 

すみません。

文量にするとWordにして約1,000ページもの量となり、到底記事では書ききれないため、有料として販売をさせて頂いております。

最後に少しだけご紹介させて頂き、当ページを終わりにさせて頂きます。

 

☆アフィリエイトで稼ぐ「0Start」とは☆

 

まず「0Start」とは・・・

定して継続的に稼ぐ為の放置システムを最短最速で構築するためのアフィリエイト教材」になります。

 

<こんな不安を解決>

 

 

<如何にして放置で稼ぐか>

時間がない中で、最短最速で「稼ぐ仕組み=放置システム」を作り上げること。

 

※0Startで公開しています。

 

私は普段サラリーマンをしています。

つまり、日中はほぼ放置した状態で「月収100万円」を安定して継続的に稼いでいます。

 

<どんな方でも簡単実践可能!>

 

そんなことは一切関係ありません

 

ありがたいことに、数多くの方からご質問を頂く中で多かった質問が・・・

 

「どうやって月収100万を稼いだんですか?」

 

これに親身にご回答したいのは山々ですが、とんでもない文量になってしまいます。

そこで、「本当に知りたい」「本気で稼ぎたい」という方だけにお伝えしたいと考え、アフィリエイトのバイブル「0Start~放置システム最短サイト構築~」の販売に踏み切りました。

 

後悔はさせないほどの圧倒的なノウハウと特典の数々。

そして、手にして頂いたならば、実践し、極論真似してください

現時点で私が持ちうる全てのノウハウを「0Start」に注いでいます。

 

これからのアフィリエイトライフの一助に「0Start~放置システム最短サイト構築~」がなれば幸いです。

 

【公式】0Start~放置システム最短サイト構築~

 

AFFINGERをまだ購入されていない方へ

 

WordPressテーマは正直、とても悩まれると思います。

なぜなら、世の中には無料テーマが数多く存在しているからです。

 

例えば・・・

 

  • Simplicity
  • Cocoon

 

はその代表的な無料テーマとも言えます。

 

ただここでは一つだけ言わせてください。

AFFINGERは本当に「稼ぐ」に特化したWordPressテーマです。

 

「会話(ナビゲーター)」「ランキングの生成」「豊富なボックス・ボタン」などなど。

とにかく訪問してくれたユーザーに対して、「視覚的」にも強いインパクトを与えることが可能となっており、優れたデザイン性がユーザーへ信頼感・安心感を与えることが容易にできます。

 

これら以外にも本当にたくさんのおすすめするポイントがありますので、悩まれている、迷っているならぜひ購入を検討してみてください

当サイトからは2つの限定特典をお付けし、最初の初期設定などを解説しているPDFをお付けしていますから、ご安心かと思います!

 

限定特典付き「AFFINGER5(WING)」購入はこちら

限定特典付きAFFINGER PACK3(WING対応)購入へ

 

でわ!秋田 健でした!

 

*掲載ご協力:【第二新卒】成功する転職論

※掲載ご協力:婚活トリセツ

本当にありがとうございました。この場をお借りして、感謝申し上げます。

 

無料メルマガ「アフィマガ」について

サイト未完成向けメルマガ登録ページ

サイト完成済み向けメルマガ登録ページ

 

【YouTube】⇒あきけんアフィリエイトガイド

 

<AFFINGER関連記事>