AFFINGER

【簡単】AFFINGER5のスライドショーを設置・カスタマイズする方法

【簡単】AFFINGER5のスライドショーを設置・カスタマイズする方法
ごー

こんにちは、ごー(@goo2929)です!

AFFINGER5でおしゃれな記事スライドショー(スライダー)を設置したい…。トップページとか記事の中とかいろいろな場所に設置する方法を教えて!

困っている人

このような悩みを解決します。

最初に結論から言うと、この記事を読めば下記のような記事スライドショーを自由自在に扱えるようになります。

2021-07-17

【6ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

圧倒的に集客できるSEOキーワード選定は5ステップ【選び方のコツ】

2021-07-17

圧倒的に集客するSEOキーワード選定のやり方5ステップ...

ブログは資産になる?資産化できるブログの作り方を5ステップで解説

2021-07-17

ブログは資産になる?資産化できるブログの作り方を5ステ...

副業ブログに向いていない人の特徴13個【まずは行動力だけあればOK】

2021-07-17

副業ブログに向いていない人の特徴13個【まずは行動力だ...

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した筆者が解説】

2021-07-17

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した...

【完全版】ブログの書き方マニュアル|読まれる記事を書くコツ10選

2021-07-17

【完全版】ブログの書き方マニュアル|読まれる記事を書く...

2021-07-17

【5ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

カスタマイズ方法も紹介するので、一緒におしゃれなスライドショーを作ってみましょう!

【ブログ初心者向け】AFFINGER5の徹底レビュー&特典つき購入方法!
【おすすめ特典あり】AFFINGER5の徹底レビュー&購入方法!

続きを見る

記事スライドショーにはどんな効果があるの?

記事スライドショーを使うとどんな効果があるの?
記事スライドショーにはどんな効果があるの?

最初にサクッと記事スライドショー(スライダー)を使うべき”理由”について認識しておきましょう!

その理由は主に3つです。

  • たくさんの情報を与えられる
  • 見た目がおしゃれ
  • →結果、回遊率がアップする

たとえば下記をご覧ください。

2021-07-17

【6ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

圧倒的に集客できるSEOキーワード選定は5ステップ【選び方のコツ】

2021-07-17

圧倒的に集客するSEOキーワード選定のやり方5ステップ...

ブログは資産になる?資産化できるブログの作り方を5ステップで解説

2021-07-17

ブログは資産になる?資産化できるブログの作り方を5ステ...

副業ブログに向いていない人の特徴13個【まずは行動力だけあればOK】

2021-07-17

副業ブログに向いていない人の特徴13個【まずは行動力だ...

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した筆者が解説】

2021-07-17

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した...

【完全版】ブログの書き方マニュアル|読まれる記事を書くコツ10選

2021-07-17

【完全版】ブログの書き方マニュアル|読まれる記事を書く...

2021-07-17

【5ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

記事スライドショーの最大のメリットはこのように設置するだけでユーザーに対して複数の記事を紹介できることです。

もしもユーザーがブログ内でたくさんの記事を読み、そして記事の内容に満足すればあなたのファンになってブックマークまでしてくれるかもしれません。

ごー

さらにAFFINGERのスライドショーはおしゃれなのでユーザーは気持ちよくあなたのサイトを回遊できますね。

記事スライドショーを設置する4つの方法を紹介!

記事スライドショーを設置する4つの方法を紹介!
記事スライドショーを設置する4つの方法を紹介!

それでは早速記事スライドショー(スライダー)の設置方法を見ていきましょう。

設置するのは以下の4か所です。

※クリックすればそれぞれの設置方法にジャンプします。

画像を使って分かりやすく解説しますね。

記事スライドショーをヘッダー(トップページ)に表示する方法

完成後イメージは↓こんな感じです。

記事スライドショーをヘッダー(トップページ)に表示する方法
記事スライドショーをヘッダー(トップページ)に表示
ごー

トップページに大きく表示されるインパクトのあるスライドショーですね!

設置方法はめちゃくちゃ簡単です。

①「AFFINGER管理」→「ヘッダー」に移動する

「AFFINGER管理」→「ヘッダー」に移動する
「AFFINGER管理」→「ヘッダー」に移動する

②少し下にスクロールして「記事スライドショー設定」をする

細かい設定はありますが、基本的には下記のように設定すればOKです。

少し下にスクロールして「記事スライドショー設定」をする
少し下にスクロールして「記事スライドショー設定」をする

「表示するカテゴリID」の項目はあなたの表示したいカテゴリIDを入力しましょう!

IDはWordpress管理画面の「投稿」→「カテゴリー」で確認できます。

これで完了です。

ごー

めちゃくちゃ簡単ですね!

記事スライドショーをトップページ上部に設置する方法

完成後のイメージは下記のとおりです。

記事スライドショーをトップページ上部に設置する方法
記事スライドショーをトップページ上部に設置する方法

それでは設置方法を見てみましょう!

「AFFINGER管理」→「トップページ」に移動

この後紹介するコードを「挿入コンテンツ」の項目に貼り付けてください。

「AFFINGER管理」→「トップページ」に移動
「AFFINGER管理」→「トップページ」に移動してコード入力

入力するコードは下記をコピペでOKです。

[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]

