AFFINGER 副業ブログ関連

スライドショーは1分で簡単設定〜ブログのレベルUPにも![AFFINGER6]

webを見ていると、スライドショーが設定しているHPをよく見かけます。

なぜかというと、スライドショーのような動きがあるだけで、HPをみている方を引きつける効果があるからです。

便利です。スライドショー。

 

しかもスライドショーがあるだけでブログの「みためレベル」もUP!

正直、こんな便利なアイテム「スライドショー」を使わないのはもったいないです。

 

「スライドショーの設定をしたいけど、何だか設定が難しそう・・・。」これまたもったいないです。

実は、AFFINGER6なら1分ぐらいで簡単に設定ができちゃいます!

 

今回は、AFFINGER6でのスライドショーの設定方法を記事にします。

 

この記事で解決できる悩み

  • スライドショーでHPに動きをつけたい。
  • HPに来てくれた人が、すぐ居なくなるのを防ぎたい。
  • HPの見た目レベルをあげたい!

 

AFFINGER6でスライドショーは2パターンある!

AFFINGER6でのスライドショーは2パターンあります。

TOPページ上部に表示させる「ヘッダー記事スライドショー」と、ページ内どこでもつけられる「カテゴリー一覧スライドショー」です。

「カテゴリー一覧スライドショー」は、ブログ下部分(フッター)に定型として入れても記事内の途中に入れても、どこでも設定可能な万能スライドショーです。

 

TOPページデザイン「ヘッダー記事スライドショー」

「ヘッダー記事スライドショー」は、TOPページのデザイン設定にも関わるスライドショーです。

TOPページを開いて、最初に見る事ができる箇所(ファーストビュー)にスライドショーを表示する事ができます。

実は、ページを開いて最初に見る事ができる「ファーストビュー」はとっても大切な部分。せっかくgoogleなどの検索エンジンからサイトに来てくれたとしても、最初に見える箇所がいまいちだと「興味ないサイトだった〜」とサイトからすぐ離れていってしまう可能性があるからです。

これはまずい事態です。

そこで「ヘッダー記事スライドショー」で記事をスライドショーにして、サイトに訪れてくれた方の興味を引く仕掛けをつくっていきます。

 

また「ヘッダー記事スライドショー」の何が便利かというと、勝手に新しい記事をスライドショーしてくれる事です。一度設定すれば、後は設定いらずなので日々ブログを更新している身としてはめちゃくちゃ便利です。

 

記事内どこでもOK!「カテゴリー一覧スライドショー」

カテゴリー一覧スライドショー
ブログの色を2〜3色でまとめたタイトル

オシャレブログに AFFINGER 副業ブログ関連

2022/11/27

ブログの色の組み合わせは2〜3色がおしゃれ!【簡単おすすめ色の決め方】

ブログをおしゃれデザインにしたいけど、どうすればいいのかお悩みの方へ。 ブログを簡単におしゃれにする一つの方法は「色を2〜3色でまとめる」ことです。 ブログをオシャレにするのには、色を変えるのが一番簡単で効果的。   カラフルな色づかいも素敵ですが、カラフルな色づかいは使い方を間違うと、全体のまとまりがなくなり、結局伝えたい情報が伝わらないブログに仕上がる可能性があります。 実は、カラフルな色づかいをしているブログ・サイトは計算しつくして色を使ってます。   簡単で効果的ですが、悩まし ...

ReadMore

AFFINGER6ブロックエディタで使えるパーツ

オシャレブログに AFFINGER 副業ブログ関連

2022/11/27

AFFINGER6ブロックエディタで簡易設定できるパーツ

AFFINGER6のブロックエディタ(グーテンベルク)ってどんな記事パーツが使えるのか?結構気になるところですよね。 そこで自分、AFFINGER6のブロックエディタ(グーテンベルク)の記事パーツの抜粋一覧を作成してみました。 本当に一部です。なぜって、AFFINGER6のブロックエディタ(グーテンベルク)は組み合わせで、とんでもないパターンが作成できるからです。 (ぼう然とするほど)パーツパターンがあるため、思い切って色々省略していますが「AFFINGER6のブロックエディタは、こんなパーツで記事が書け ...

ReadMore

アフィンガーを使った感想

AFFINGER 副業ブログ関連

2022/10/23

