AFFINGER6(アフィンガー)でスライドショーを表示する方法が知りたい！
AFFINGER6にはスライドショーを表示する方法がいくつかあるよ。今回は「スライドショーを設置する方法と、カスタマイズ方法」を紹介するね！
AFFINGERにはスライドショーの設置機能が標準で入っています。
スライドショーを設置するだけでもサイトのデザインがおしゃれな雰囲気になります。
今回はAFFINGERで『スライドショーを設置する方法とカスタマイズの方法』を解説したいと思います。
AFFINGERを導入したばっかりの人や、これから導入を考えている人は参考にしてください！
本記事の内容
- AFFINGER(アフィンガー)でスライドショーを設置する方法
- スライドショーのカスタマイズ方法
- スライドショーを設置するときにの注意
AFFINGER6について
AFFINGER6の購入前に評判やメリット・デメリットについて確認しておきたいという方は、【特典つき】AFFINGER6(アフィンガー6)を4年愛用した使用感をレビューを参考にしてみて下さい。
＼今なら当サイト限定の豪華特典付き／
AFFINGER6(アフィンガー)で設置できるスライドショーの種類
実はアフィンガーには「スライドショー」の機能が複数あって使い分けが大変なのが正直なところ。
スライドショーの設置方法について紹介している記事も多くありますが、それぞれの違いや使い分けがイマイチわかりづらい。
ということで、まずはアフィンガーでできるスライドショーの種類を整理しておきます。
えっ、こんなにたくさんあるんだ・・・
ぶっちゃけ僕も、整理しててアフィンガーの機能の多さに驚いた！笑
AFFINGERにはEX版も含めると、全部で6種類もスライドショーの表示方法があります。
それぞれ表示するスライドが異なるので、ブログのデザインに合わせて使いこなしましょう！
AFFINGER6(アフィンガー）でスライドショーを表示する方法
では、早速それぞれのスライドショーの説明と設定方法について説明していきます。
ヘッダー記事スライドショー
ヘッダー記事スライドショーは「ヘッダーのトップ画像エリア」に記事のスライドショーを表示することができます。
ヘッダー全体に記事のアイキャッチを表示するのでインパクト強めの感じになります。
ヘッダーに記事スライドショーを表示する手順は次のとおり。
ヘッダー画像スライドショー
画像
ヘッダー画像スライドショーは「ヘッダーの画像エリア」に画像のスライドショーを表示することができます。
ヘッダー画像はカスタマイザーで複数画像設定したときだけスライドショーにすることができます。
ヘッダーに画像スライドショーを表示すには次のステップでできます。
「ヘッダー記事スライドショー」との違いは何？
ヘッダー画像は記事のアイキャッチとは関係なく、好きな画像を表示することができるよ！
ちなみにヘッダー記事スライドショーとは併用できないので注意しましょう！表示される優先順位は次のとおりです。
表示優先度：記事スライドショー ＞ ヘッダーコンテンツ設定 ＞ ヘッダー画像エリアのウィジェット ＞ ヘッダースライドショー
サムネイルスライドショー
サムネイルスライドショーは「ヘッダー画像下エリア」に表示できるスライドショー。記事のアイキャッチを表示できます。
最初に説明した「ヘッダー記事スライドショー」と違い、ヘッダーとは別エリアになるためヘッダー画像との併用も可能です。
さらに、サムネを丸角にしたり、影をつけたりカスタマイズの自由度が高め。
サムネスライドショーはデザイン性も良くてどのサイトにも馴染みやすいと思う！
サムネスライドショーは以下から設定できます。
カテゴリ一覧スライドショー
カテゴリー覧スライドショーは⇧こんな感じで直接投稿やウジェットに挿入可能
カテゴリ一覧スライドショーを表示する方法は2つあります。
- 「カテゴリ一覧ブロック」を使う
- 「ショートコード」で表示する
それぞれどうやって使い分けるの・・・？
ブロックエディタを使ってるなら「カテゴリ一覧ブロック」を。ウジェットに表示するなら「ショートコード」を使おう！
ブロックを使うと、表示カスタムが簡単にできます。
カテゴリ一覧のショートコード
[st-catgroup cat="6" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="on" slide_more="続きを読む"]このショートコードをコピペして使ってください。(クリックでコピーできます)
ショートコードの属性
| 属性 | 指定値 | デフォルト |
|---|---|---|
| cat | 表示するカテゴリID | 0(全ての記事) |
| page | 読み込み数 | 5 |
| orderby | 並び順(id：カテゴリID順, date：日付順) | id |
| order | asc：降順、desc：昇順の指定 | desc |
| child | 子カテゴリーの読み込み | on |
| slide | スライドショーのオンオフ | ー |
| slides_to_show | 列数の指定(大画面，中画面，小画面) | 3,2,1 |
| slide_date | 投稿日の表示 | on |
| slide_more | テキスト | Readmore |
以下のように「fullsize_type属性」を追加すると表示デザインを変えることもできます。
アイキャッチ画像のみ（fullsize_type="card"）
fullsize_typeに「card」と書いてやると、アイキャッチのみのスライドショーを表示できます。
[st-catgroup cat="6" page="5" slide="on" slides_to_show="3,3,2" fullsize_type="card"]アイキャッチ画像のテキストだけで内容が伝わるなら、アイキャッチ画像だけにするのもアリですね。
アイキャッチ画像+記事タイトル（fullsize_type="text"）
アイキャッチと記事タイトルを表示する場合は、fullsize_typeに「text」と書けば記事タイトルも表示されます。
[st-catgroup cat="6" page="5" slide="on" slides_to_show="3,3,2" fullsize_type="text"]EX版限定：記事一覧・タグ一覧スライドショー
EX版では、カテゴリ一覧に加えて、記事一覧やタグ一覧のくくりでもスライドショー表示ができます。
カテゴリ一覧と同様に専用ブロックとショートコードで設定します。基本的にはカテゴリ一覧と同様に設定するだけでOK。
ちなみに、ショートコードを使いたい場合はは以下をコピペして使ってください。
AFFINGER6でスライドショーを設置する際の注意点
スライドショーはサイトの見た目を整えるにはとても便利な機能ですが、多用しすぎるのはあまりおすすめしません。
ページ表示速度に影響する
スライドショーはコンパクトに記事一覧を表示できますが、動作があるため多少なりともページ表示速度に影響します。
特に読み込む記事数が多いほど、表示速度も時間がかかります。
とはいえ、スライドショーを1つ入れたからといって、劇的にページ表示速度が遅くなるわけではありませんのでご安心を。
表示速度が気になる人は原因の1つかもくらいで考えておきましょう。
多用すると逆に見づらい
おしゃれな反面、多用は禁物です。
アニメーションのあるサイトって、なんだか見ていて疲れますよね。
トップページのヘッダー付近にアクセントとして使用するくらいがちょうど良いかなと。
AFFINGER6のスライドショー設置まとめ
今回はアフィンガーでスライドショーを設置する方法を6つ紹介しました。
トップページにスライドショーをひとつ設置するだけでも、サイトの印象が大き変わりので、積極的に使っていきたい機能ですね。
ただ、多用しすぎてもサイトスピードや視認性が悪くなることもあるので、スライドショーを設置する場所はよくよく検討しましょう。
AFFINGER6を検討中の方
AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。
実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。