赤字の部分だけあなたの表示したいカテゴリーIDを入力しましょう!

ちなみにカテゴリーIDを入力しない場合には自動的に新着記事が表示されます。

ごー

後程このコードの中身を少し変えて記事スライドショーをカスタマイズする方法をご紹介します!

ここをクリックすればカスタマイズ方法の解説までジャンプします。

記事スライドショーをウィジェットを使って自由に表示する方法

ここまできたらあとは応用するだけです。

例としてフッターに記事スライドショーを表示してみました。

記事スライドショーをウィジェットを使って自由に表示する方法
記事スライドショーをウィジェットを使って自由に表示する

やり方を解説します。

「外観」→「ウィジェット」に移動する

ウィジェットに移動後、「00_STINGERカスタムHTML」を設置したい項目へドラッグ&ドロップします。

あとは先ほどと同じ下記コードを貼り付けるだけです!

[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]

これで好きな場所に記事スライドショーを設置できるようになりましたね。

ここをクリックすればカスタマイズ方法の解説までジャンプします。

記事スライドショーを記事内に表示させる方法(ブロックエディタ)

最後にブロックエディタを使って記事内にスライドショーを表示させる方法を解説します。

参考は下記のとおりです。

2021-07-17

【6ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

圧倒的に集客できるSEOキーワード選定は5ステップ【選び方のコツ】

2021-07-17

圧倒的に集客するSEOキーワード選定のやり方5ステップ...

ブログは資産になる?資産化できるブログの作り方を5ステップで解説

2021-07-17

ブログは資産になる?資産化できるブログの作り方を5ステ...

副業ブログに向いていない人の特徴13個【まずは行動力だけあればOK】

2021-07-17

副業ブログに向いていない人の特徴13個【まずは行動力だ...

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した筆者が解説】

2021-07-17

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した...

【完全版】ブログの書き方マニュアル|読まれる記事を書くコツ10選

2021-07-17

【完全版】ブログの書き方マニュアル|読まれる記事を書く...

2021-07-17

【5ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

ブロックエディタだとこれが本当に簡単で、先ほど紹介した下記コードを記事に貼り付けるだけでOKなんです。

[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]

それでは次にこのコードを編集してあなた好みの記事スライドショーを作ってみましょう!

記事スライドショーをカスタマイズする方法を解説!

記事スライドショーをカスタマイズする方法を解説!
記事スライドショーをカスタマイズする方法を解説!

それでは記事スライドショーをカスタマイズしていきましょう。あなたのサイトに合ったおしゃれな記事スライドショーを作るためにはこの工程がカギなのでぜひチャレンジしてみてください。

本記事では下記のコードを紹介しました。

[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]

このコードの構成を詳しく見てみましょう。

見出しテキスト

  • 「cat=""」:表示するカテゴリーID(未入力で新着記事)
  • 「page=""」:スライドさせる記事数
  • 「order=""」:日付順(新しいものから順は"desc"、古いものから順は"desc")
  • 「orderby=""」:並び方法(投稿IDは"id"、ランダムは"rand"など)
  • 「child=""」:子カテゴリID
  • 「slide=""」:スライドさせるか選択(onかoff)
  • 「slides_to_show="3,3,2"」:画面を見た時の表示数(1番初めの3のみ変更する)
  • 「slide_date=""」:日付を表示させるか選択(onかoff)
  • 「slide_more=""」:カード下に表示する文字("Read more"や”続きを読む”など)
  • 「fullsize_type=""」:画像のみ表示(”card”)、画像とテキスト表示("text")を選ぶ。空欄の場合はすべて表示。

上記を応用すると下記のように画像が並ぶ記事スライドショーを作ることもできます。

AFFINGER5のメリット・デメリット|まとめ

2021-07-17

【簡単】ブログ初心者が最初の5記事を書くまでの3ステップを解説!

2021-07-17

2021-07-17

【2ヶ月目】初心者ブロガーの運営報告|収益、PV数、やったことを紹介

2021-07-17

【これでOK!】ブログ初心者におすすめのASP11選を徹底解説!

2021-07-17

【神】徹底レビュー!AFFINGER6の詳細や導入方法を紹介!

2021-07-17

副業ブログに向いていない人の特徴13個【まずは行動力だけあればOK】

2021-07-17

この表示のコードはこんな感じです。(変更部分のみ赤字)

[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="rand" child="on" slide="on" slides_to_show="6,3,2" slide_date="" slide_more="" fullsize_type="card"]

このようにコード内を少し編集するだけで全く違う記事スライドショーとなります。

特に「fullsize_type=""」の部分は記事スライドショーの見た目を変える大切な項目なので、色々試してあなたに合った表示をさせましょう。

ごー

ユーザーに何を届けたいのかを考えるのが1番大切です!

おしゃれな記事スライドショーの設置方法|まとめ

おしゃれな記事スライドショーの設置方法|まとめ

本記事の内容をマスターすれば記事スライドショーを自由自在に作成することができます。

ブログによって最適な表示は異なるので、あなたに合った記事スライドショーを試行錯誤しましょう。

ごー

覚えればかなり作業効率が良くなるので、ぜひ本記事をブックマークして繰り返し練習してみてください。

今回は以上です。

AFFINGER5公式HPはこちら

-AFFINGER
-,