ブログの印象を変える!AFFINGER6でスライドショーを設置する全ステップ

※記事内に商品プロモーションを含む場合があります。

悩める人

Affinger6を使っています。
スライドショーを入れたいのでやり方を教えてください。

きつねコード

アフィンガーには便利なスライドショー機能が付いているので、初心者でも簡単にオシャレなパーツを使うことができます!いくつか使い方があるので解説していきます。

この記事でわかること

  • Affinger6「スライドショー」機能の活用事例
  • Affinger6で記事スライドショーをTOPページに入れる方法
  • Affinger6でサムネイル型スライドショーをTOPページに入れる方法
  • Affinger6でスライドショーを記事内に入れる方法
  • Affinger6でスライドショーをサイドバーやフッターなどに入れる方法

この記事を書いているきつねコードは、ワードプレスを触り始めてから10年以上、このブログを作ってからも毎日ワードプレスを触っています。当サイトではAffinger6を利用しており、今後も使い続ける予定です。

サイトに「スライドショー」を入れると、一気にプロっぽい見た目に格上げします。

アフィンガーでは簡単に使える機能として用意されているので、使ってみたい方はぜひ確認してみてください。

Affinger6専用プラグインで収益を次の段階へ

\ きつねコードも使ってます!6/30までセール中!/

Affingerタグ管理マネージャーとPVモニターのセット

※インフォトップから購入できます。29880円セールにつき24800円

タグ管理マネージャーとPVモニターの活用方法はこちら>>

Affinger6のスライドショー機能とは?

Affinger6では、「スライドショー」を設置するための機能が標準装備されています。

動きのあるスライドショーを入れることで、サイトの見た目が一気におしゃれになりますよね。また、各記事へリンクがクリックされて、サイトの回遊率も上がる効果も期待できるかもしれません。

スライドショーを使える場所や、出し方にはいくつかの方法があります。

きつねコード

Affinger6だと出来ることは結構多いよ!

機能が複数存在するのでややこしく感じるかもしれませんが、1つ1つ整理して見ていけば単純明快です。

それぞれ解説していきますので、「自分が使いたい方法」を採用して実際に試しててください。

使い方さえ整理できれば、ワードプレス初心者でも簡単に利用できます。

スライドショーを導入するにあたり注意しなければならないこともありますが、もし入れたい方はチェックしてみましょう!

Affinger6の「スライドショー」を使った活用事例

まず初めに、アフィンガーで「スライドショー機能を使うとどのようなことができるのか」を一挙にお見せします。

この中で、

これを真似したいです!

という使い方を探してみると良いでしょう。全部で5パターンあります。


一つ目は、サイトTOPページにおいてヘッダー画像をスライドショーで切り替えるやり方です。
自分で複数の画像を設定できるので、自動でトップ画像が切り替わります。

affinger6でヘッダー画像のスライドショーを設定した場合

二つ目は、サイトTOPページにおいて記事スライドショーを設置するやり方です。
投稿した記事のアイキャッチ画像・タイトル・抜粋テキストなどが自動で大きく表示されて、スライドされます。

affinger6でトップページに記事スライドショーを設定した場合

三つ目は、サイトTOPページにおいてサムネイルスライドショーを設置するやり方です。
投稿した記事のアイキャッチ画像とタイトルが自動で小さく表示され、スライドされます。

affinger6でトップページにサムネイルスライドショーを設定した場合

四つ目は、記事内の任意の場所でスライドショーを読み込むやり方です。
記事編集ページで、好きな位置にスライドショーのパーツを設置できます。

affinger6で記事内でスライドショーを設定した場合

五つ目は、サイドバーにスライドショーを設置するやり方です。
ウィジェット機能を使うので、フッターや記事下など好きな場所に挿入することも可能です。

affinger6でサイドバーにスライドショーを設定した場合

きつねコード

設定はどれも簡単ですので、好きな使い方を選びましょう!

スライドショーを利用するにあたっての注意点

