【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方

【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方

2020年10月18日

 

AFFINGER5のスライドショーってどうやって使うの?設定方法と使い方を教えて!

 

このような疑問にお答えします。

 

✓本記事の執筆者

かずきの武器庫運営者

Twitter:かずき(@k03mind)

 

AFFINGER5では、実は超簡単におしゃれなスライドショーを表示されることができます。

知らない人が多いですが、2分もあれば表示されることができる簡単な作業なので、すぐに設定方法をマスターしておきましょう。

 

今回はトップページに表示させる方法や記事内で表示させる方法など、網羅的に解説していきます。

 

kazuki
スライドショーの設定方法を知りたい人は、本記事で間違いなく理解することができますよ。

 

それではさっそく解説していきます。

 

※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ。

購入特典

当サイト経由でAFFINGE5をご購入いただけますと、購入者限定特典として6つの特典をプレゼントします。

>>AFFINGER5の購入特典についてはこちら

 

AFFINGER5(アフィンガー)スライドショーの基礎知識

AFFINGER5(アフィンガー)スライドショーの基礎知識

 

設定方法を解説する前に、まずは基礎知識から。

スライドショーを表示させるには、ショートコードを入力する必要があります。(ワンクリックで挿入できます)

 

スライドショーのショートコード

(画像のため、コピーできません。また、画像が見えにくい場合は拡大してください)

 

このショートコードには一つ一つ意味があります。

 

  • st-catgroup cat="カテゴリID指定"
  • page="読み込み数"
  • orderby="id"
  • child="子カテゴリーの読み込み"
  • slide="スライドショーのオンオフ"
  • slide_to_show="列数の指定"
  • slide_more="続きを読む"
  • slide_center="off"

 

覚える必要はないですが、完璧にスライドショーを理解したい人は覚えておきましょう。

さて、このショートコードを入力するとこのように表示されます。

 

【令和版】ブログ1年間の総PV・収益を公開【ブログで稼ぐのは難しい】

2021/1/31

【令和版】ブログ1年間の総PV・収益を公開【ブログで稼ぐのは難しい】

ブログ1年間でどれくらい稼げるのか?PV数はどれくらいなのか?気になる方のために、本記事では当サイトの1年間のリアルなデータを公開します。本記事を読めばブログ1年間でどれくらい稼げるのか知ることができますよ。

ReadMore

ブログ40記事のPV数・収益の目安【絶対にやるべき11のことも解説】

2021/1/30

ブログ40記事のPV数・収益の目安【絶対にやるべき11のことも解説】

ブログを40記事書いた時のPV数や収益について知りたいとは思いませんか?本記事では僕の副サイトのブログ40記事時点でのデータを公開します。ブログ40記事を書いた人、もうすぐ書き終わりそうな人は必見です。

ReadMore

2021/4/14

ブログ50記事のPV数・収益の目安【リアルな現状を公開】

ブログを50記事書いた時のPV数や収益について知りたいとは思いませんか?本記事では僕の副サイトのブログ50記事時点でのデータを公開します。ブログ50記事を書いた人、もうすぐ書き終わりそうな人は必見です。

ReadMore

ブログ60記事のPV数・収益の目安【リアルな現状を公開】

2021/1/30

ブログ60記事のPV数・収益の目安【リアルな現状を公開】

ブログを60記事書いた時のPV数や収益について知りたいとは思いませんか?本記事では僕の副サイトのブログ60記事時点でのデータを公開します。ブログ60記事を書いた人、もうすぐ書き終わりそうな人は必見です。

ReadMore

2021/1/30

ブログ70記事のPV数・収益の目安【リアルなデータを公開】

ブログを70記事書いた時のPV数や収益について知りたいとは思いませんか?本記事では僕の副サイトのブログ70記事時点でのデータを公開します。ブログ70記事を書いた人、もうすぐ書き終わりそうな人は必見です。

ReadMore

 

スライドショーの具体的なイメージができたでしょうか?

これで基礎知識についての解説は終了です。続いては、スライドショーの設定方法を解説していきますね。

 

