PR AFFINGER6 ブログ運営

AFFINGER6で記事スライドショーを設置する方法を画像と動画で徹底解説!【初心者さん向け】

2023年10月29日

字幕動画解説

AFFINGER6で記事のスライドショーを設置したいんだけどどうやってやるんだろ…
後輩ネコ
後輩ネコ
とのぽん
とのぽん
ぜひ読んでほしい記事、関連するカテゴリーの記事をスライドショーで載せておくとサイトの回遊率が上がってPV数向上が期待できるしぜひ設置してみたいところだよね。

AFINGER6では以下のような記事スライドショーを投稿・固定ページの自由な場所に設置することができます。

AFFINGER6記事スライドショー

AFFINGER6 ブログ運営

2024年4月24日

【ブログアフィリエイト即戦力8大特典あり!】AFFINGER6初心者さん向けレビューでおすすめポイントを確認!

ブログアフィリエイトを強力に後押しする8大独自特典付きAFFINGER6レビューを大公開!自身の経験をもとにSEO効果など具体例を挙げて初心さん向けに優しく解説しています!

ReadMore

ブログ運営

2024年4月24日

【お友達5000円以上割引】エックスサーバーで超お得にサーバー契約&ドメインを取得する方法を解説!

お友達紹介プログラムを利用してエックスサーバーを超お得な割引価格で契約する方法と独自ドメインを永久無料で取得する方法を画像を使って徹底解説!キャンペーン時にはお友達紹介プログラムの倍の報酬でさらにお得になるセルフバックの方法も合わせて解説!

ReadMore

ブログ運営 ワードプレス 悩み

2024年4月24日

【ブロガー100人アンケート】ブログの収益化は何記事・何か月で出来る?現実とノウハウを徹底分析!

収益化にかかる期間はどれくらい?何記事で出来るの?ブロガー100人アンケートの結果と実体験から徹底的に分析!

ReadMore

ブログ運営 ワードプレス

2024年4月24日

【初心者必見】ワードプレスの無料テーマと有料テーマ、メリット・デメリットを徹底解説

ワードプレスで作ったサイトの見た目をガラッと変える『テーマ』には有料と無料が存在。それぞれのメリット・デメリットについて初心者さん向けに分かりやすく徹底的に解説します。

ReadMore

ブログ運営 ワードプレス

2024年4月24日

【戦略】ブログの方向性(3つのWHAT)とキーワード選定方法

漠然とブログを始めてみたいと思っている方はどんなジャンルで記事を書いていこうかということがまだ定まっていないかもしれません。 かく言う私もブログを最初に始めた時は、とりあえず始めてみてなんでもいいから興味のあることを記事にしたり、買った商品のレビュー記事を書いていました。 そのようないわゆる『雑記ブログ』でも稼げるようにはなるのですが、ある程度ブログの方向性を決めておくと稼げるようになるまでの時間が早かったり最終的な収益額も多くなることがあります。 というわけで今回の記事ではブログの方向性を決めるための3 ...

ReadMore

ブログ運営

2024年4月24日

キーワードプランナーを無料で使う方法を画像と動画で徹底解説!【初心者必見】

キーワードプランナーを無料で使う方法を画像と動画を使って初心者さん向けに優しく詳しく解説!

ReadMore

※自動でスライドするのはAFFINGER6EX版のみの機能

と言うわけで、今回の記事ではAFFINGER6を使っているサイト・ブログで記事スライドショー設置する方法を画像と動画を使って初心者さん向けに優しく詳しく解説してみたいと思います。

解説ポイント

  • 特定の記事をスライドショーで表示する方法
  • 特定のカテゴリーの記事をスライドショーで表示する方法

特定の記事をスライドショー表示する方法

  • 『AFFINGER:記事一覧(ID)』ブロックを埋め込む
  • 記事IDを指定
    • 複数の場合は半角カンマで区切る
  • スライドショーをONに設定
  • スライド表示数を指定
  • 日付表示の有無を設定
  • READMORE設定
  • モバイル中央揃え設定
  • スライドタイプ設定

まずは、AFFINGER6で特定の記事を選択して記事スライドショーとして表示させる方法を解説していきます。