ただし、スライドショー機能を活用するにあたり以下のことには十分留意してください。

スライドショーをはじめとする"動的な機能"を多用しすぎると、サイトが重くなりSEOのマイナス評価になる可能性があります。

実はwebサイトの構成において、大きく分けて「静的な要素」「動的な要素」が存在します。

wordpressでは、ほとんどはページを読み込んだら後は動かない静的なモノが多いのですが、スライドショーはガッツリ動きますので「動的」です。

動的な要素には、たいていjavascriptもしくはcssアニメーションが使用されており、処理としては重めです。

cssアニメーションはまだマシなのですが、javascriptは結構重いです。

詳しいことまで覚える必要は全然ありませんが、「動くものは重いんだな〜」ということは頭に入れておくと良いでしょう。

サイトスピードは、SEOにも影響しますので大切です。

1ページの中に1箇所2箇所ぐらいであれば別に問題ありませんが、例えば

スライドショーを3箇所入れ、ヘッダー背景に「流れる動画」を使用し、更にyoutubeも追加して、画像も入れまくって...

のように動くものをてんこ盛りにしていくとどんどん重くなる可能性が高くなります。

動画を扱うサイトやデザインを扱うサイト・ブログなどであればメリットが上回るケースもあるので仕方ありませんが、それ以外の普通のサイトでは「デザイン」と「サイトスピード」のバランスに気をつけながら導入を検討しましょう。

きつねコード

それと当たり前だけど、もしスライドショー機能を利用するなら、毎回記事のアイキャッチ画像に綺麗なものを用意する必要があるので、それも頭に入れておきましょう!

Affinger6「スライドショー」機能の設定とカスタマイズ方法

ここからは、スライドショー機能の具体的な設定方法について確認していきます。

パターンごとにそれぞれ解説しますので、該当する使い方をチェックしてみてください。

用意されている設定項目(カスタマイズ内容)も併せてご紹介します。

AFFINGER6スライドショーの設定方法①TOPページに「ヘッダー画像スライドショー」を設置する場合

1つ目は、TOPページにヘッダー画像を複数枚入れてスライドさせるやり方です。

affinger6でヘッダー画像のスライドショーを設定した場合

ホームページでもブログなどでもよく見る形ですね。

手順としては、AFFINGER設定を変更し、②ヘッダー画像を複数枚設定してあげるだけです。


  • step.1

    管理画面AFFINGER管理」をクリックします。

    wordpress管理画面「AFFINGER管理」

    AFFINGER管理のヘッダー」を開いてください。

    affinger管理の「ヘッダー」の設定

    ヘッダーの設定ページの中に、「ヘッダー画像設定」≫「スライドショー設定を探してください。

    ヘッダー画像をスライドショーで表示する」にチェックを入れましょう。

    (その下にあるのは設定なので、あとで確認します。)

    affinger管理「ヘッダー画像設定」でヘッダー画像をスライドショーで表示にチェック

    チェックを入れたら、忘れずに「保存」ボタンをクリックしてください。

    これで、準備は完了です。次のステップへ進みます。


  • step.2

    次に、管理画面「外観」≫「カスタマイズ」をクリックします。

    wordpress管理画面「外観」のカスタマイズ

    カスタマイズ画面のヘッダー画像」を開いてください。

    affingerテーマカスタマイザーの「ヘッダー画像」設定

    現在のヘッダーの「新規画像を追加」をクリックして、画像を選択しましょう。

    画像サイズの理想としては、2200×500ピクセルと書いてあるので、可能であればそのぐらいを用意するのが良いです。素材を探すのでれば、「ヘッダー画像・ヘッダー背景」などで横長の素材を検索すると見つかるもしれません。
    wordpress上で「切り抜き」も可能なので2200pxよりも大きい画像でも使えるでしょう。(小さい画像を切り抜くと、結果的に引き伸ばされるのでおそらく画質が荒れます。)画像容量は必ず無料ツールで圧縮してからアップしてください。

    affingerのテーマカスタマイザーでヘッダー画像を追加する

    画像を1枚設定するとこのように設定されます↓。
    新規画像を追加」から2枚目以降も設定できるので入れていきましょう。

    affingerのテーマカスタマイザーでヘッダー画像を追加する

    最終的に、こんな感じになります↓。複数枚のヘッダー画像が自動でスライドされます。

    affingerのテーマカスタマイザーでヘッダー画像を追加する

    画像を増やせば増やすほど、ページが重くなるので入れ過ぎは注意です。

    これで、ヘッダー画像スライドショーの設定は終わりです。


  • 【カスタマイズ内容】

    用意されているカスタマイズ内容としては、下記の通りです。

    • スライドのアニメーションの仕方
    • スライド画像の表示順
    • スライドのスピード(時間間隔)
      • 5000ミリ秒は5秒。例えば3秒にしたければ3000と入れる。

    管理画面「AFFINGER管理」≫「ヘッダー」にある設定です↓。

    affinger6のヘッダー画像スライドショーの各種設定