AFFINGER5(アフィンガー)スライドショーの設定方法

AFFINGER5(アフィンガー)スライドショーの設定方法

 

スライドショーの設定方法について、下記の6パターンに分けて解説します。

 

  1. トップページに表示させる方法
  2. ヘッダー上に表示させる方法
  3. 記事内に表示させる方法
  4. 画像だけ表示させる方法
  5. 画像+テキストだけ表示させる方法
  6. ウィジェットを使って表示させる方法

 

上記を理解すれば、スライドショーの設定については完璧に理解できます。

それでは一つずつ解説していきますね。

 

1.トップページに表示させる方法

 

これから解説する方法を実践すれば、下記のようにトップページにスライドショーを表示させることができます。

 

スライドショーを使ったアフィンガー5のトップページ

 

 

設定手順は次の通り。

 

手順

  1. AFFINGER5管理をクリック
  2. トップページをクリック
  3. 挿入コンテンツを見つける
  4. タグをクリック
  5. 記事一覧をクリック
  6. カテゴリー一覧(スライドショー)をクリック

 

画像付きで解説していきますね。

まずはWordPress管理画面の、「AFFINGER5管理」「トップページ」をクリックし、「挿入コンテンツ」を見つけてください。

 

アフィンガー5の管理画面

 

 

挿入コンテンツが見つかれば「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」をクリック。

 

アフィンガー5のスライドショーを出力する手順

 

すると、ショートコードが出力されます。

 

スライドショーのショートコード

 

kazuki
最後に保存をクリックで設定完了です。

 

ちなみにショートコードについては編集が可能。お好みで編集してください。

どう編集すればいいかわからない人は、とりあえず当サイトと同じにしておけばOK。

 

かずきの武器庫のスライドショーのショートコード

 

kazuki
見えにくかったら拡大してね!

 

2.ヘッダー上に表示させる方法

 

続いては、ヘッダー上にスライドショーを表示させる方法について。

この設定ができれば、下記のように表示させることができます。

 

スライドショーをヘッダー上に表示させる

 

設定手順は次の通り。

 

手順

  1. AFFINGER5管理をクリック
  2. ヘッダーをクリック
  3. 記事スライドショー設定を見つける
  4. ヘッダーに記事をスライドショーで表示するに✓

 

画像付きで解説していきますね。

まずはWordPress管理画面の、「AFFINGER5管理」「ヘッダー」をクリックしてください。

 

アフィンガー5の管理画面

 

そこから「記事スライドショー設定」で、「ヘッダーに記事をスライドショーで表示する」にチェックを入れて下さい。

 

アフィンガー5のヘッダーにスライドショーを出力する方法

 

最後に保存をクリックで設定完了です。

 

3.記事内に表示させる方法

 

続いては、記事内にスライドショーを表示させる方法について。

設定手順は次の通り。

 

手順

  1. タグをクリック
  2. 記事一覧をクリック
  3. カテゴリー一覧(スライドショー)をクリック

 

やり方は先ほど解説した「トップページに表示させる方法」と同じです。分からない人のために、もう一度解説しますね。

まずはスライドショーを表示させたい記事を開き、表示させたい箇所をクリック。

 

そこで、「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」の順番でクリックしてください。

 

アフィンガー5のスライドショーを出力する手順

 

これで記事内にスライドショーを表示させることができます。

 

kazuki
プレビューをクリックすれば正しく表示されているか確認できるよ!

 

4.画像だけ表示させる方法

 

続いては、画像だけのスライドショーを表示させる方法について。

テキストが不要だと感じた場合に使える表示方法で、この設定ができれば、下記のように表示させることができます。

 

テキストだけのスライドショー

 

設定手順は次の通り。

 

手順

  1. タグをクリック
  2. 記事一覧をクリック
  3. カテゴリー一覧(スライドショー)をクリック
  4. コードの一番最後にある「type=」のあとに「card」と入力

 

コードの出力方法は今まで解説した内容と同じで、「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」の順番でクリックしてください。

そして、出力されたコードの一番最後にある「type=」のあとに「card」と入力すればOKです。

 

