AFFINGER5

AFFINGER5(アフィンガー5)のスライドショー表示方法と注意点!

悩める人
「AFFINGER5」にスライドショーを設置したいけど、カスタマイズメニューが分からない。

このような悩みにお答えします。

 

本記事の内容

  • 「AFFINGER5」の各種スライドショー表示方法
  • スライドショーを設置するときの注意点

 

本記事の信頼性

私は「AFFINGER5」を2年半以上使用しており、また現在は専業ブロガーとして活動しています。

 

「AFFINGER5」では、様々エリアにスライドショーを設置することができます。

しかし、有料WordPressテーマの中でも非常に多機能なテーマなので、表示方法が分からないという方もおられるでしょう。

カスタマイズのメニュー位置さえ分かれば簡単に設定を終えられるので、本記事を是非参考にしてくださいね。

 

 

AFFINGER5(アフィンガー5)のヘッダー記事スライドショーを表示する方法

まず、「AFFINGER5」のヘッダー記事スライドショーですが、設置イメージとしては下記の通りです。

ヘッダー記事のスライドショー

ヘッダーメニューの下に、記事がスライドショー形式で表示されます。

なお、スライドショーが表示されるのはトップページのみです。

 

ヘッダー記事スライドショーの表示方法ですが、WordPressのダッシュボードから「AFFINGER5 管理」をクリックします。

AFFINGER5 管理

 

「AFFINGER5」の専用カスタマイズ画面が立ち上がるので、「ヘッダー」のメニューへ遷移します。

「AFFINGER5 管理」のヘッダー

 

ヘッダーのカスタマイズ画面を下へスクロールすると、「記事スライドショー設定」のメニューがあります。

「ヘッダーに記事をスライドショーで表示する」の項目にチェックを入れましょう。

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

 

次に、スライドショーに表示するカテゴリーIDを指定します。

カテゴリーIDの取得方法ですが、WordPressのカテゴリー一覧画面へ遷移すると、ID列があります。

スライドショーに表示したいIDを取得しておきましょう。

カテゴリーのID列

 

カテゴリーIDの取得が完了すれば、「表示するカテゴリID」の項目に、IDを入力しましょう。

もし、複数カテゴリーのIDを表示したい場合は、カンマ(,)区切りでIDを指定してください。

例えば、当サイトの「WordPress」と「アフィリエイト」というカテゴリーの記事を表示したい場合、それぞれIDが「8」と「9」なので、「8,9」と入力します。

表示するカテゴリID

カテゴリーの指定はできますが、記事の指定はできないのでご注意ください。

 

その他、スライドショーの表示エフェクトや速度、矢印のカラーを指定できます。

必要に応じてカスタマイズしてみてください。

トップページに大きく表示される記事スライドショーなので、おすすめのカテゴリーを設定しておきましょう!
はらちゃん

 

AFFINGER5(アフィンガー5)のヘッダー画像スライドショーを表示する方法

「AFFINGER5」では、ヘッダーエリアの下にメインビジュアルとなる画像を設置できます。

ヘッダー画像は複数設定可能であり、下記のようなスライドショー形式で表示することも可能です。

ヘッダー画像のスライドショー

 

まず、スライドショーに表示するヘッダー画像の設定方法から見ていきます。

WordPressのダッシュボードから「外観 > カスタマイズ」をクリックします。

外観 > カスタマイズ

 

カスタマイザー画面が開くので、「ヘッダー画像」のメニューへ遷移します。

カスタマイザー画面の「ヘッダー画像」

 

「現在のヘッダー」の項目の「新規画像を追加」ボタンから、ヘッダー画像を選択してください。

現在のヘッダー

 

選択した後でも、ヘッダー画像は複数指定できるので、「新規画像を追加」ボタンは表示されます。

2枚目以降のヘッダー画像も設定しましょう。

「新規画像を追加」ボタン

 

スライドショーに表示したいヘッダー画像の設定が完了すれば、「アップロード済みヘッダーをランダム表示」ボタンをクリックします。

アップロード済みヘッダーをランダム表示

 

ただし、これだけではヘッダー画像がスライドショーで表示されません。