「アフィンガー6はできることがおおい?」3年間使った感想のまとめ[特典付き]

  有名ワードプレステーマ「アフィンガー6」。 高収入アフィリエイター(ブログで稼いでいる人)のおおくは「アフィンガー6」を使用しています。 「でもなんで?」って疑問に思いますよね。 自分も「アフィンガー6」を使う前までは、なぜプロ達は「アフィンガー6」を好んで使用するのか謎でした。 そこで「なぜ?」と思われている方に少しでも参考になればと思い、自分が3年間アフィンガー6を使った感想を書きたいと思います。   目次【実体験】アフィンガー6は出来ることがおおいって本当?カスタマイズできる ...

ReadMore

Canbaでアイキャッチ画像を作成

オシャレブログに 副業ブログ関連

2022/11/27

無料ツールでブログのアイキャッチ画像を5分で作成![簡単デザインアプリCanba]

ブログを作成していて、アイキャッチ画像がどうにも上手く作成できないお悩みに。 デザインソフトも高いし、記事に合う画像を選ぶのも大変。   (自分は0スタートからでも副業ブログを作成できるよう手助けサイトを運営しているので、) 現役デザイナーでも納得できるような、ハイグレードな無料デザインツールがないかな〜とずっと探していました。   結果! 今回、見つかりましたのでご紹介します。 「Canba(キャンバ)」をぜひオススメしたい!   「Canva使ってみた感想は?」というと、 ...

ReadMore

All-in-One WP Migrationの使い方

副業ブログ関連

2022/11/1

もしもの時の備えバックアッププラグイン「All-in-One WP Migration」の使い方[ワードプレス]

副業ブログで日々黙々と頑張る日々。 そんな今までの頑張りを「無」にするような不具合が起きた時の、もしもの備えはできてますか?   自分は関係ないや!なんて人ごとではありません! 自分では予期できなかった事態は急におこるものです。   不具合がおきた時に、今までの汗と涙の結晶のブログデータが吹っ飛んでしまう・・・。 頭の中が真っ白になり、「背筋に冷や汗が流れるってこういうことか〜」という事は誰にでも起こります。   自分はそんな怖い経験をしたコトがあるので、今回ご紹介するバック ...

ReadMore

 

「カテゴリー一覧スライドショー」は、記事内でも、どこでも設定可能です。(記事内の途中に「スライドショー」をする事もできちゃいます。)

AFFINGERでのスライドショーは、ブログ内の全てのカテゴリーを選択すれば全ての最新記事をスライドショーする事ができます。

また逆に、一部のカテゴリーのみ選択すれば余計な記事はスライドショーしなくなります。

便利ですね。

(しかも「カテゴリー一覧スライドショー」は、設定するごとにカテゴリー選択などの設定が可能です。)

 

ところでカテゴリーとは何?

「カテゴリー」って何だ?というと、ご自身で設定している記事のカテゴリーの内容の事です。

当ブログのんどりデザインの特典サイト「SKY」でのカテゴリーでいうと、「フットネス」「ランニング」などです。

 

ではさっそく、設定をしていきます。

 

AFFINGER6でのスライドショーの設定方法

「ヘッダー記事スライドショー」設定方法

トップページのメインスライドショーを設定していきます。

step
1
「AFFINGER管理」> 「ヘッダー」

ワードプレスメニューの「AFFINGER管理」> 「ヘッダー」をクリック。

 

step
2
「記事スライドショー設定」項目で設定

  1. 「記事スライドショー設定」の項目で設定します。
  2. 「ヘッダーに記事をスライドショーで表示する」にチェックを入れます。
  3. 「表示するカテゴリーID」を入れます。

カテゴリーIDはどこで確認する?

  1. ワードプレスメニューの「投稿」> 「カテゴリー」をクリック。
  2. 設定画面右側に「カテゴリー名」とカテゴリー名の「ID」が表示されています。これが、スライドショーで表示したい「カテゴリーID」です。

(※TOPページのメインスライドショーなので「未分類」以外はスライドショーをする事をオススメします。)

最後に「Save」ボタンをクリックして設定を保存します。

これでOK!

後はお好みで追加で設定していきます。