スライドショーのテキストだけのコード

 

kazuki
特別難しい作業ではないので、簡単ですね。

 

5.画像+テキストだけ表示させる方法

 

続いては、画像+テキストだけのスライドショーを表示させる方法について。

画像だけでは寂しいと感じた場合に使える表示方法で、この設定ができれば下記のように表示させることができます。

 

画像とテキストのスライドショー

 

設定手順は次の通り。

 

手順

  1. タグをクリック
  2. 記事一覧をクリック
  3. カテゴリー一覧(スライドショー)をクリック
  4. コードの一番最後にある「type=」のあとに「text」と入力

 

先ほど解説した方法とほとんど同じ。

まずは、「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」の順番でクリックしてください。

 

そしてコードの一番最後にある「type=」のあとに「text」と入力すればOKです。

 

画像とテキストだけのスライドショーのコード

 

kazuki
こちらも特別難しい作業ではなく、簡単ですね。

 

6.ウィジェットを使って表示させる方法

 

続いては、ウィジェットを使ったスライドショーを表示させる方法について。

この設定ができれば、自分の好きな場所にスライドショーを表示させることができます。

 

設定手順は次の通り。

 

手順

  1. 外観をクリック
  2. ウィジェットをクリック
  3. コードを入力

 

まずは、コードのコピーが必要です。

適当な記事でもいいですし、すでに作成しているスライドショーでもいいので、コードをコピーしてください。

 

コードの出力は次の通り。

 

アフィンガー5のスライドショーを出力する手順

 

「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」をクリックし、コードを出力します。

出力したコードを全てコピーしてください。

 

次にWordPress管理画面から、「外観」→「ウィジェット」をクリック。

 

アフィンガー5のウィジェットの編集

 

スライドショーを表示させたい箇所をクリックし、「テキスト」に先ほどコピーしたコードを貼り付けて下さい。

今回は試しに、サイドバートップにスライドショーを表示させてみます。

 

まずは「サイドバートップ」に「テキスト」をドラッグ。(テキストは下にスクロールすると見つかります)

そして、「テキスト」にコードを貼り付け。

 

アフィンガー5のウィジェットにショートコードを貼り付け

 

最後に保存をクリックすれば完了です。次のようにスライドショーが表示できました。

 

アフィンガー5のスライドショーをサイドバートップに表示

 

ウィジェットを使えばサイト内のどこにでもスライドショーを表示させることができるので、お好きな箇所に表示させてみましょう。

 

以上、AFFINGER5(アフィンガー)スライドショーの設定方法についてでした。

スライドショーは非常にすばらしい機能なので、どんどん使っていきましょう。

 

また、スライドショー以外にもAFFINGER5にはまだまだ面白い便利な機能が実装されています。

ということで、続いてはその他の便利機能についてご紹介したいと思います。

 

AFFINGER5(アフィンガー)の面白い便利な機能3選

AFFINGER5(アフィンガー)の面白い便利な機能3選

 

スライドショー以外にも便利で面白い機能がありまして、それが下記の3つ。

 

  1. 吹き出し機能
  2. ブログカード
  3. ランキング機能

 

非常に面白い機能なので、こちらもどんどん使っていくべきです。

どのような機能なのか、一つずつ解説しますね。

 

1.吹き出し機能

 

吹き出し機能ってなんのこと?

 

ん?これのことだよ(笑)
kazuki

 

吹き出し機能とは、上記のようにキャラクターで会話をさせることができる機能のことです。

これは本来プラグインを導入しなければできないのですが、AFFINGER5はプラグインなしで使用可能です。

 

これを使うことのメリットは、メリハリのある記事を書けるという点。

文字だけではどうしても読みにくいので、読みやすさを向上させることができます。

 

kazuki
ブログの必須ツールです!

 

また、LINEのように記事を書けるので、読者が普段見慣れている文章を見せることができます。

 

読みやすい記事はとにかく読まれます。読まれれば成約につながる。

 

収益アップに欠かせない機能なので、どんどん使っていきましょう。

吹き出し機能の設定については、こちらの【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説を参考にしてください。

【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説
【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説

