ブログ運営

【アフィンガー5】ブログ記事のスライドショーを入れる方法【初心者向け】

アフィンガー5でブログに動きを付ける方法

こんにちは、かわてるです。

ブログに記事のスライドショー入れてる人がいるけどどうやって入れるんだろう

ブログ記事のスライド作るのって難しそう

ブログをかっこよくしたい

悩んでる人
kawateru
AFFINGER5(アフィンガー5)を使っている人であれば一瞬でできますよ!!

 

 

本記事の内容

  • 【アフィンガー5】記事のスライドショーとは?
  • 【アフィンガー5】記事スライドショーの入れ方【基礎編】
  • 【アフィンガー5】記事スライドショーでできること【応用編】
  • 【アフィンガー5】記事のスライドショーを入れるメリット
  • 【アフィンガー5】記事スライドショーを入れるデメリット

 

本記事の信頼性

Kawateru blogではブログ開設当初からAFFINGER5を使用しており、ブログトップページにもブログ記事のスライドショーを使用しています。

 

本記事のテーマ

AFFINGER5(アフィンガー5)を使って「ブログ記事のスライドを入れる方法」を初心者向けに解説

 

【アフィンガー5】記事のスライドショーとは?

記事スライドショーとは

ブログ運営

2020/6/26

【簡単】ブログの商品リンクの作り方・作成方法を解説【初心者向け】

悩んでる人Amazonとか楽天の商品リンクの作り方を知りたい どうやったらブログで物販アフィリエイトができるの? こんなお悩みを解決します。 kawateruこんにちは、かわてるです!(@kaz_lion) 今回はブログで物販アフィリエイトをしたいと考えている人向けに、 Amazon・楽天・Yahooの商品リンクの簡単な作り方・作成方法をご紹介します。   こんなやつ↓ リンク   本記事の信頼性 Contents ブログの商品リンクの作り方・作成方法【準備編】もしもアフィリエイトに登 ...

ReadMore

初心者ブロガーが失敗

ブログ運営

2020/6/25

初心者ブロガーがやりがちな失敗例5つを解説【ブログの失敗を無くそう】

悩んでる人またブログで失敗した・・・ 失敗しないように気を付けるポイントが知りたい こんなお悩みを解決します。 kawateruこんにちは、かわてるです!(@kaz_lion) ブログを始めたばかりのころって 分からないことだらけで失敗ばかりですよね。   でも先に失敗しそうなポイントを知っておけば、 失敗せずに済みそうじゃないですか?   そこで今回は 「初心者ブロガーがやりがちな失敗例5つを解説【ブログの失敗を無くそう】」 というテーマで解説していきます。   本記事の信 ...

ReadMore

人生の無駄な時間をなくす方法

ライフスタイル

2020/6/24

【時間が無い?】今すぐできる無駄な時間をなくす5つの方法

悩んでる人毎日忙しくて時間が無い 自分の時間が欲しい 無駄な時間をなくしたい こんなお悩みを解決します。 kawateruこんにちは、かわてるです!(@kaz_lion) あなたは時間足りてますか? もっと時間が欲しいと思った事ありませんか?   もしかしたら無駄な時間を過ごしてしまっているかもしれません。   当てはまった方はこの機会に無駄な時間をなくしましょう! 今回ご紹介する方法を使えば確実に時間が増えます!!   それでは早速見ていきましょう!   本記事の ...

ReadMore

リモートワークのメリット

プログラミング

2020/6/23

スマホでプログラミングの勉強ができるアプリ5選【スキマ時間を有効活用】

悩んでる人スマホでもプログラミングを勉強する方法が知りたい おすすめのプログラミング勉強アプリってある? こんなお悩みを解決します。   kawateruこんにちは、かわてるです!(@kaz_lion) せっかくプログラミングの勉強をするんだったら、 通勤通学の移動時間などのスキマ時間を有効活用したいですよね。   スキマ時間でプログラミングを勉強するのであれば、 スマホのアプリを使って勉強するのがおすすめ!!   そこまで種類は多くないですが、 外で勉強するには十分なクオリ ...

ReadMore

ブログにTwitterを表示する方法

ライフスタイル

2020/6/22

シングルタスクとマルチタスクどっちがいいのか?【仕事効率を上げよう】