この方法の場合、個別の記事IDを指定した上でスライドショーにするので少しだけ面倒ではあります。

ただブログのキラーコンテンツ的などうしても読んでもらいたい記事を目につく形で表示できるというメリットがあります。

また、ランキング設定によって順位ラベルが表示されるので人気記事ランキングをスライドショーで表示させるといったことも可能です。

それでは詳しく見ていきましょう。

『AFFINGER:記事一覧(ID)』ブロックを埋め込む

記事の作成ページを開いたら

  • 段落ブロック右の『+』マークをクリック
  • 『すべて表示』をクリック
  • 『ブロック』の『AFFINGER』ブロックのところまでスクロール
  • 『AFFINGER:記事一覧(ID)』をクリック

※上図参照

のように操作していきましょう。

記事IDを指定

『AFFINGER;記事一覧(ID)』ブロックが記事内に挿入出来たら、『AFFINGER;記事一覧(ID)』ブロックをクリックして『設定』をクリックします。

続いて、『記事ID』にスライドショーに表示させたい記事のIDを入力(複数ある場合は半角カンマ『,』で区切って入力)します。

記事IDについて

記事ID

記事IDは投稿の記事一覧ページの記事タイトル横『ID』に記載されています(上図参照)。

スライドショーをONに設定

続いて『スライドショー』をクリックしてONにしましょう。

この段階でデフォルト状態の記事スライドショーが表示されます。

スライド表示数を指定

スライドショーをONにすると『スライド表示数』という設定項目が出現します。

デフォルトでは『3,3,2』となっていて、これはスライドショーを表示させる画面に応じた記事の列数を表しています。

スライド表示数は左から、

  • 大画面(960px以上、主にPC)
  • 中画面(600px~959px、主にタブレット)
  • 小画面(599px以下、主にスマホ

の列数の設定ができます。

列数の設定はいずれも1~3までとなっています。

デフォルトの(3,3,2))の指定ならPCで3列、タブレットで2列、スマホで2列表示といった具合に記事スライドショーが表示されます。

スマホは表示する画面が小さくなりがちで記事のアイキャッチがかなり小さく表示される場合があるため、デフォルトの2列ではなく1列にしてもいいでしょう。

日付表示の有無を設定

『日付』はスライドショー内の記事に投稿日を表示するか否かの設定ができます。

お好みでON・OFFの設定をしましょう。

READMORE設定

『READMORE』はスライドショーの記事下のボタンに表示する文章を変更できます。

デフォルトでは『READMORE』がボタンに表示されます。

上の画像にあるように『続きを読む』などお好みの文章に変更してみましょう。

モバイル中央揃え設定

『モバイル中央揃え』ではスマホで記事スライドショーを表示した際に中央揃えにするかの設定が可能です。

列数が少ない設定の場合、大きめの画面のスマホで表示させると左に偏って見栄えが悪くなるのでONにしておいてもいいでしょう。

スライドタイプ設定

『スライドタイプ』では

  • デフォルト(アイキャッチ+記事タイトル+一部記事抜粋+READMOREボタン)
  • 画像のみ(アイキャッチのみ)
  • 画像のみ+タイトル(アイキャッチ+記事タイトル)

のように記事スライドの表示タイプ設定が可能です(上の画像参照)。

ランキング設定

AFFINGER;記事一覧(ID)ブロックによるスライドショー表示では『ランキング』のラベルを表示することが可能です。

『ランキング』をONにすると上の画像にあるようにランキングラベルが表示されます。

特定カテゴリーの記事をスライドショー表示する方法

  • 『AFFINGER:カテゴリー記事一覧』ブロックを埋め込む
  • 記事カテゴリーを指定
    • 指定カテゴリーに除外したい子カテゴリーがあれば除外カテゴリーも指定する
  • スライドショーをONに設定
  • 『ページ』で表示させる記事の数を指定
    • 表示数上限は10記事
  • 並べ替え設定
    • 投稿ID
    • 日付
    • 更新日
    • ランダム
    • コメント数
    • タイトル
    • スラッグ
  • 昇順・降順の設定
    • 並べ替え設定でランダム以外を選択した場合に適用
  • 子カテゴリーを含めて表示するか設定
  • スライド表示数を指定
  • 日付表示の有無を設定
  • READMORE設定
  • モバイル中央揃え設定
  • スライドタイプ設定