続きを見る

 

2.ブログカード

 

ブログカードとは次のようなもの。

 

アフィンガー5の購入
[購入特典あり]稼げるテーマ!アフィンガー5の購入&導入手順

続きを見る

 

これを使うことで、次に読んでもらう記事に誘導することができます。

サイト内を回遊してもらうためにはこのような内部リンクは必須ですが、内部リンクに気づかないことが結構あります。

 

というのも、読者は基本的には記事を読みません。

流し読みをしていることがほとんどなので、内部リンクに気づかない場合が結構あるんですよね。

 

kazuki
読者は記事を読んでいません。流し読みで適当に読んでいます。

 

そこで使えるのがブログカード。テキストリンクより圧倒的に目立つので、次に誘導したい記事を強調することができます。

特に収益記事への誘導は絶対に取りこぼしたくないので、誘導したい記事がある場合はブログカードを使ってみましょう。

 

ブログカードの設定については、こちらのアフィンガー5のブログカードの作り方。2秒で作れます。を参考にしてください。

アフィンガー5のブログカードの作り方。2秒で作れます。

続きを見る

 

3.ランキング機能

 

ランキング機能とは次のようなもの。

 

AFFINGER5

AFFINGER5公式ページトップ画面

有名ブロガーが愛する最強のテーマ、AFFINGER5

カスタマイズが豊富で初心者でも簡単に使いこなせます。

今なら「詳細ページ」から購入いただけますと、当サイト限定の6つの特典が付いてきますよ。

 

この機能は、とにかく目立ちます。収益アップの可能性を秘めているので、自分が最も売りたい商品をランキングで作成しましょう。

ちょっと設定が面倒くさいですが、一度設定が完了すればその後はショートコードを入力するだけでOK。

 

しんどいのは最初だけなので、面倒くさい作業はさっさと終わらせてしまいましょう。

ランキング機能の設定については、こちらのアフィンガー5のランキング作成手順を徹底解説を参考にしてください。

アフィンガー5のランキング作成手順を徹底解説

続きを見る

 

以上、AFFINGER5の面白い機能3選でした。

スライドショーにも負けない本当に便利で面白い機能なので、これらもどんどん使っていきましょう。

 

それでは最後にまとめです。

 

まとめ:AFFINGER5(アフィンガー)スライドショーの設定方法

まとめ:AFFINGER5(アフィンガー)スライドショーの設定方法

 

本記事ではAFFINGER5スライドショーの設定方法について詳しく解説しました。

スライドショーは読者の目を止めることができ、必然的に記事をクリックしてもらえます。

 

サイトの回遊を高める意味でも非常に重要な機能なので、積極的に使っていきましょう。

 

また、AFFINGER5には便利機能がたくさんあるので、併せて一緒に使っていきましょう。

 

便利な機能3選

  • 吹き出し機能
  • ブログカード
  • ランキング機能

 

その他にも、AFFINGER5のカスタマイズや機能、口コミ・評判など個別でまとめた記事があるので、よければ参考にしてください。

 

アフィンガー5の購入
[購入特典あり]稼げるテーマ!アフィンガー5の購入&導入手順

続きを見る

稼げるテーマ!AFFINGER5(アフィンガー)の口コミ・評判まとめ
稼げるテーマ!AFFINGER5(アフィンガー)の口コミ・評判まとめ

続きを見る

【アフィンガー5 JET】評価、導入・カスタマイズ方法【すべて語る】

続きを見る

AFFINGER5(アフィンガー)がSEOに強いと言われる5つの理由
AFFINGER5(アフィンガー)がSEOに強いと言われる5つの理由

続きを見る

【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】
【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】

続きを見る

【最短5分】アフィンガー5の初期設定を徹底解説

続きを見る

[コピーOK]アフィンガー5でトップページをカスタマイズする手順

続きを見る

【徹底解説】アフィンガー5で目次を作る方法3選
【徹底解説】アフィンガー5で目次を作る方法3選

続きを見る

 

気になるものがあれば読んでみてください。

それでは今日はこのへんで。グッバーイ

 

-affinger