悩んでる人シングルタスクの方が良いっていう人とマルチタスクの方が良いっていう人がいるけど、結局のところどっちがいいの? こんなお悩みを解決します。 kawateruこんにちは、かわてるです!(@kaz_lion) 結論から言うと シングルタスクがいいか、 マルチタスクがいいかは人によります。   自分に合った方法で行うことで効率は飛躍的にアップしますし、 逆に合わない方法で行ってしまうと全然仕事が進まないといったこともあります。   そこで今回はシングルタスクとマルチタスクについて解説 ...

ReadMore

↑コレのことです。

このKawateru blogでもトップページのヘッダー下に新着記事のスライドショーを入れています。

 

スライドショーはブログに動きが出るため視覚をスライドに向けることができ、ほかの記事へのリンクをクリックしてもらいやすくなります。

 

【アフィンガー5】記事スライドショーでできること

AFFINGER5の記事スライドショー機能を使えば簡単に新着記事のスライドを作ることができますが、ほかにもカテゴリー別の記事スライドショーや、一度にスライドに表示する記事の数(端末ごとに設定可能)、スライドに流すページ数など細かい設定をすることもできます。

 

高みを目指すならAFFINGER5

AFFINGER5

より高みを目指すなら、AFFINGER5がおすすめです。

SEO対策、サイトスピード対策も抜群‼

アフィリエイトに特化したテーマです。

テーマを変えただけでランキングが

上がったとの声があるほど。

当サイトもAFFINGER5を使用しております。

詳しくはコチラ

 

【アフィンガー5】記事スライドショーの入れ方【基礎編】

アフィンガー5の記事スライドショーの入れ方

まずは基本的なスライドショーの入れ方をご紹介します。

アフィンガー5の機能を使えば初心者でも一瞬でできるので安心してください。

 

①記事スライドを入れる準備

記事ごとに入れたい人は「投稿」➜「新規追加」

トップページに入れたい方は「固定ページ」➜「新規追加」

で記事スライドショーを入れていきます。

 

Kawateru blogでも固定ページを作成し、そのページをトップページに設定しています。

 

②記事スライドの入れ方

記事スライドショーの入れ方

 

記事編集画面上のツールバーにある「タグ」➜「記事一覧」➜「カテゴリ一覧(スライドショー)」を選択。

するとこのようなコードが挿入されます。

 

記事スライドショーのコード

ちなみにこの時点でプレビューすると記事のスライドショーがすでに完成しています。

すごく簡単ですよね(笑)

 

無料テーマやほかのテーマでこの機能がついていない場合はHTML&CSS変更したりと色々と面倒です。

kawateru
アフィンガー5では記事スライドショーが基本機能に入ってるので簡単にできますよ!

 

【アフィンガー5】記事スライドショーでできること【応用編】

記事スライドショーでできること

ここからは先ほどの記事スライドショーの応用編ということで、スライドショーの様々な設定について紹介します。

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

先ほど紹介した時点だと新規投稿順に設定されている記事数が流れる記事スライドショーになっています。

ここでは特定のカテゴリの新着記事のみを入れたい場合の方法を解説します。

 

記事スライドショーのカテゴリー変更

 

先ほどのコードの赤枠部分の「”0”」の部分を表示したいカテゴリーIDに変更します。

カテゴリーIDを確認したい場合は「管理者トップページ」➜「カテゴリー」で確認できます。

アフィンガー5のカテゴリー

 

カテゴリ名が並んでいる項目のIDの列に書いている数字です。

注意点として「”」ダブルクォーテーションは消さないでください。

複数のカテゴリを表示したい場合は「,」カンマで区切っていきます。

例➜「"3,4,6"」

カテゴリーIDが3、4、6のカテゴリーの新着記事だけ表示されるスライドショーが入れられます。

 

②表示ページ数を変更する方法

スライドで表示ページ数を変える

表示したいページ数を変えるには赤枠部分の「”5”」の部分を変更していきます。

先ほどと同じで「”」ダブルクォーテーションは消さずに数字部分だけ変更します。

例➜「"8"」

新着記事から8ページ分がスライドショーで表示される。

 

③一度に表示するページ数を変更する方法

スライドショーが止まった状態で表示される記事数を端末の種類ごとに設定できます。

