【AFFINGER5】記事スライドショーを作る方法！【手順を1から解説】 | Yuuki Blog
ブログ・アフィリエイト
ブログで稼ぐ
ブログ始め方
アフィリエイト
ASP
WordPress
テーマ
プラグイン
エンジニア
エンジニア転職
フリーランスエンジニア
エンジニアの働き方
プログラミング学習
プログラミングスクール
Webマーケティング
SEO
SNS
Yuuki Blog
ITキャリア・個人で稼ぐ副業についての有益情報発信中	
ブログ・アフィリエイト
ブログで稼ぐ
ブログ始め方
アフィリエイト
ASP
WordPress
テーマ
プラグイン
エンジニア
エンジニア転職
フリーランスエンジニア
エンジニアの働き方
プログラミング学習
プログラミングスクール
Webマーケティング
SEO
SNS
HOME >
WordPress >
WordPress テーマ	
【AFFINGER5】記事スライドショーを作る方法！【手順を1から解説】
2020年12月21日
Tweet
スライドショーって何？
AFFINGER5で記事のスライドショーの設定方法について分からない！
記事のスライドショーのメリットについて知りたい！
上記のお悩みを解決します。
✔️本記事の内容
AFFINGER5で記事のスライドショーを設定する前にすべきこと
AFFINGER5で記事をスライドショーにするメリット
AFFINGER5で記事のスライドショーの設定方法
AFFINGER5で記事のスライドショーを作るショートコードの機能
まとめ：AFFINGER5で記事をスライドショーにしよう！
✔️本記事で悩みを解決できる根拠
本記事を書いている僕は現役のブロガーです。現在AFFINGER5を利用していて、サイトでスライドショーを使っています。
✔️本記事の読者
・AFFINGER5でスライドショーの設定方法が分からない人
・スライドショーのメリットについて分からない人
・AFFINGER5のスライドショーで使われるショートコードの意味を知りたい人
本記事では、実際に『AFFINGER5 』を利用している僕が『AFFINGER5 』の記事のスライドショーの設定方法についてご紹介します。
本記事を読み終えたら、『AFFINGER5 』で記事のスライドショーの設定方法が分かり、自分の書いたオススメ記事のアピールをしてPV数を増やすことができます。
なお、「まだAFFINGER5を購入していない！」という方は『【超優秀】AFFINGER5のデザインを徹底レビュー！【導入までの設定方法も解説】』で購入手順を解説しています。
ゆうき
下記のボタンから購入できます！
＼AFFINGER5をテーマにする！／
AFFINGER5の公式サイト
ちなみにAFFINGER5の購入前に評判を知りたい方はこちら⬇️
>> AFFINGER5の評判と口コミを実際の利用者がリサーチしてみた！
さっそく本題に入りましょう。
目次
AFFINGER5で記事のスライドショーを設定する前にすべきこと
AFFINGER5で記事をスライドショーにするメリット
１、自分のオススメしたい記事を設定できる
２、1つのエリアで複数の記事をアピールできる
AFFINGER5で記事のスライドショーの設定方法
①記事スライドショーをサイトのヘッダーに設定する方法
②記事スライドショーをサイトの「トップページ」に表示させる方法
③記事スライドショーをサイドバーに設定する方法
④記事スライドショーをフッターに設定する方法
⑤記事スライドショーに「画像と記事タイトル」を表示させる方法
AFFINGER5で記事のスライドショーを作るショートコードの機能
まとめ：AFFINGER5で記事をスライドショーにしよう！
AFFINGER5で記事のスライドショーを設定する前にすべきこと
AFFINGER5で記事のスライドショーを作る前にやるべきことは初期設定になります。
理由はAFFINGER5テーマを導入して、最初の初期設定が終わっていないとブログ記事のデータがまとまってないため管理が難しくなるからです。
スライドショーに限らず、カスタマイズをする際にデータがまとまっている方が後にも先にもブログ全体を整理しやすくなります。
ゆうき
初期設定は簡単なので、時間が空いた時などにサクッと終わらせましょう！
AFFINGER5の初期設定はAFFINGER5の初期設定でやるべきこと10個！【すぐに終わらせて記事を書こう！】で手順を解説しています。
ちなみに、初期設定が終わったらデザイン済みデータを導入することをオススメします。
デザイン済みデータはデザインのテンプレートみたいなもので、プログラミングの知識が無くてもオシャレなサイトを簡単に作ることができます。
初期設定が終わっている方はデザイン済みデータも検討してみましょう⬇️
>> 【初心者必見】AFFINGER5のデザイン済みデータの設定方法と評判を解説！
AFFINGER5で記事をスライドショーにするメリット
AFFINGER5で記事をスライドショーにするメリットをご紹介します。
大きく2つのメリットがあります⬇️
自分のオススメしたい記事を設定できる
1つのエリアで複数の記事をアピールできる
１、自分のオススメしたい記事を設定できる
下記のようなスライドショーを利用することで、自分の見てもらいたいイチオシ記事を設定することができます。
ブログで稼ぐ	
2021/1/3
Conoha Wingの評判や口コミをデメリット・メリットと合わせて解説
Conoha Wingの評判や口コミを知りたい！ Conoha Wingのメリットやデメリットは？ Conoha Wingの特徴も教えて欲しい！ 上記のお悩みを解決します。 ✔️本記事で悩みを解決できる根拠 仙台のWEB制作会社でエンジニアをしており、これまでに様々なレンタルサーバーを利用した経験があります ブログアフィリエイト4ヶ月目で売り上げ10万円を達成 本記事では、Conoha Wingの評判と口コミ・特徴・料金プ ...
続きを読む
ブログで稼ぐ	
2021/1/9
GRCの評判を現役WEB制作エンジニアが使ってみた【メリットやデメリットも解説】
GRCって何？ GRCの評判や口コミはどうなの？ GRCのメリットやデメリットも知りたい！ 上記のお悩みを解決します。 ✔️本記事で悩みを解決できる根拠 現役のブロガー兼アフィリエイターで、仕事でGRCを利用しています ブログアフィリエイト4ヶ月目で売り上げ10万円を達成 今までRank Trackerを含めた多くの検索順位チェックツールを使っています 本記事では、GRCの評判と口コミ・特徴・料金プランを紹介していきます。 ...
続きを読む
ブログで稼ぐ	
2021/1/9
【保存版】おすすめの検索順位チェックツールを初心者に徹底解説！
おすすめの検索順位チェックツールは？ 検索順位チェックツールを導入すべき理由は？ 上記のお悩みを解決します。 ✔️本記事で悩みを解決できる根拠 現役のブロガー兼アフィリエイターで、Rank Trackerを利用しています ブログアフィリエイト4ヶ月目で売り上げ10万円を達成 仕事でGRCを使ったり、多くのツールを使っています 本記事では、おすすめの検索順位チェックツールを紹介していきます。 『おすすめの検索順 ...
続きを読む
ブログ始め方	
2021/1/9
お名前ドットコムの評判と口コミを実際の利用者である僕が徹底解説！
お名前ドットコムの評判や口コミを知りたい！ お名前ドットコムのメリットやデメリットは？ お名前ドットコムの特徴も教えて欲しい！ 上記のお悩みを解決します。 ✔️本記事で悩みを解決できる根拠 現役のブロガー兼アフィリエイターで、お名前ドットコムを利用しています ブログアフィリエイト4ヶ月目で売り上げ10万円を達成 本記事では、お名前ドットコムの評判と口コミ・特徴・料金プランを紹介していきます。 『お名前ドットコ ...
続きを読む
ブログ始め方	
2021/1/9
mixhostの評判と口コミを現役WEBエンジニアが完全解説します！
mixhostの評判や口コミを知りたい！ mixhostのメリットやデメリットは？ mixhostの特徴も教えて欲しい！ 上記のお悩みを解決します。 ✔️本記事で悩みを解決できる根拠 仙台のWEB制作会社でエンジニアをしており、mixhostを利用した経験があります ブログアフィリエイト4ヶ月目で売り上げ10万円を達成 本記事では、mixhostの評判と口コミ・特徴・料金プランを紹介していきます。 『mixh ...
続きを読む
僕は更新した最新の5記事を常にスライドショーに載せています。
アイキャッチ画像を設定してタイトルを表示すれば、何のことについて書かれた記事なのかを読者は分かり、ブログに誘導できる確率が高まります。
サイト内で相手の興味を引くことがブログのPV数を上げる秘策です。
ゆうき
スライドショーの機能を使って読者の行動をアクティブにさせましょう！
アイキャッチ画像の設定方法については下記の記事で解説しています⬇️
AFFINGER5のアイキャッチ画像の設定方法を初心者に簡単に解説！
続きを見る
２、1つのエリアで複数の記事をアピールできる
スライドショーを設定することで1つのエリアで複数の記事をアピールすることができます。
1記事ではなくて複数の記事を同時に載せれるので、何を読めば良いかわからない読者も安心して読む記事を選べます。
常に読者側の視点に立って、サイトのデザインやレイアウトを組むようにしましょう。
ゆうき
読者目線に立てない人は長期的に成果を出していくことは難しいです！
＼AFFINGER5をテーマにする！／
AFFINGER5の公式サイト
AFFINGER5で記事のスライドショーの設定方法
下記でAFFINGER5で記事のスライドショーを作る設定方法をご紹介します。
画像付きで解説するので、安心してください。
①記事スライドショーをサイトのヘッダーに設定する方法
「AFFINGER5管理」⇒「ヘッダー」⇒「記事スライドショー設定」で「ヘッダーに記事をスライドショーで表示する」にチェックを入れればOKです。
細かい設定に関しては下記の画像のようにしておけば綺麗に表示することができます⬇️
設定が完了したら以下の画像のように表示されます⬇️
ヘッダーの部分にアイキャッチ画像付きのスライドショーを設定することができました。
ゆうき
一定の間隔でスライドされていきます！
②記事スライドショーをサイトの「トップページ」に表示させる方法
次は記事スライドショーを『トップページ』に表示させる方法になります。
トップページの上にスライドショーを配置します。
「AFFINGER5管理」⇒「トップページ」⇒「挿入コンテンツ」に移動して、「タグ」⇒「記事一覧」⇒「カテゴリー一覧(スライドショー)」をクリックします。
『カテゴリー一覧（スライドショー）』をクリックすると、下記のコードが表示されます⬇️
『save』をクリックすると、下記のようにサイトのトップページに表示されます⬇️
ゆうき
これでトップページにスライドショーを表示する方法は完了です！
③記事スライドショーをサイドバーに設定する方法
次に記事をスライドショーをサイドバーに設定する方法です。
『外観』→『ウィジェット』で『00_STINGERカスタムHTML』を利用します。
『00_STINGERカスタムHTML』をドラッグ＆ドロップして『サイドバーウィジェット』に移動させます⬇️
そして『00_STINGERカスタムHTML』の中には下記のように入力してください⬇️
ゆうき
これでサイドバーにスライドショーを設定する方法は完了になります！
④記事スライドショーをフッターに設定する方法
記事スライドショーをフッターに設定する方法をご紹介します。
『外観』→『ウィジェット』で『00_STINGERカスタムHTML』を利用します。
サイドバーに表示させた方法と同じで、『ウィジェット』の『フッター』に『00_STINGERカスタムHTML』を移動させましょう。
ゆうき
『フッター』にスライドショーを表示させる方法もサイドバーと同じなので簡単ですね！
⑤記事スライドショーに「画像と記事タイトル」を表示させる方法
記事スライドショーに『画像と記事タイトル』を表示させる方法を解説します。
今回は『外観』→『ウィジェット』で『テキスト』を利用します。
コードの一番最後にある「type＝""」の『""』の間に「text」と入力すると、画像+記事タイトルが表示されます。
記事タイトルを除いて、画像だけを表示したい場合は『text』の部分を『card』と入力すればOKです。
ゆうき
これで記事スライドショーの設定方法は終わりになります！
AFFINGER5で記事のスライドショーを作るショートコードの機能
ここではスライドショーを作るショートコードの機能を解説していきます。
スライドショーを作るショートコード⬇️
cat=""：カテゴリーに付いているIDを指定
page=""：ページの読み込み数
order=""：日付の順番が設定できる（新しい記事からは『desc』、古い記事から『asc』）
orderby=""：並び方法を指定（id、dateなど）
child=""：小カテゴリーの読み込み
slide=""：スライドショーのonかoff
slides_to_show=""：列数の指定（『3,3,1』先頭の数字だけ変える）
slide_date=""：更新日の表示のonかoff
slide_more=""：続きを見るかの表示
slide_center=""：スマホ時の表示方法（両端が見切れるか）
fullsize_type=""：アイキャッチ画像のみ、アイキャッチ画像+記事のタイトル、全ての表示
『cat』のカテゴリーに付いているIDですが、WordPressのダッシュボード『投稿』→『カテゴリー』開くと各記事のカテゴリーIDが分かります。
デフォルトの状態では0になっているため、新着記事から表示されるようになっています。
ゆうき
ショートコードを理解するだけで、自分好みのスライドショーが作れるようになります！
まとめ：AFFINGER5で記事をスライドショーにしよう！
ここまでAFFINGER5の記事でスライドショー作る設定方法について解説してきました。
スライドショーを設定するメリットを下記に再掲しておきます。
スライドショーを使うメリット⬇️
自分のオススメしたい記事を設定できる
1つのエリアで複数の記事をアピールできる
スライドショーをサイトに作って、読者の興味や関心を引いて記事に誘導していきましょう。
スライドショーの設定が終わったら、AFFINGER5のアイキャッチ画像・ヘッダーの設定をやりましょう。
ゆうき
アイキャッチ画像はスライドショーを表示するときに読者の目に最初に留まるので必ず設定しましょう！
AFFINGER5のアイキャッチ画像に関する設定方法はAFFINGER5のアイキャッチ画像の設定方法を初心者に簡単に解説！で解説しています。
AFFINGER5のヘッダーの設定について知りたい方はAFFINGER5のヘッダーに画像・テキスト・ボタンを設定する方法を徹底解説！でご紹介しています
＼AFFINGER5をテーマにする！／
AFFINGER5の公式サイト
ちなみに、AFFINGER5以外のテーマを検討したい方は【2020年版】おすすめWordpressブログテーマ5つ【プロのブロガーも絶賛！】をチェックしてみてください。
読まれるブログの書き方や僕が収益化できた方法を下記に貼っておきます⬇️
関連記事
>> AFFINGER5でボタンのカスタマイズをする方法！【リンクの付け方も解説】
>> AFFINGER5で目次を作る方法！【プラグインなしでも作れます】
>> AFFINGER5で会話の吹き出しをブログに表示する方法！【色やデザインの設定も解説】
>> AFFINGER5で『おすすめ&関連&新着』の記事一覧を設定する方法！
>> AFFINGER5でブログ内にGoogleアドセンス広告の設定方法を解説します！
>> AFFINGER5でプロフィールカード・画像を作成する方法【3分で作成可能！】
>> AFFINGER5(WING)のタグ機能の総まとめ【種類も全て分かります！】
>> AFFINGER5でランキングを作る手順を教えます【複数作る方法も解説！】
>> 【AFFINGER5】EX版の機能の特徴と評判を徹底解説します！
>> AFFINGER5でお問い合わせフォームを作成・設定する方法【5分で設定可能！】
>> 【検証】AFFINGER5のメリット・デメリットを利用者の僕が暴露します！
ここまで読んで頂きありがとうございました。
今回は以上になります。
お名前 (必須)
メールアドレス (必須)
題名
メッセージ本文
Twitter
Share
Pocket
Hatena
LINE
コピーする
-WordPress, テーマ
author
関連記事
WordPress テーマ	
WordPressテーマ『JIN』の評判と口コミを徹底検証【メリット・デメリットも公開！】
WordPressテーマ『JIN』って何？ JINの評判や口コミが知りたい！ JINの購入・導入方法は？ JINのメリットやデメリットは？ 上記のお悩みを解決します。 &# ...
WordPress テーマ	
AFFINGER5のヘッダーに画像・テキスト・ボタンを設定する方法を徹底解説！
AFFINGER5のヘッダーエリアに画像を表示する方法は？ AFFINGER5のヘッダーメニューの作り方は？ AFFINGER5のヘッダーをカスタマイズする方法が知りたい！ ...
WordPress テーマ	
WordPressテーマ『Cocoon』の評判をご紹介！【ダウンロード方法も解説】
WordPressテーマの『Cocoon』って何？ Cocoonの評判や口コミが知りたい！ Cocoonのダウンロード方法は？ Cocoonのメリットやデメリットは？ 上記のお悩みを解決 ...
WordPress テーマ	
AFFINGER5でボタンのカスタマイズをする方法！【リンクの付け方も解説】
ボタンをサイト内に設定するメリットって何？ AFFINGER5でボタンの設定方法について分からない！ カスタムボタンのカスタマイズ方法について知りたい！ 上記のお悩みを解決 ...
WordPress テーマ	
【AFFINGER5】EX版の機能の特徴と評判を徹底解説します！
AFFINGER5のEX版って何？ AFFINGER5のEX版とスタンダード版の違いが分からない！ AFFINGER5のEX版の機能が知りたい！ 上記のお悩みを解決します。 ...
PREV
AFFINGER5のアイキャッチ画像の設定方法を初心者に簡単に解説！
NEXT
AFFINGER5で会話の吹き出しをブログに表示する方法！【色やデザインの設定も解説】
ゆうき@Web制作エンジニア
ブログ✖︎SEOが大好き | 仙台のWeb制作会社に勤務 | TOEIC800➡️ブログ34記事で1日7万達成➡️10日間でフォロワー500人増を達成 | フォロワー1万人が目標⇧ | SEO中心のWebマーケ全般・Web制作について発信⤴️フォローすればブログ収益化やWeb制作・Webマーケスキルについて学べます⇧
Search
アーカイブ
アーカイブ 月を選択 2020年11月 (2) 2020年10月 (9) 2020年9月 (9) 2020年8月 (11) 2020年7月 (13) 2020年6月 (11) 2020年5月 (12) 2020年4月 (8) 2020年3月 (11) 2020年2月 (11) 2020年1月 (9)
カテゴリー
カテゴリー カテゴリーを選択 ASP (13) SEO (3) SNS (3) WordPress (33) アフィリエイト (4) エンジニアの働き方 (6) エンジニア転職 (4) テーマ (33) フリーランスエンジニア (3) ブログで稼ぐ (13) ブログ・アフィリエイト (1) ブログ始め方 (11) プラグイン (1) プログラミングスクール (5) プログラミング学習 (6)
よく読まれている記事
1
【10分で開設！】WordPressブログをエックスサーバーのクイックスタートで始める方法
2
【2020年版】おすすめWordPressブログテーマ5つ【プロのブロガーも絶賛！】
3
【報酬UP！】おすすめなアフィリエイトASP9社【稼ぎたいなら登録必須】
4
SEO対策が学べるおすすめ本7選【基礎から学べる本を紹介します】
5
【超簡単】Rank Trackerの登録方法と初期設定を47枚の画像で解説！
ブログ・アフィリエイト
WordPress
エンジニア
プログラミングスクール
Webマーケティング
ブログで稼ぐ	
Conoha Wingの評判や口コミをデメリット・メリットと合わせて解説
2021/1/3	
ブログで稼ぐ	
GRCの評判を現役WEB制作エンジニアが使ってみた【メリットやデメリットも解説】
2021/1/9	
ブログで稼ぐ	
【保存版】おすすめの検索順位チェックツールを初心者に徹底解説！
2021/1/9	
ブログ始め方	
お名前ドットコムの評判と口コミを実際の利用者である僕が徹底解説！
2021/1/9	
ブログ始め方	
mixhostの評判と口コミを現役WEBエンジニアが完全解説します！
2021/1/9	
Tweets by blog_yuuki0423
アーカイブ
アーカイブ 月を選択 2020年11月 (2) 2020年10月 (9) 2020年9月 (9) 2020年8月 (11) 2020年7月 (13) 2020年6月 (11) 2020年5月 (12) 2020年4月 (8) 2020年3月 (11) 2020年2月 (11) 2020年1月 (9)
カテゴリー
カテゴリー カテゴリーを選択 ASP (13) SEO (3) SNS (3) WordPress (33) アフィリエイト (4) エンジニアの働き方 (6) エンジニア転職 (4) テーマ (33) フリーランスエンジニア (3) ブログで稼ぐ (13) ブログ・アフィリエイト (1) ブログ始め方 (11) プラグイン (1) プログラミングスクール (5) プログラミング学習 (6)
Yuuki Blog	
ITキャリア・個人で稼ぐ副業についての有益情報発信中
© 2021 Yuuki Blog Powered by AFFINGER5