続いて、AFFINGER6で特定のカテゴリーの記事をスライドショーとして表示させる方法を解説していきます。

こちらは記事カテゴリを指定するだけで並べ替え設定と昇順・降順設定に従った記事が自動でスライドショー表示されます。

並べ替え設定でランダムを設定した場合のみページ更新でカテゴリー内の任意の記事が表示されます。

それでは詳しく見ていきましょう。

上の工程表の⑧以降は『特定の記事をスライドショー表示する方法』の④~⑧と全く同じなため割愛します。

『AFFINGER:カテゴリー記事一覧』ブロックを埋め込む

記事の作成ページを開いたら、

  • 段落ブロック右の『+』マークをクリック
  • 『すべて表示』をクリック
  • 『ブロック』の『AFFINGER』ブロックのところまでスクロール
  • 『AFFINGER:カテゴリー記事一覧』をクリック

※上図参照

のように操作していきましょう。

記事カテゴリーを指定

『AFFINGER;カテゴリー記事一覧』ブロックを挿入できたら、『AFFINGER;カテゴリー記事一覧』ブロックをクリックして『設定』をクリックします。

続いて、『カテゴリー』から記事スライドショーに表示させたい記事カテゴリーを選択しましょう。

カテゴリーを選択しない場合は全ての記事の中から記事が選択されます。

記事に表示させたくないカテゴリーがある場合は『除外カテゴリー』から選択しておきましょう。

スライドショーをONに設定

『スライドショー』をONにすると、デフォルトの状態のカテゴリー記事一覧のスライドショーが表示されます(上の画像参照)。

『ページ』で表示させる記事の数を指定

『ページ』では1~10の数字を入力することで記事スライドショーに表示させる記事のページ数を指定できます(上の画像参照)。

並べ替え設定

『並べ替え』では

  • 投稿ID
  • 日付
  • 更新日
  • ランダム
  • コメント数
  • タイトル
  • スラッグ

スライドショーに表示する記事を並べ替えることができます。

昇順・降順の設定

『昇順・降順』では『並べ替え』で指定した並び順の昇降を設定できます。

例えば、『並び替え』で『日付』を指定し、『昇順』を指定した場合はスライドショーに表示される記事の投稿日が左から右に向かって新しくなっていきます。

子カテゴリーを含めて表示するか設定

『子カテゴリーを含む』は指定した記事カテゴリーに子カテゴリーがある場合、それを含むか否かを設定できます。

OFFにすると、除外カテゴリーで指定した場合と違って子カテゴリーすべてが一括で非表示になることに注意しましょう。

以上で、特定カテゴリーの記事一覧をスライドショー表示する方法の解説は終了です。

AFFINGER6で記事スライドショーを表示させる方法まとめ

  • 特定の記事をスライドショー表示する方法⇒『AFFINGER:記事一覧(ID)』ブロックを埋め込む
  • 特定カテゴリーの記事をスライドショー表示する方法⇒『AFFINGER:カテゴリー記事一覧』ブロックを埋め込む

今回の記事ではAFFINGER6で記事スライショーを表示させる方法として、上記2つの方法をご紹介してみました。

ユーザーに読んでもらいたい記事を視覚的にわかりやすく表示させるスライドショーは回遊率・滞在時間アップにもつながります。

ぜひみなさんも設置してみてください。

スライドショーが表示できた…!これでボクの記事がたくさん読まれるかも。
後輩ネコ
後輩ネコ
とのぽん
とのぽん
スライドショーは目を引くからたくさん記事を見てもらえそうだね!
  • この記事を書いた人
  • 最新記事

とのぽん

ブログアフィリエイトで月収10万円達成ブロガー。 ネコとお酒が好きなアラフォーサラリーマンのとのぽんです。 メインは資産ブログ形成ノウハウの発信ですが、その他40代ならではの悩みをみなさんと共有して解決していければと思います。

-AFFINGER6, ブログ運営
-,