AFFINGER

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

困ってる人
●WordPressテーマAFFINGER5を購入したけどスライドショーの設定方法がわからない。。

●スライドショーのカスタマイズ方法をどうやればいいのかわかってない。。

 

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

 

こんな方におすすめ

  • WordPressブログ初心者
  • 有料テーマAFFINGER5(アフィンガー)の初心者
  • AFFINGER5の設定がうまくできない方

 

本記事の信頼性

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

 

AFFINGER(アフィンガー)は簡単にスライドショーを作れてプログラミングができなくてもおしゃれなサイトが簡単に作成できます。

 

しかしAFFINGER6(アフィンガー)はカスタマイズ設定が豊富にできる一方、初心者がいきなり扱うのは少し難しく感じることもあるかと思います。

 

今回はそんなAFFINGER6を導入したばかりの方でも、簡単にスライドショーの設定ができるよう画像を使って丁寧に開設していきます。

 

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

 

スライドショーを使ってるだけでおしゃれに見えるので、ぜひ使ってみましょう。

 

ちなみに当ブログでは『AFFINGER6』を使用していますが、WordPressテーマ導入に迷われてる方は、『WordPressブログのおすすめ有料テーマ7つを徹底比較』を参考にしてみて下さい。

 

関連記事
【2021年】WordPressブログのおすすめテーマ10選!【無料版と有料版を徹底比較】

続きを見る

 

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

 

 

【AFFINGER6】そもそもスライドショーとは何か?

【AFFINGER6】そもそもスライドショーとは何か?

 

悩んでいる人
AFFINGER5(アフィンガー)で使えるって聞いたけど、スライドショーて何なの?

 

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

 

具体的には下記のような表示ができます。

 

 

こんなスライドショーはプログラミングができないと、作れないんじゃないの、?とWordPressブログを始めた時は思っていました。

 

しかし『AFFINGER6』であれば簡単に設定ができます。

 

僕自身もTOPページにスライドショーを使っていました。

 

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

 

【AFFINGER6】スライドショー設定方法について手順を解説【3パターン紹介】

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

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

 

それではAFFINGER5(アフィンガー)のスライドショー設定方法について解説します。

 

下記3パターンの設定方法があります。

 

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

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

 

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

 

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

 

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

 

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

AFFINGER管理をクリック

 

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

 

AFFINGER5⇒ヘッダーをクリック

 

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

 

スライドショー設定

 

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

 

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

TOPページの例

 

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

 

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

 

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

 

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

 

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

 

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

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

 

タグ⇒記事一覧/カード⇒カテゴリー一覧(スライドショー)をクリック

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

ウィジェットをクリック

 

ウィジェットとは?

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

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

AFFINGER6 スライドショーのカスタマイズ方法【各項目の見方も解説】

AFFINGER6 スライドショーのカスタマイズ方法【各項目の見方も解説】

AFFINGER6 スライドショーのカスタマイズ方法【各項目の見方も解説】

 

AFFINGER5のスライドショーカスタマイズ方法について解説していきます。

 

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

 

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

 

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

 

スライドショー各項目カスタマイズ方法

・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:更新日で並ぶ

 

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

 

当ブログTOPページカスタマイズ例

 

 

こんな感じで表示されます。

 

自分で好きにカスタマイズしてスライドショーは作れるので、ぜひ試してみて下さい。



まとめ:AFFINGER6の機能を活用して簡単にスライドショーを作成しよう

AFFINGER6を活用してスライドショーを作成しよう

 

今回はAFFINGER6(アフィンガー)のスライドショー作成方法について解説しました。

 

アフィンガーのショートコードを使えば、ワンクリックで簡単にスライドショーが作れます。

 

カスタマイズ方法も難しくないので、本記事を参考にぜひ実践して下さい。

 

おしゃれスライドショーはクリック率も上がりやすくなるので、おすすめですよ。

 

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

 

それでは、本日はこの辺りで!

>>AFFINGER6のカスタマイズ方法まとめに戻る

 

関連記事AFFINGER6の特典10個付きレビュー!評判やメリット・デメリットを徹底解説

 

関連記事AFFINGER6に必須のおすすめプラグイン10個・不要プラグイン3個を徹底解説

 

-AFFINGER