AFFINGER6のデザイン性に欠かすことができないスライドショー機能。
別名カルースライダーと言われますが、初めての方は、スライドショーと言われる方の方が多いですので、こちらで覚えておいて問題はありません。
このスライドショーの機能があると、ブログ自体がかっこよく見えるので、デザイン性が向上し、ユーザーの目に留まりやすくなるメリットがあります。
そこでAFFINGER6のスライドショーの設定方法と簡単な使い方と、細かな使い方について解説していきます。
ココがポイント
＜当記事で解決できるポイント＞
- スライドショーの設置位置について
- AFFINGER6のスライドショーの２つの設定方法
- スライドショーに特定の記事を指定できるか？
当記事ではAFFINGER６のスライドショー機能（カルースライダー）の上記のような悩みを解決できます。
AFFINGER6のスライドショーの設定画面位置について
それでは、まずAFFINGER6のスライドショーの設定画面位置について確認しておきましょう。
設定項目位置
ポイント
「AFFINGER 管理➡ヘッダー」
「画像スライドショー設定」「記事スライドショー設定」のどちらかで表示する
「画像スライドショー設定」「記事スライドショー設定」のこの２つの設定で、２パターンのスライドショーの設定を行うことが可能です。両方を反映はできません。必ずどちらかの設定を行います。
【AFFINGER6】スライドショー機能の２つの設定について
まずスライドショー機能については、２つの機能があり、「画像スライドショー」と「記事スライドショー」の２つの機能があります。
それでは、この２つのスライドショーの設定機能について確認していきましょう。
画像スライドショーの設定方法
画像スライドショーは、あくまで「画像ベースで複数の記事を表示する方法」です。画面イメージは下記のような形で表示され、非常に人気の高いスライダーになっています。
１）．画像スライドショーの画面イメージ
２）．画像スライドショーの初期設定
その設定に関しては、「画像スライドショー」の設定の一番上のチェックボックスを選択することがで、この表示に切り替わります。スライダーの表示方法や表示速度についてもこちらの管理画面で切り替えることが可能です。
３）．画像スライドショーの表示カテゴリ設定
ただこれだけでは表示されません。もう一つすべき設定があります。
ポイント
設定方法：タグ➡記事一覧/カード➡カテゴリー一覧（or おすすめ記事一覧 etc .....）
を選択しましょう。
こちらを選択すると、青色の項目が表示されますので、これで、反映されます。
ちなみにソースコードについても簡単に解説しておきましょう。
1 | [st-catgroup cat="796" page="10" order="desc" orderby="id" child="on" slide="on" slides_to_show="5,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""] |
＜ソースの詳細解説＞
st-catgroup cat：カテゴリＩＤを入力（登録したカテゴリID Noを指定する）
page：表示ページ数（表示する最大ページ数を入力「10以内が目安」）
slides_to_show：スライドの表示数（例：5,3,1）➡ 5が表示位置
type：詳細の表示方法の変更（text：画像と記事のみ card：画像のみ 空白：画像と記事、詳細を表示）
こちらのＨTMLコードを、ウィジェットを活用して、様々な部分にコピーすることで、記事下や記事上などあらゆる部分に設置位置を変更することが可能です。この設定方法については更に下で解説します。
一般的には、この画像スライドショーを利用される方が多く、また見栄えもいいため人気が高い傾向にあります。
記事スライドショーの設定方法
続いて、「記事スライドショー」の表示画像イメージについても確認しておきましょう。
１）．記事スライドショーの画面イメージ
こんな感じでAFFINGER6がデフォルトでもっている完成されたスライドショー機能の一つですが、こちらはちょっと画面が大きく、画面に一つしか出てこないので、利用される方が少ない傾向にあります。
２）．記事スライドショーの初期設定
初期設定に関しては至ってシンプルです。
先ほど上記で示したAFFINGER6の管理画面から「ヘッダーの記事スライドショー設定項目を選択」すると、下記のような箇所がありますので、一番上の「ヘッダーに記事スライドショーで表示・・・・」にチェックを入れると、上記のような画面が表示されます。
こちらの項目からスライドショー表示速度も設定できますので、「１秒＝1000」で入力しましょう。スライドショーの表示方法は、フェードイン・アウトが一般的ですが、この表示はお好みで。
AFFINGER6のスライドショーはウィジェットからいろんな位置に配置が可能
画像スライドショーの画面イメージを見てもわかるように、メニューのすぐ下に設置することで、ヘッダーカードと重なって重複感を生み、見えにくくなってしまうこともあります。
1 |
ソースコードコピー
1 | [st-catgroup cat="796" page="10" order="desc" orderby="id" child="on" slide="on" slides_to_show="5,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""] |
ヘッダー画像下ウィジェットや記事上ウィジェットにソースコードを貼り付ける
赤枠にソースコードを貼り付けてみましょう。ヘッダーエリア下だと、ヘッダーカードより下に表示されます。
ウィジェットを活用すれば、表示位置を好きな位置に変更することができますので、ぜひ設定を変更して、より良い画面を作り上げてみて下さい。
AFFINGER6スライドショーは記事指定できないがカテゴリ指定が可能
そして、こちらの疑問点についてはスライドショーの設定を少し理解した中級者 or 上級者向けの内容ですが、下記のような悩みが生まれて場合には確認しておきましょう。
AFFINGER6スライドショーのスライド自体、特定記事を指定して、スライドショーに表示することができるの？
これは、現在の所設定機能にはなく難しいようですね。残念ながら、記事指定はできませんが、カテゴリー指定なら可能です。
カテゴリー指定が可能：「st-catgroup」でカテゴリＩＤを指定する
カテゴリーIDを指定する場合には、下記「st-catgroup cat="●●●"」を変更しましょう。
1 | [st-catgroup cat="796" page="10" order="desc" orderby="id" child="on" slide="on" slides_to_show="5,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""] |
カテゴリIDの確認方法
カテゴリIDの確認方法は、下記を参照に確認しましょう。
このカテゴリーIDを入力および変更することで、指定したカテゴリの記事が表示されるようになります。
まとめ
AFFINGER6では、２つのスライドショー機能があり、色々な位置にスライドショーを設置することができます。
スライドショー機能は、自分のおすすめしたい記事をよりアピールするのに効果的な機能であり、見栄えも大幅に変化し、リピーターが増える率が向上しますので、サイトの構成に合わせて上手にカスタマイズしてみましょう。