[自分が好んで使う設定]

  • スライドショーの表示方法 > > > 右から左(やはり右から左が違和感なく自然です。)
  • スライドショーの表示速度 > > > 5000ミリ秒(初期設定でOK!)
  • 「横並びにする」にチェックを入れています。(次が少し見えた方がワクワク感があるのを期待して、横並びにしています。)

 

「カテゴリー一覧スライドショー」設定方法

カテゴリー一覧スライドショー
ブログの色を2〜3色でまとめたタイトル

オシャレブログに AFFINGER 副業ブログ関連

2022/11/27

ブログの色の組み合わせは2〜3色がおしゃれ!【簡単おすすめ色の決め方】

ブログをおしゃれデザインにしたいけど、どうすればいいのかお悩みの方へ。 ブログを簡単におしゃれにする一つの方法は「色を2〜3色でまとめる」ことです。 ブログをオシャレにするのには、色を変えるのが一番簡単で効果的。   カラフルな色づかいも素敵ですが、カラフルな色づかいは使い方を間違うと、全体のまとまりがなくなり、結局伝えたい情報が伝わらないブログに仕上がる可能性があります。 実は、カラフルな色づかいをしているブログ・サイトは計算しつくして色を使ってます。   簡単で効果的ですが、悩まし ...

ReadMore

AFFINGER6ブロックエディタで使えるパーツ

オシャレブログに AFFINGER 副業ブログ関連

2022/11/27

AFFINGER6ブロックエディタで簡易設定できるパーツ

AFFINGER6のブロックエディタ(グーテンベルク)ってどんな記事パーツが使えるのか?結構気になるところですよね。 そこで自分、AFFINGER6のブロックエディタ(グーテンベルク)の記事パーツの抜粋一覧を作成してみました。 本当に一部です。なぜって、AFFINGER6のブロックエディタ(グーテンベルク)は組み合わせで、とんでもないパターンが作成できるからです。 (ぼう然とするほど)パーツパターンがあるため、思い切って色々省略していますが「AFFINGER6のブロックエディタは、こんなパーツで記事が書け ...

ReadMore

アフィンガーを使った感想

AFFINGER 副業ブログ関連

2022/10/23

「アフィンガー6はできることがおおい?」3年間使った感想のまとめ[特典付き]

  有名ワードプレステーマ「アフィンガー6」。 高収入アフィリエイター(ブログで稼いでいる人)のおおくは「アフィンガー6」を使用しています。 「でもなんで?」って疑問に思いますよね。 自分も「アフィンガー6」を使う前までは、なぜプロ達は「アフィンガー6」を好んで使用するのか謎でした。 そこで「なぜ?」と思われている方に少しでも参考になればと思い、自分が3年間アフィンガー6を使った感想を書きたいと思います。   目次【実体験】アフィンガー6は出来ることがおおいって本当?カスタマイズできる ...

ReadMore

Canbaでアイキャッチ画像を作成

オシャレブログに 副業ブログ関連

2022/11/27

無料ツールでブログのアイキャッチ画像を5分で作成![簡単デザインアプリCanba]

ブログを作成していて、アイキャッチ画像がどうにも上手く作成できないお悩みに。 デザインソフトも高いし、記事に合う画像を選ぶのも大変。   (自分は0スタートからでも副業ブログを作成できるよう手助けサイトを運営しているので、) 現役デザイナーでも納得できるような、ハイグレードな無料デザインツールがないかな〜とずっと探していました。   結果! 今回、見つかりましたのでご紹介します。 「Canba(キャンバ)」をぜひオススメしたい!   「Canva使ってみた感想は?」というと、 ...

ReadMore

All-in-One WP Migrationの使い方

副業ブログ関連

2022/11/1

もしもの時の備えバックアッププラグイン「All-in-One WP Migration」の使い方[ワードプレス]

副業ブログで日々黙々と頑張る日々。 そんな今までの頑張りを「無」にするような不具合が起きた時の、もしもの備えはできてますか?   自分は関係ないや!なんて人ごとではありません! 自分では予期できなかった事態は急におこるものです。   不具合がおきた時に、今までの汗と涙の結晶のブログデータが吹っ飛んでしまう・・・。 頭の中が真っ白になり、「背筋に冷や汗が流れるってこういうことか〜」という事は誰にでも起こります。   自分はそんな怖い経験をしたコトがあるので、今回ご紹介するバック ...