きつねコード

横長の綺麗なヘッダー画像を用意するのが肝ですね!

AFFINGER6スライドショーの設定方法②TOPページに「記事スライドショー」を設置する場合

2つ目は、TOPページに大きな記事スライドショーを設置していきます。

affinger6でトップページに記事スライドショーを設定した場合

美しいデザインを一瞬で設置できるのはアフィンガーのすごいところですね。

手順としては、AFFINGER設定を変更するするだけです。


  • step.1

    管理画面AFFINGER管理」をクリックします。

    wordpress管理画面「AFFINGER管理」

    AFFINGER管理のヘッダー」の設定ページを開いてください。

    affinger管理の「ヘッダー」の設定

    記事スライドショー設定にある、ヘッダーに記事をスライドショーで表示する」にチェックを入れましょう。

    affingerでヘッダーに記事をスライドショーを表示する設定

    保存して確認すると、このように記事スライドショーが表示されます。

    このパターンも各記事のアイキャッチ画像がどデカく出ますので、毎回綺麗な素材を用意する必要がありますね。

    affinger6の記事スライドショーを設置した状態

    基本の設定は、これだけで完了です。


  • 【カスタマイズ内容】

    そのほかにある項目は、各種設定です。好みに応じてカスタマイズを行なってください。

    affinger6の記事スライドショーの各種設定

    ↑もしカテゴリーを指定したい場合は、管理画面「投稿」≫「カテゴリー」の画面で各カテゴリIDを確認できます。

    設定の中で特徴的なものをピックアップすると、
    サムネイル画像の縦横比設定を反映しない」にチェックを入れると、より自然な大きさになります。(画像サイズにもよりますが)

    affinger記事スライドショー設定の「サムネイル画像の縦横比設定を反映しない」

    そうすると、

    affinger記事スライドショー設定の「サムネイル画像の縦横比設定を反映しない」にチェックを入れた状態

    縦にスリムになるので、ファーストビューで下の要素も少し見えるようになります。
    私はこちらの方が好きですが、好きな方で大丈夫です。

    また、横並びにする」にチェックを入れると、前後のスライド画像が一部見えるようになります。

    affinger6記事スライドショー設定の「横並びにする」

    そうすると、

    affinger6記事スライドショー設定の「横並びにする」にチェックを入れた状態

    これも良いですよね!
    綺麗なサイトでよく見る形ですね。ホームページにもブログにも使えます。

    以上で、記事スライドショーの設定は完了です。


きつねコード

アフィンガーすごいな!

AFFINGER6スライドショーの設定方法③TOPページに「サムネイルスライドショー」を設置する場合

3つ目は、TOPページにサムネイル型の小さな記事スライドショーを設置していきます。

affinger6でトップページにサムネイルスライドショーを設定した場合

