AFFINGER6でスライドショー設定方法【初心者でも簡単にできます】

2024年9月8日

※PRを含みます

困ってる人

●AFFINGER6を購入したけどスライドショーの設定方法がわからない。。

●AFFINGER6のスライドショーのやり方を教えてください。

今回はこんなお悩みに答えていきます。

こんな方におすすめ

WordPressブログ初心者
AFFINGER6（アフィンガー）のスライドショーを設定したい
AFFINGER6を購入したばかりの方

本記事の信頼性

当サイトではAFFINGER6を使用しています。初心者でも簡単にスライドショーの設定ができるように画像を使って丁寧に紹介します。

AFFINGER（アフィンガー）は簡単にスライドショーを作れてプログラミングができなくてもおしゃれなサイトが簡単に作成できます。しかしAFFINGER6（アフィンガー）は、初心者がいきなり扱うのは難しく感じることもあるかと思います。

今回はAFFINGER6を導入したばかりの方でも、簡単にスライドショーの設定ができるようやり方を画像を使ってご紹介します。

本記事を読めば、AFFINGER6のスライドショー設定が3分でできるので、ぜひ参考にしてみて下さい。

AFFINGERの全機能を開放

AFFINGERの全ての機能を使いたい方は、ACTION PACK3がお得です。

PACK3の商品一覧

上記プラグインがセットでついてきます。AFFINGER6の機能を全て活用し、収益速度を上げたい方はチェックしてみてください。

＼PACK3の概要なら／

公式サイトはこちら

＼PACK3の評判なら／

口コミ・評判はこちら

ちなみに当サイト経由でAFFINGER6を購入頂いた方に限定特典を15個プレゼントしています。購入を考えてる方は、お得にAFFINGER6をゲットしてみてください。

>>AFFINGER6の当サイト限定特典11個＆公式特典4個の詳細を解説

それでは早速始めていきます。

1 【AFFINGER6】スライドショーとは？
2 【AFFINGER6】スライドショー設定方法
3 AFFINGER6 スライドショーの調整方法と各項目の見方
- 3.1 AFFINGER6のスライドショー調整方法
- 3.2 AFFINGER6のスライドショー見方
4 まとめ：AFFINGER6でスライドショーを作成しよう

【AFFINGER6】スライドショーとは？

スライドショーとは、記事を自動スライド形式で閲覧表示することができる機能のことです。

下記のような表示ができます。

こんなスライドショーはプログラミングができないと、作れない？とWordPressブログを始めた時は思っていましたが、AFFINGER6であれば簡単に設定ができます。

当ブログもTOPページにスライドショーを使っていました。

てつ

それではAFFINGERでのスライドショーの設定方法について解説していきますね。

【AFFINGER6】スライドショー設定方法

AFFINGER6（アフィンガー）のスライドショー設定方法について解説します。下記3パターンの設定方法があります。

AFFINGER6スライドショー設定方法3パターン

①トップページヘッダー部分にスライドショーを表示する
②記事投稿内にスライドショーを表示する
③ウィジェットを使って、フッターサイドバーなど自由に表示する

1つずつ解説してきます。

その①：トップページのヘッダー部分にスライドショーを表示する

1つ目はトップページのヘッダー部分にスライドショーを表示させる方法です。

画面左側の『AFFINGER 管理』をクリックします。

AFFINGER管理をクリック

AFFINGER管理の中の『ヘッダー』という項目をクリックします。

AFFINGER5⇒ヘッダーをクリック

上記のような画面になるので、下にスライドしていくと下記画面のような『記事スライドショー設定』という項目があります。

スライドショー設定

上部にある『ヘッダーに記事をスライドショーで表示する』にチェックを入れます。クロールして下にある『保存』をクリックすれば完了です。

もともとは下記のようなヘッダーでした。

TOPページの例

設定後は下記のように変更できました。

ヘッダー部分にスライドショーを適用