ReadMore

クラシックエディターでの設定方法

クラシックエディターを使用されている方向けの「カテゴリー一覧スライドショー」の設定方法です。

step
1
 記事内で「タグ」>「記事一覧/カード」>「カテゴリー一覧」 

記事内で「カテゴリー一覧スライドショー」をしたい場合、スライドショーを入れたい記事内の場所で、「タグ」>「記事一覧/カード」>「カテゴリー一覧」をクリック。

step
2
 記号の羅列で問題なし! 

  1. 記号の羅列に見えるものが表示されます。コレ>>>[ 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="" ]
  2. 記号の羅列でOK!(「下書き保存」をしてから「プレビュー」で確認するとスライドショーが表示されています。

さらに詳しく


[ 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="" ]の意味の説明をします。

お好みで設定してください!基本、初期設定のままでOKですが、色々設定が変えられます。

  • st-catgroup cat="0"→新着記事を表示という意味です。(このままの初期設定でOK)「一部のカテゴリーのみ表示したい場合は、表示したいカテゴリーIDを入れます。カテゴリーIDについて詳しくはコチラ。st-catgroup cat="1,2"」
  • page="5" >>>5記事表示するという事です。(記事数をあまり増やすと読み込みが遅くなるので、5記事程度がいいです。)
  • order="desc">>>「desc」は日付が新しい順(このままの初期設定でOK)
  • orderby="id">>>「id」は投稿ID順です。(このままの初期設定でOK)
  • child="on">>>子カテゴリーを表示するかしないかです。onはする、offはしないです。(初期設定の“on”のままでOK)
  • slide="on">>>「on」はスライドショーにするという指示です。
  • slides_to_show="3,3,1" >>>表示枚数です。(PC版で3枚横並び、タブレット3枚並び、スマートフォン1枚で表示)(このままの初期設定でOK)
  • slide_date="">>>投稿日を表示する設定です。する場合はslide_date="on"(自分は基本していません)
  • slide_more="ReadMore">>>続きを読む部分です。日本語がよければ「slide_more="続きを読む"」に変更。
  • slide_center="on">>>スマホの表示方法です。スマホで両端を見切れるデザインの場合はon、見切れない場合はoff。(自分はonです。)
  • fullsize_type="">>>表示していない場合は、そのままの設定(このままの初期設定でOK)ちなみに、card→画像のみ表示、text→タイトルと画像のみ表示です。

 

 

ブロックエディターでの設定方法

ブロックエディタを使用されている方の「カテゴリー一覧スライドショー」の設定方法です。

step
1
「ブロックメニュー」>「STINGERカテゴリー一覧」を選ぶ 

  1. 記事内の「カテゴリー一覧スライドショー」を表示したいところで、左上のワードプレスロゴ隣の「+」プラスボタンをクリックして、ブロックメニューを表示させます。
  2. 「ブロックメニュー」の中の「STINGERカテゴリー一覧」をクリックします。

step
2
スライドショーの設定をする

スライドショーが表示される場所ができました。

右側に表示されるスライドショーの設定画面で設定をしていきます。

  1. カテゴリID >>> 表示したいカテゴリーIDを入れます。(カテゴリーIDの説明はコチラ
  2. スライドショー >>> ONにします。
  3. スライドショーを選択すると表示される、スライド表示数、日付、ReadMore、モバイル中央寄せなど→初期設定のままでOK

step
3
「プレビュー」で確認する

下書き保存をしてから、「プレビュー」ボタンで確認します。

スライドショーが表示されます。

これで終了です。

 

 

まとめ

今回、ご紹介した「スライドショーは1分で簡単設定[AFFINGER6]」の記事内容のおさらい

記事のまとめ

  • AFFINGER6であれば、スライドショー設定は簡単!
  • 「ヘッダー記事スライドショー」は、HPに来てくれた人の興味を引く事ができる。
  • 簡単設定なのにHPの見た目もレベルUP!
関連記事
サイトマップはブログに必要か?-01
副業ブログにはサイトマップが必要![プラグインサイトマップは自動だから簡単]

続きを見る

お問い合わせフォームはブログに必要?
お問合せフォームはブログに必要?[Googleアドセンス承認をもらうためには必要です!]

続きを見る

-AFFINGER, 副業ブログ関連