手順としては、AFFINGER設定を変更するだけです。


  • step.1

    管理画面AFFINGER管理」をクリックします。

    wordpress管理画面「AFFINGER管理」

    AFFINGER管理のヘッダー下/おすすめ」の設定を開いてください。

    affinger管理の「ヘッダー下/おすすめ」の設定

    ヘッダー下/おすすめの設定ページにある、「サムネイルスライドショー」の項目で「フロントページ」もしくは「全ページ」のどちらかにチェックを入れます。

    affinger6の「サムネイルスライドショー」の設定

    そうすると、各記事のサムネイル画像と記事タイトルがスライドで表示されるようになります。

    affinger6で「サムネイルスライドショー」の設置した状態

    綺麗に整っていますね。これもアクセントとしては使いやすいパーツです。

    基本の設定は、これだけで完了です。


  • 【カスタマイズ内容】

    そのほかの項目は、各種設定ですので、好みに応じてカスタマイズしてみてください。

    affinger6サムネイルスライドショーの各種設定

    ↑で「表示数」とあるのは、「PC、タブレット、スマホ」の時のそれぞれのスライドの数です。

    例えば、「4,3,1」に変更すれば、パソコンの時に4つ表示されるようになります。

    とはいえ、「5,3,1」が大きさ・デザイン的に丁度良いと思うので無理に変える必要はないかなと思います。


以上で、サムネイルスライドショーの設定は完了です。

きつねコード

これもよくある綺麗な形なので使えますね!

AFFINGER6スライドショーの設定方法④任意の記事内でスライドショーを設置する場合

4つ目は、記事の中でスライドショーのパーツを設置するやり方です。

affinger6で記事内でスライドショーを設定した場合

手順としては、クラシックモードでショートコードを呼び出すだけです。


  • step.1

    まずは、任意の記事の編集ページを開いてください。

    スライドショーを入れたい場所で「ブロックを追加」をクリックします。

    affingerの任意の記事内でブロックを追加する

    「クラシック」と検索して、クラシックブロックを呼び出しましょう。

    今回使う"スライドショー"のパーツは、クラシックモード(古いタイプの編集モード)でしか利用できないので、クラシックを呼び出して使います。

    affinger6で「クラシック」ブロックを使う

    「クラシック」を呼び出すと、下のようになります。

    affinger6のブロックエディターの中で、クラシックを呼び出す

    ブロックエディターの中で、部分的にクラシックを使っているという形となります。この使い方を覚えると出来ることが増えるので、ぜひマスターしましょう!

    クラシックでは、さまざまなパーツを使うことができます。今回利用するのは、
    タグ」≫「記事一覧/カード」≫「カテゴリー記事一覧スライドショーです。クリックしましょう。

    affinger6でカテゴリー記事一覧スライドショーを使う

    そうすると、このようにショートコードが追加されます。特に編集する必要性はないので、このまま保存して確認してみましょう。

    affinger6でカテゴリー記事一覧スライドショーを使う

    きちんとスライドショーとして綺麗に表示されていますね!

    affinger6でカテゴリー記事一覧スライドショーを表示した状態

    この方法ならば、記事編集ができる場所ならばどこにでもスライドショーを表示させることができます。


  • 【カスタマイズ内容】

    ショートコードをカスタマイズしたい時には、

    用意されている項目の"この部分"

    この点々の間に、定められた命令を記述することによって設定を変えることができます。

    お作法にのっとって、お好みでカスタマイズを行なってみてください。

    こちらが初期状態のショートコードです↓

    [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=""]

    スライドショーのカスタマイズ内容はそれぞれ下記の通りです。

    設定(初期設定)説明
    cat="0"どのカテゴリーの記事を出すか選べる
    "0"なら全て。カテゴリーID1と3と4を出したいなら"1,3,4"
    page="5"取得する記事数
    10記事出したいなら、"10"
    order="desc"取得する記事を「昇順」で取るか「降順」で取るか
    昇順(新しい順)なら"desc"、降順(古い順)なら"asc"
    orderby="id"取得する記事を「ID投稿日更新日ランダム」のどの基準で取得するか
    IDなら"id"、投稿日なら"date"、更新日なら"modified"、ランダムなら"rand"
    child="on"取得する記事に「子カテゴリー」を含めるかどうか
    含めるなら"on"、除外したいなら"off"
    slide="on"スライドするかどうか
    通常は"on"、スライド止めるなら"off"
    slides_to_show="3,3,1"一度に見せる枚数「パソコン、タブレット、スマホ」の順に呼応
    "3,3,1"ならば、パソコン表示では3つ、スマホ表示なら1つという意味
    例えば"4,3,1"に変えれば、パソコンで4つ表示される
    slide_date=""日付を表示するかどうか
    表示するなら空欄もしくは"on"、非表示なら"off"
    slide_more="ReadMore"もっと見るボタンのテキスト
    英文字でも日本語でも変更可。"もっとみる"など。
    slide_center="on"スマホ表示時に、スライドをセンター寄せにするかどうか
    "on"だとセンターに寄せてカードを小さく表示、"off"だとカードを大きく表示
    fullsize_type=""カードをどう見せるか
    "card"なら画像のみ、"text"なら画像と記事タイトル、空欄なら全部見せ