先述の記事スライドショーでも利用しました「AFFINGER5 管理」画面から、「ヘッダー画像をスライドショーで表示する」にチェックを入れてください。

ヘッダー画像をスライドショーで表示する

最後に「save」ボタンをクリックし、ヘッダー画像がスライドショー形式で表示されれば完了です。

「AFFINGER5」では、ヘッダー画像をリンクとしたり、画像上にボタンを配置できません。

 

AFFINGER5(アフィンガー5)の投稿ページにスライドショーを表示する方法

ここまでご紹介したのは「AFFINGER5」のトップページに表示するスライドショーでしたが、投稿ページに設置することも可能です。

投稿ページのスライドショー設置イメージとしては、下記の通りです。

AFFINGER5

2020/11/10

AFFINGER5(アフィンガー5)のヘッダーエリア全設定項目を解説!

悩める人 「AFFINGER5」のヘッダーデザインはどこまで変更できるの?メニュー位置もいまいち分からない。 上記悩みを解決できる記事となっています。   本記事の内容 「AFFINGER5」にヘッダーロゴを設定する方法 「AFFINGER5」にヘッダーロゴを中央に配置する方法 「AFFINGER5」のヘッダーメニューを設定する方法 「AFFINGER5」のトップページにスライドショーを配置する方法   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、また現在は専業 ...

ReadMore

アイキャッチ画像

THE THOR

2020/11/10

AFFINGER5のフッターをカスタマイズする方法!画像付きで解説!

悩める人 「AFFINGER5」のフッターをどこまでカスタマイズできるのか分からない。 カスタマイズするメニュー位置を知りたい。 このような疑問を解決できる記事となっています。   本記事の内容 「AFFINGER5」のフッターカラーを変更する方法 「AFFINGER5」のフッターメニュー・スマホメニューを表示する方法 「AFFINGER5」のフッターロゴを設置する方法 「AFFINGER5」のフッターに関するウィジェットを設定する方法 「AFFINGER5」のクレジット表記を消す方法 カスタマ ...

ReadMore

THE THOR

2020/11/7

AFFINGER5(アフィンガー5)のSNSボタン表示・カスタマイズ方法は超簡単!

悩める人「AFFINGER5」のSNSボタン表示設定やデザインを変更したいけど、メニュー位置が分からない。 上記のような疑問にお答えします。   本記事の内容 「AFFINGER5」のSNSボタン表示・非表示方法 「AFFINGER5」のSNSボタンカスタマイズ方法   ブログを運営する上で、SNSからのアクセス流入は非常に重要です。 何故なら、検索順位にも影響するからです。 「AFFINGER5」にもSNSボタンを設置できますが、デザインを変更したり、また非表示にすることもできます。 ...

ReadMore

アイキャッチ画像

AFFINGER5

2020/11/6

AFFINGER5(アフィンガー5)のアドセンス広告利用手順はこれ!

悩める人 「AFFINGER5」のアドセンス審査コードの貼り付け方が分からない。 「AFFINGER5」にアドセンスを貼り付けるための専用機能は備わっているの? 広告を設置したのに表示されない。 このような悩みを解決できる記事となっています。   本記事の内容 「AFFINGER5」に審査コードを登録する方法 アドセンス広告を取得する方法 「AFFINGER5」にアドセンス広告を貼り付ける方法 特定ページだけアドセンス広告を表示しない方法 アドセンス広告が表示されない時の対処法   本 ...

ReadMore

AFFINGER5

2020/11/6

AFFINGER5のウィジェットカラー変更方法!各パーツ・エリアの解説も!

悩める人 「AFFINGER5」のウィジェットパーツ、エリアの詳細を知りたい ウィジェットエリアのカラー変更変更方法が分からない このような疑問にお答えします。   本記事の内容 ウィジェットエリアのカラーカスタマイズ方法 ウィジェットパーツ・エリアの詳細   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、現在は専業ブロガーとして活動しています。   「AFFINGER5」では、非常に多くのウィジェットパーツとエリアが用意されています。 有料WordPr ...

ReadMore

 

設置方法ですが、記事投稿画面から「タグ > 記事一覧 / カード > カテゴリ一覧(スライドショー)」をクリックします。

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

 

クリックすると、下記のようなショートコードが挿入されます。

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

 