ヘッダー部分は一番最初に目に入る部分なので、スライドショーを活用するのもよいと思いますよ。

てつ

その②：記事投稿内にスライドショーを表示する

2つ目は記事投稿内にスライドショーを表示する方法です。

こちらも方法は簡単です。

投稿内で『タグ⇒記事一覧⇒カテゴリ一覧（スライドショー）』をクリックします。

タグ⇒記事一覧／カード⇒カテゴリー一覧（スライドショー）をクリック

クリックすると下記のようにショートコードが表示されます。

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

これで記事内にスライドショーが表示されました。

スライドショー表示ができたと思います。投稿内であれば、好きな場所に設定できますよ。

てつ

その③：ウィジェットを使って、フッター・サイドバーなど自由に表示する

3つ目はウィジェットを使ってフッターやサイドバーなどに表示する方法です。

まずは、先ほど『②投稿内でスライドショーを表示』で使ったショートコードをコピーします。

次に『外観⇒カスタマイズ』をクリックすると下記画面のようになります。

ウィジェットをクリック

ウィジェットとは？

各場所ごとにコード、テキスト、広告などを配置できるようにした配置ボックスのようなものです。

ウィジェットを使えば、フッターやヘッダーなどの任意の場所に自由にテキスト、広告などを入れられます。

僕も最初はよくわかっていませんでしたが、『サイト内を自由にカスタマイズするための機能』くらいにとらえておけばOKです。

ウィジェットをクリックするとトップページやヘッダーなど表示を追加したい場所を選択できます。

今回はトップページ上部ウィジェットを例にします。

上記のような画面になるので『ウィジェットを追加』をクリックします。

トップページ上部でテキストを選択

上記のように追加するウィジェット（機能）が表示されるので『テキスト』をクリックします。

ここに先ほどコピーしたスライドショーのショートコードを入力すればOKです。

後はテキストに貼り付けて『公開』をクリックすれば、表示されます。

以上3パターンの表示方法を紹介しました。では次にスライドショーのカスタマイズ方法について解説しますね。

てつ

AFFINGER6 スライドショーの調整方法と各項目の見方

調整方法は次の通りです。

AFFINGER6のスライドショー調整方法

投稿内でタグ⇒記事一覧⇒カテゴリ一覧（スライドショー）でスライドショーを表示させると初期は下記画像のようになっています。

スライドショーのショートコード（画像が小さいので拡大 orパソコンから閲覧してください）

この状態になれば、調整可能な状態です。各項目をいじって調整していきます。

AFFINGER6のスライドショー見方

各項目の見方は下記で解説します。

スライドショー各項目設定方法

・cat="0" ：カテゴリIDを入力（初期は0で設定。カテゴリー欄を確認してIDを入力します。）
・page="5"：表示する記事の総数
・order="desc" ：日付ごとに表示する順番を設定できます。
（新しい記事から「desc」、古い記事から[asc」
・orderby="id"：記事の並び方を選択
・child="on" ：子カテゴリIDの表示（カテゴリーを階層に分けて作成してる場合）
・slide="on" ：スライドショーをONにするかOFにするか選択
・slides_to_show="3,3,1"：1つの画面にスライドショーを表示する数
（先頭の数字だけを変更します。）
・ slide_date="" ：日付の表示をする「on」しない「「off」を選択
・slide_more="ReadMore"：続きを読むのタイトルを表示する（変更可能）
・slide_center="on" ：モバイル端末で表示するかしないか
・fullsize_type=""：スライド記事の表示を選択
「画像のみ表示”"card"」「画像とテキスト表示"text"」「全て表示""」

orderbyは初期のIDでもOKですが、下記のようにカスタマイズも可能です。

・id：投稿IDで並ぶ
・title：タイトルで並ぶ
・type：投稿タイプで並ぶ
・date：日付で並ぶ
・modified：更新日で並ぶ

ちなみに当サイトのスライドショーは下記のような表示にしています。