webを見ていると、スライドショーが設定しているHPをよく見かけます。
なぜかというと、スライドショーのような動きがあるだけで、HPをみている方を引きつける効果があるからです。
便利です。スライドショー。
しかもスライドショーがあるだけでブログの「みためレベル」もUP！
正直、こんな便利なアイテム「スライドショー」を使わないのはもったいないです。
「スライドショーの設定をしたいけど、何だか設定が難しそう･･･。」これまたもったいないです。
実は、AFFINGER6なら1分ぐらいで簡単に設定ができちゃいます！
今回は、AFFINGER6でのスライドショーの設定方法を記事にします。
この記事で解決できる悩み
- スライドショーでHPに動きをつけたい。
- HPに来てくれた人が、すぐ居なくなるのを防ぎたい。
- HPの見た目レベルをあげたい！
目次
AFFINGER6でスライドショーは2パターンある！
AFFINGER6でのスライドショーは2パターンあります。
TOPページ上部に表示させる「ヘッダー記事スライドショー」と、ページ内どこでもつけられる「カテゴリー一覧スライドショー」です。
「カテゴリー一覧スライドショー」は、ブログ下部分（フッター）に定型として入れても記事内の途中に入れても、どこでも設定可能な万能スライドショーです。
TOPページデザイン「ヘッダー記事スライドショー」
「ヘッダー記事スライドショー」は、TOPページのデザイン設定にも関わるスライドショーです。
TOPページを開いて、最初に見る事ができる箇所（ファーストビュー）にスライドショーを表示する事ができます。
実は、ページを開いて最初に見る事ができる「ファーストビュー」はとっても大切な部分。せっかくgoogleなどの検索エンジンからサイトに来てくれたとしても、最初に見える箇所がいまいちだと「興味ないサイトだった〜」とサイトからすぐ離れていってしまう可能性があるからです。
これはまずい事態です。
そこで「ヘッダー記事スライドショー」で記事をスライドショーにして、サイトに訪れてくれた方の興味を引く仕掛けをつくっていきます。
また「ヘッダー記事スライドショー」の何が便利かというと、勝手に新しい記事をスライドショーしてくれる事です。一度設定すれば、後は設定いらずなので日々ブログを更新している身としてはめちゃくちゃ便利です。
記事内どこでもOK！「カテゴリー一覧スライドショー」
「カテゴリー一覧スライドショー」は、記事内でも、どこでも設定可能です。（記事内の途中に「スライドショー」をする事もできちゃいます。）
AFFINGERでのスライドショーは、ブログ内の全てのカテゴリーを選択すれば全ての最新記事をスライドショーする事ができます。
また逆に、一部のカテゴリーのみ選択すれば余計な記事はスライドショーしなくなります。
便利ですね。
（しかも「カテゴリー一覧スライドショー」は、設定するごとにカテゴリー選択などの設定が可能です。）
ところでカテゴリーとは何？
「カテゴリー」って何だ？というと、ご自身で設定している記事のカテゴリーの内容の事です。
当ブログのんどりデザインの特典サイト「SKY」でのカテゴリーでいうと、「フットネス」「ランニング」などです。
ではさっそく、設定をしていきます。
AFFINGER6でのスライドショーの設定方法
「ヘッダー記事スライドショー」設定方法
トップページのメインスライドショーを設定していきます。
step
1「AFFINGER管理」> 「ヘッダー」
ワードプレスメニューの「AFFINGER管理」> 「ヘッダー」をクリック。
step
2「記事スライドショー設定」項目で設定
カテゴリーIDはどこで確認する？
- ワードプレスメニューの「投稿」> 「カテゴリー」をクリック。
- 設定画面右側に「カテゴリー名」とカテゴリー名の「ID」が表示されています。これが、スライドショーで表示したい「カテゴリーID」です。
（※TOPページのメインスライドショーなので「未分類」以外はスライドショーをする事をオススメします。）
最後に「Save」ボタンをクリックして設定を保存します。
これでOK！
後はお好みで追加で設定していきます。
［自分が好んで使う設定］
- スライドショーの表示方法 > > > 右から左（やはり右から左が違和感なく自然です。）
- スライドショーの表示速度 > > > 5000ミリ秒（初期設定でOK！）
- 「横並びにする」にチェックを入れています。（次が少し見えた方がワクワク感があるのを期待して、横並びにしています。）
「カテゴリー一覧スライドショー」設定方法
クラシックエディターでの設定方法
クラシックエディターを使用されている方向けの「カテゴリー一覧スライドショー」の設定方法です。
step
1 記事内で「タグ」>「記事一覧/カード」>「カテゴリー一覧」
記事内で「カテゴリー一覧スライドショー」をしたい場合、スライドショーを入れたい記事内の場所で、「タグ」>「記事一覧/カード」>「カテゴリー一覧」をクリック。
step
2 記号の羅列で問題なし！
- 記号の羅列に見えるものが表示されます。コレ>>>[ 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="" ]
- 記号の羅列でOK！（「下書き保存」をしてから「プレビュー」で確認するとスライドショーが表示されています。）
さらに詳しく
[ 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="" ]の意味の説明をします。
お好みで設定してください！基本、初期設定のままでOKですが、色々設定が変えられます。
- st-catgroup cat="0"→新着記事を表示という意味です。（このままの初期設定でＯＫ）「一部のカテゴリーのみ表示したい場合は、表示したいカテゴリーIDを入れます。カテゴリーIDについて詳しくはコチラ。st-catgroup cat="1,2"」
- page="5" >>>5記事表示するという事です。（記事数をあまり増やすと読み込みが遅くなるので、5記事程度がいいです。）
- order="desc">>>「desc」は日付が新しい順（このままの初期設定でＯＫ）
- orderby="id">>>「id」は投稿ＩＤ順です。（このままの初期設定でＯＫ）
- child="on">>>子カテゴリーを表示するかしないかです。onはする、offはしないです。（初期設定の“on”のままでＯＫ）
- slide="on">>>「on」はスライドショーにするという指示です。
- slides_to_show="3,3,1" >>>表示枚数です。（PC版で3枚横並び、タブレット3枚並び、スマートフォン1枚で表示）（このままの初期設定でＯＫ）
- slide_date="">>>投稿日を表示する設定です。する場合はslide_date="on"（自分は基本していません）
- slide_more="ReadMore">>>続きを読む部分です。日本語がよければ「slide_more="続きを読む"」に変更。
- slide_center="on">>>スマホの表示方法です。スマホで両端を見切れるデザインの場合はon、見切れない場合はoff。（自分はonです。）
- fullsize_type="">>>表示していない場合は、そのままの設定（このままの初期設定でＯＫ）ちなみに、card→画像のみ表示、text→タイトルと画像のみ表示です。
ブロックエディターでの設定方法
ブロックエディタを使用されている方の「カテゴリー一覧スライドショー」の設定方法です。
step
1「ブロックメニュー」>「STINGERカテゴリー一覧」を選ぶ
- 記事内の「カテゴリー一覧スライドショー」を表示したいところで、左上のワードプレスロゴ隣の「＋」プラスボタンをクリックして、ブロックメニューを表示させます。
- 「ブロックメニュー」の中の「STINGERカテゴリー一覧」をクリックします。
step
2スライドショーの設定をする
スライドショーが表示される場所ができました。
右側に表示されるスライドショーの設定画面で設定をしていきます。
- カテゴリID >>> 表示したいカテゴリーIDを入れます。（カテゴリーIDの説明はコチラ）
- スライドショー >>> ONにします。
- スライドショーを選択すると表示される、スライド表示数、日付、ReadMore、モバイル中央寄せなど→初期設定のままでOK
step
3「プレビュー」で確認する
下書き保存をしてから、「プレビュー」ボタンで確認します。
スライドショーが表示されます。
これで終了です。
まとめ
今回、ご紹介した「スライドショーは1分で簡単設定［AFFINGER6］」の記事内容のおさらい
記事のまとめ
- AFFINGER6であれば、スライドショー設定は簡単！
- 「ヘッダー記事スライドショー」は、HPに来てくれた人の興味を引く事ができる。
- 簡単設定なのにHPの見た目もレベルUP！
関連記事
-
副業ブログにはサイトマップが必要！［プラグインサイトマップは自動だから簡単］
続きを見る
-
お問い合わせフォームはブログに必要？AFFINGER6［Googleアドセンス承認をもらうためには必要です！］
続きを見る