引数が並んでいますが、それぞれには下記のような意味があります。

引数 意味
st-catgroup cat スライドショーに表示するカテゴリーID
page 読み込む記事数
order 表示する順番
「desc」なら新しい順、「asc」なら古い順
orderby 記事IDの順番に表示
child 子カテゴリーが存在する場合、その記事も読み込むか指定
slide スライドショーのON / OFFを指定
slides_to_show 1回のスライドで表示する記事数を指定
大画面(960px以上)、中画面(600~959px)、小画面(599px以下)の順番
slide_date 投稿日・更新日の表示、非表示を指定
slide_more 「続きを読む」ボタンのテキストを指定
slide_center スマホ画面サイズが「1」のとき、両サイドの記事が見切れるデザインになる
fullsize_type フルサイズの読み込み指定

「st-catgroup cat」のカテゴリー指定は必ず行い、それ以外のカスタマイズ項目に関しては、必要に応じて変更してください。

設定変更後、スライドショーが問題なく表示されていれば、完了です。

 

AFFINGER5(アフィンガー5)のスライドショーをウィジェットで表示する方法

「AFFINGER5」のスライドショーは記事内だけでなく、ウィジェットで表示することも可能です。

なお、「AFFINGER5」には様々なウィジェットエリアが用意されていますが、公式で保証されているのは「ヘッダー画像エリア下のウィジェット」「サイドバートップ及びサイドバーウィジェット」「記事エリア内」の3つとなっています。

ここでは例として、サイドバーに下記のようなスライドショーを設置してみます。

サイドバーのスライドショー

 

サイドバーにスライドショーを設置する方法ですが、WordPressのダッシュボードから「外観 > ウィジェット」をクリックします。

外観 > ウィジェット

 

ウィジェットの操作画面が立ち上がるので、「00_STINGERカスタムHTML」を「サイドバーウィジェット」のエリアへ追加します。

「00_STINGERカスタムHTML」を「サイドバーウィジェット」のエリアへ追加

 

ここでは、先ほど「AFFINGER5(アフィンガー5)の投稿ページにスライドショーを表示する方法」で解説したスライドショーのショートコードを挿入します。

タイトルは任意の名称を入力してください。

スライドショーのショートコードを挿入

 

なお、サイドバーは幅が狭いため、初期状態のままスライドショーを配置すると、下記のように1つ1つの記事が非常に小さくなります。

スライドショーの記事が小さい

 

この場合、スライドショーのカスタマイズ項目である「slides_to_show="3,3,1"」を「slides_to_show="1,1,1"」へ変更すると、1スライドにつき1記事が表示されるので、見栄えも良くなります。

slides_to_show="1,1,1"

設置するウィジェットエリアに応じて、スライドショーの各カスタマイズ項目の値も変更するようにしましょう。

 

AFFINGER5(アフィンガー5)のスライドショーの注意点

「AFFINGER5」のスライドショーを利用することで、サイト全体がおしゃれになるだけでなく、読者の回遊率アップを見込めます。

しかし、スライドショーを利用する上で、下記注意点があります。

順番に詳細を見ていきましょう。

 

AMPページでは利用できない

AMPとは、Googleも推奨するモバイルの表示速度を上げるための技術です。

技術が搭載されていないWordPressテーマもありますが、「AFFINGER5」には標準でAMPが実装されています。

しかし、AMPページでスライドショーの機能は利用できません。

AMPの利用は任意ですが、有効化している方はご注意ください。

 

読み込み記事が多いとページの速度が遅くなる

投稿ページに表示できるスライドショーは、「page」のカスタマイズ項目を利用することで、読み込み記事数を変更可能です。

標準で読み込み記事数は「5」となっていますが、数値が大きいほど読み込みに時間が掛かります。

そして、結果的にページの速度低下に繋がります。

 

例えば、下記は読み込み記事数を「10」としたスライドショーです。

AFFINGER5

2020/11/10

AFFINGER5(アフィンガー5)のヘッダーエリア全設定項目を解説!