以上で、記事内でのスライドショー設置は完了です。

きつねコード

affinger6だと「固定ページを1枚作ってそれをTOPページに入れる」なんてこともできるので、その時にも使えますね。

AFFINGER6スライドショーの設定方法⑤ウィジェットでサイドバー・記事下などにスライドショーを設置したい場合

5つ目は、サイドバーや記事下やフッターなどにスライドショーを設置するやり方です。

例えば、サイドバーに入れるならこんな感じになります↓

affinger6でサイドバーにスライドショーを設定した場合

手順としては、①スライドショーのショートコードをコピーして、②任意の場所のウィジェットに貼り付けるだけです。


  • step.1

    どこでも良いので記事の編集ページを開き、「カテゴリー記事一覧スライドショー」のショートコードを呼び出してください。それを、全文コピーします。

    affingerのカテゴリー記事一覧スライドショーのショートコードをコピー

    次に、管理画面「外観」≫「ウィジェット」をクリックします。

    wordpress管理画面「外観」の「ウィジェット」

    AFFINGERカスタムHTML」のブロックを、任意のお好きな場所へと挿入しましょう。

    affingerのカスタムHTMLをウィジェットに入れる

    カスタムHTMLに、先ほどコピーしたショートコードをそのまま貼り付けてください。

    affingerカスタムHTMLにスライドショーのショートコードを貼り付ける

    この状態でサイトを確認してみると、初期設定のままなのでカードが3枚出てしまっています。(パソコンで見た場合)

    affingerでサイドバーにスライドショーを追加した状態。

    もう一度ウィジェット画面を開いて、「slide_to_show」の設定を"1,1,1"へと変更しましょう。

    この数字は、「パソコン・タブレット・スマホ」のカード表示数と呼応するのでしたね。

    affingerサイドバーのスライドショーのショートコードを修正する

    これで確認してみると、きちんと1枚のスライドショーになっているので完成です。

    affingerでサイドバーにスライドショーを入れた状態

    そのほかのカスタマイズ項目に関しては、設定方法④で説明した通りですので自由に設定を修正してください。

    ウィジェットを利用すると、ほぼどこにでもスライドショーを出せるということです。

    スライドショーだけではなく、ショートコードが効くパーツはなんでも使えるのでぜひ覚えておくと良いでしょう。


以上で、ウィジェットでのスライドショー設定は完了です。

きつねコード

これで5パターン紹介しました!

ご覧の通り、アフィンガーでは結構いろいろとカスタマイズできるので好きなやり方を試してみてください!

関連記事
affinger6の使い方入門ガイド
初心者でも使いこなす!AFFINGER6の使い方・初期設定入門ガイド