アフィンガー5の設定

赤枠部分の「”3,3,1”」の部分を変更していきます。

PC,タブレット,スマホの順に記事スライドショーに表示するページ数です。

例➜「”4,2,1”」

PC 4ページ、タブレット 2ページ、スマホ 1ページ

極端に変更すると見づらくなってしまうので変更する場合は±1ぐらいにしましょう。

 

④記事スライドのReadMoreの文字を変更する

続きを読むに変更

”ReadMore”の部分を変更していきます。

「”」ダブルクォーテーションは消さずに文字の部分を変更していきます。

例➜「"続きを読む"」

スライドショーで表示されているReadMoreが続きを読むに変更されます。

あまり長すぎると表示が崩れるので、変更する場合は同じぐらいの文字数にしましょう。

 

 

【アフィンガー5】記事のスライドショーを入れるメリット

記事スライドショーを入れるメリット

ブログに記事スライドショーを入れるメリットは通常の記事リンクやブログカードと違い、

自動でスライドして動きを付けてくれるのでユーザーの目を引きやすくなります。

 

動きアリ:動きナシ

 

動いてる方に意識が向きませんか?

知らず知らずのうちに動きに反応してしまうものなので、普通だとスルーされてしまう関連記事のクリック率も高くなります。

 

 

【アフィンガー5】記事スライドショーを入れるデメリット

記事スライドショーのデメリット

記事スライドショーのデメリットとして「ブログが重くなる」ことがあります。

アニメーションと静止画だとアニメーションの方が容量を多く使うので、ブログの表示速度にも影響が出る可能性があります。

 

AFFINGER5を使えば、記事のスライドショーを作るのは簡単ですが、デメリットとしてブログが重くなってしまうことが考えられます。

ブログが重くなりすぎるとアクセスされた際に表示速度が遅くなり、離脱や直帰率が上がってしまう原因になります。

 

しかしこれに関してはしっかりと対策をすれば表示速度を維持したままスライドショーを作ることも可能です。

ブログの表示速度対策についてはこちらの記事で紹介しています。

サイトスピード改善の設定
【AFFINGER5】サイトスピードの改善方法【2つのプラグインで解決】

続きを見る

ブログのサイトスピードを上げたい
【第2弾】ブログのサイトスピード改善方法【もっと早くしたい人向け】

続きを見る

Kawateru blogでもトップページに記事のスライドショーを流していますが、

サイトスピードは「PC99点:モバイル90点」の高得点を獲得しています。

ブログの表示速度はSEOにも直結するとGoogleが公表しているのでしっかりと対策しましょう。

まとめ「アフィンガー5でブログ記事のスライドショーを入れる方法」

アフィンガー5でスライドを入れる

いかがだったでしょうか?

ブログ記事のスライドショーを入れるだけで一気にプロっぽいデザインにできます。

Kawateru blogでもトップページにスライドショーを表示しているので良かったら見てみて下さい。

 

アフィンガー5は14,800円と安くはない有料テーマですが、こういった記事スライドなどの難しいことを簡単にできたり、内部SEO対策、表示速度改善など、無料テーマとは違ったメリットが沢山あるのでおすすめです。

ブログで稼げるようになればペイできてしまうので、僕は先行投資だと思って開設当初からアフィンガー5を導入しました。

まだ無料テーマを使っているという人は有料テーマを検討してみるのも面白いですよ♪

 

高みを目指すならAFFINGER5

AFFINGER5

より高みを目指すなら、AFFINGER5がおすすめです。

SEO対策、サイトスピード対策も抜群‼

アフィリエイトに特化したテーマです。

テーマを変えただけでランキングが

上がったとの声があるほど。

当サイトもAFFINGER5を使用しております。

詳しくはコチラ

  • この記事を書いた人
  • 最新記事

kawateru

【ブログ運営】×【Twitter運用】×【エンジニア】 3月からWordPressに移行しました。 4年間ブラック飲食→MGになるも28歳で退職→未経験から開発エンジニアに転職→最短でフリーランス目指す‼ ●大阪出身 ●28歳 ●1児のパパ

-ブログ運営
-,

Copyright© Kawateru blog , 2020 All Rights Reserved Powered by AFFINGER5.