悩める人 「AFFINGER5」のヘッダーデザインはどこまで変更できるの?メニュー位置もいまいち分からない。 上記悩みを解決できる記事となっています。   本記事の内容 「AFFINGER5」にヘッダーロゴを設定する方法 「AFFINGER5」にヘッダーロゴを中央に配置する方法 「AFFINGER5」のヘッダーメニューを設定する方法 「AFFINGER5」のトップページにスライドショーを配置する方法   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、また現在は専業 ...

ReadMore

アイキャッチ画像

THE THOR

2020/11/10

AFFINGER5のフッターをカスタマイズする方法!画像付きで解説!

悩める人 「AFFINGER5」のフッターをどこまでカスタマイズできるのか分からない。 カスタマイズするメニュー位置を知りたい。 このような疑問を解決できる記事となっています。   本記事の内容 「AFFINGER5」のフッターカラーを変更する方法 「AFFINGER5」のフッターメニュー・スマホメニューを表示する方法 「AFFINGER5」のフッターロゴを設置する方法 「AFFINGER5」のフッターに関するウィジェットを設定する方法 「AFFINGER5」のクレジット表記を消す方法 カスタマ ...

ReadMore

THE THOR

2020/11/7

AFFINGER5(アフィンガー5)のSNSボタン表示・カスタマイズ方法は超簡単!

悩める人「AFFINGER5」のSNSボタン表示設定やデザインを変更したいけど、メニュー位置が分からない。 上記のような疑問にお答えします。   本記事の内容 「AFFINGER5」のSNSボタン表示・非表示方法 「AFFINGER5」のSNSボタンカスタマイズ方法   ブログを運営する上で、SNSからのアクセス流入は非常に重要です。 何故なら、検索順位にも影響するからです。 「AFFINGER5」にもSNSボタンを設置できますが、デザインを変更したり、また非表示にすることもできます。 ...

ReadMore

アイキャッチ画像

AFFINGER5

2020/11/6

AFFINGER5(アフィンガー5)のアドセンス広告利用手順はこれ!

悩める人 「AFFINGER5」のアドセンス審査コードの貼り付け方が分からない。 「AFFINGER5」にアドセンスを貼り付けるための専用機能は備わっているの? 広告を設置したのに表示されない。 このような悩みを解決できる記事となっています。   本記事の内容 「AFFINGER5」に審査コードを登録する方法 アドセンス広告を取得する方法 「AFFINGER5」にアドセンス広告を貼り付ける方法 特定ページだけアドセンス広告を表示しない方法 アドセンス広告が表示されない時の対処法   本 ...

ReadMore

AFFINGER5

2020/11/6

AFFINGER5のウィジェットカラー変更方法!各パーツ・エリアの解説も!

悩める人 「AFFINGER5」のウィジェットパーツ、エリアの詳細を知りたい ウィジェットエリアのカラー変更変更方法が分からない このような疑問にお答えします。   本記事の内容 ウィジェットエリアのカラーカスタマイズ方法 ウィジェットパーツ・エリアの詳細   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、現在は専業ブロガーとして活動しています。   「AFFINGER5」では、非常に多くのウィジェットパーツとエリアが用意されています。 有料WordPr ...

ReadMore

AFFINGER5

2020/11/5

AFFINGER5(アフィンガー5)のリアルなSEO対策を検証してみた!

悩める人「AFFINGER5」はSEOに強いと言われるけど、どのようなSEO対策が施されているのかいまいちわからない・・・。 このような疑問に解決できる記事となっています。   本記事の内容 施されているSEO対策の詳細 SEOの設定方法   本記事の信頼性 私は「AFFINGER5」のWordPressテーマを2年半以上使用しています。 また、現在は専業ブロガーとして活動しており、その視点から「AFFINGER5」のSEO対策項目を見ていきます。   「AFFINGER5」 ...

ReadMore

AFFINGER5

2020/11/3

AFFINGER5(アフィンガー5)のプロフィール全エリア設置方法を解説!

悩める人「AFFINGER5」にプロフィールを設置したいけど、設定するメニューがどこにあるのか分からない。 上記のような悩みを解決できる記事となっています。   本記事の内容 サイドバーにプロフィールを設置する方法 「この記事を書いた人」のプロフィールを設置する方法   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、現在は専業ブロガーとして活動しています。   「プロフィールなんて設置しても意味はない」と思う方は非常に多いです。 しかし、プロフィールを設 ...