この記事でわかること Affinger6の初期設定の全て Affinger6の基本の使い方 効率的にAffinger6に慣れるためのコツ この記事を書いているき ...

Affinger6のスライドショーが表示されない場合

最後に、もし設定してもスライドショーが表示されない場合には、設定が間違っていないかもう一度確認してみてください。

特に、存在しないカテゴリーIDを入れていないか、全角数字や全角の記号を使っていないか、きちんとカンマ区切りでカテゴリーを入れているか、などチェックしてみてください。

また、TOPページのスライドショー機能を全て併用することは仕組み上できません。

管理画面にも注意書きがありますが、

記事スライドショー設定 > ヘッダーコンテンツ設定 > ヘッダー画像エリアのウィジェット > ヘッダー画像(画像スライドショー)

この順番で優先表示されますので、複数設定したとしても実際に出てくるのは一番左に当たる項目だけです。

まとめ

Affinger6でのスライドショーの設定は、うまくできましたでしょうか?

有料テーマらしく、とても素敵な機能ですよね。

デザインとしてもオシャレになりますし、クリックされればサイトの回遊率も上がります。

重くなりすぎないようにだけ気をつけながら設置してみてください。

まとめ

  • Affinger6でスライドショー機能は主に5パターンの使い方がある
  • TOPページに表示するには、管理画面「AFFINGER設定」の「ヘッダー」もしくは「ヘッダー下/おすすめ」に設定がある
  • 記事ページ内で表示するには、クラシックモードの「カテゴリー記事一覧スライドショー」を使用する
  • サイドバー・フッターなどで表示するには、ショートコードをコピーしてウィジェットに貼り付ける

Affinger6専用プラグインで収益を次の段階へ

\ きつねコードも使ってます!6/30までセール中!/

Affingerタグ管理マネージャーとPVモニターのセット

※インフォトップから購入できます。29880円セールにつき24800円

タグ管理マネージャーとPVモニターの活用方法はこちら>>

おすすめテーマランキング[PR]

【第1位】AFFINGER6 ¥14,800円

affinger6バナー

正直、万人向けとは言えないが、「稼ぐサイトを作りたい人」はこのテーマが良い。収益化をサポートするための仕掛けが本当に良く出来ているので、使いこなせれば無双状態に。カスタマイズ自由度もMAXなので個性も出せる。当サイトで利用中。もちろんSEOにも強い。

【第2位】swell ¥17,600円

こちらは万人向け。いま一番売れてる有料テーマ。多機能ながらも直感的な操作ができるので、「とにかく使いやすい」。初心者〜上級者にも愛用され、導入してすぐオシャレなサイトになる。SEOにも強くバランスが良いと言える。

【第3位】Cocoon 無料

cocoonバナー

一言で言えば「コスパ最強」。なんでこれが無料?必要十分な機能で、シンプルなので初心者にもgood。費用をかけずとりあえずサイトを始めたい人に最適。ゼロからサイトを作る人は、レンタルサーバーの「Xサーバー」で、wordpressクイックスタート機能というのを使うのがおすすめ。即cocoonサイトができる。2個目のブログにも。

  • この記事を書いた人

きつねコード

webディレクター/プログラマー。 web系の経験が10年以上あり、webサービスの立ち上げやメディア運営などをやっていました。若い時に起業していた時期もあるので、守備範囲は結構広めです。パソコンが苦手な人からの質問も受けるので、参考になればとの想いで当ブログを始めました。

PICK UP!

wordpressのおすすめテーマはこれ 1

結論:私がおすすめするWordPressテーマはこれ! 最初に、結論をお伝えすると 私が本気でおすすめしているのは「Affinger6」というテーマになります。 ...

ラッコキーワードの使い方を徹底解説! 2

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

現役ブロガーがAFFINGER6を徹底評価 3

この記事でわかること Affinger6のどこが良いのか 実際に使っていて感じるAffinger6のメリットとデメリット Affinger6のデメリットを相殺す ...

-Affinger, ブログ・wordpress運営
-, ,