ReadMore

AFFINGER5

2020/11/2

AFFINGER5(アフィンガー5)のお問い合わせフォームは標準機能で設置できる?

悩める人「AFFINGER5」にお問い合わせフォームを設置したいけど、専用機能はあったりするの? このような疑問にお答えします。   本記事の内容 「AFFINGER5」にお問い合わせフォームの設置機能はあるのか お問い合わせフォームの設置・カスタマイズ方法   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、現在は専業ブロガーとして活動しています。   「AFFINGER5」はWordPressテーマの中でも、機能性が非常に高くなっています。 しかし、サ ...

ReadMore

AFFINGER5

2020/11/1

AFFINGER5(アフィンガー5)のスライドショー表示方法と注意点!

悩める人「AFFINGER5」にスライドショーを設置したいけど、カスタマイズメニューが分からない。 このような悩みにお答えします。   本記事の内容 「AFFINGER5」の各種スライドショー表示方法 スライドショーを設置するときの注意点   本記事の信頼性 私は「AFFINGER5」を2年半以上使用しており、また現在は専業ブロガーとして活動しています。   「AFFINGER5」では、様々エリアにスライドショーを設置することができます。 しかし、有料WordPressテーマ ...

ReadMore

AFFINGER5

2020/10/31

AFFINGER5(アフィンガー5)をアフィリエイトで扱うASPと報酬額を紹介!

悩める人「AFFINGER5」のアフィリエイト案件を取り扱うASPはあるの? このような疑問にお答えします。   本記事の内容 「AFFINGER5」の案件を取り扱うASP 「AFFINGER5」のアフィリエイト報酬額 「AFFINGER5」の自己アフィリエイト可否 「AFFINGER5」のリスティング広告可否 「AFFINGER5」の案件を成約させるコツ   せっかく「AFFINGER5」のWordPressテーマを購入したので、自身のサイトで紹介したいという方もおられるのではないで ...

ReadMore

少ないスペースで10記事アピールできますが、当該ページの表示速度は低下します。

表示速度はSEOにも影響するので、読み込み記事数は初期状態の「5」で問題ないでしょう。

 

プラグインと干渉する場合がある

WordPressテーマに足りない機能を補うため、利用するのがプラグインです。

しかし、テーマの機能とプラグインが干渉し、サイトに不具合を発生させてしまうのはよくあることです。

「AFFINGER5」のスライドショーも同様で、何かのプラグインと干渉し、不具合が発生する可能性もあると公式マニュアルに明記されています。

もし、スライドショーの機能を利用し、サイトに不具合が発生した場合は、下記対策を講じるようにしましょう。

プラグイン干渉時の対策

  • スライドショーを利用しない
  • プラグインを全て停止後、原因となっているプラグインを探し、そのプラグインだけ停止する
「AFFINGER5」のスライドショーの注意点も押さえた上で、利用するようにしましょう!
はらちゃん

 

AFFINGER5(アフィンガー5)のスライドショーまとめ

「AFFINGER5」のスライドショーはトップページをはじめ、記事内やサイドバーなど様々なエリアに設置できます。

スライドショーは小さいエリアにおすすめカテゴリーの記事を表示できるので、読者の回遊率がアップします。

さらに、表示する記事数などの細かいカスタマイズ設定も可能です。

非常におすすめの機能ですが、設定メニューだけ「AFFINGER5」の専用画面や記事投稿画面など、散見している印象でした。

メニュー位置に迷わないためにも、本記事の内容を参考に設定を済ませましょう。

「AFFINGER5」の有用機能の1つなので、皆さんも是非利用してみてくださいね!
はらちゃん
 
  • この記事を書いた人
  • 最新記事

はらちゃん

専業ブロガー【経歴】開始6ヶ月のブログ収益月400円 ▶︎ 2年半で月50万円 | 私が実践した初心者の方に役立つブログ運営術・SEOノウハウを発信 | 現在4つのブログを運営中 | Twitterフォロワー2,000人超え | 25歳で結婚し、現在27歳の超童顔若手ブロガー

-AFFINGER5

© 2020 アフィリエイトゼミ