ブログ運営

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

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

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

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

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

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

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

 

 

本記事の内容

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

 

本記事の信頼性

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

 

本記事のテーマ

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

 

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

記事スライドショーとは

Freeksの口コミ・評判

FreeLance SE プログラミング

2021/4/30

Freeks(フリークス)の口コミ・評判【1万円から始めるプログラミングスクール】

悩んでる人 Freeks(フリークス)の評判ってどうなの? 格安プログラミングスクールのメリット・デメリットは? Freeks(フリークス)はどんな人に向いてるの? 実際に受講している人の口コミが知りたい! こんな疑問を解決していきます。   Freeks(フリークス)でプログラミングを学ぼうか迷っている方は是非読んでいってください! Contents オンラインプログラミングスクールFreeks(フリークス)とは?月額9,800円(税込10,780円)からプログラミングを学べる自分の興味に合わ ...

ReadMore

開発エンジニアに夜勤はあるのか

SE

2021/4/27

SES・客先常駐の闇 ウソ?ホント?【現役エンジニアが体験談を告白】

悩んでる人SES・客先常駐はブラックって聞くけど本当なの? 実際にあった客先常駐の闇の部分が知りたい SES企業で働くメリットはあるの? 今回はこんな疑問に答えていきます。 この記事を書いている私は、実際にSES企業で働いている現役エンジニアです。   以前は受託開発企業でエンジニアとして働いていましたが、2020年の末ごろにSES・客先常駐を行っている会社に転職しました。 実際にSES企業で働いてみてわかったことや、世間一般でSESの闇といわれる部分の実態もわかってきました。   そ ...

ReadMore

未経験ITエンジニア

SE

2021/3/28

【未経験者専門】給料をもらいながらITエンジニアに!?【IT求人ナビのメリット・デメリット】

悩んでる人 ・未経験だけどITエンジニアに転職したい ・プログラミングスクールに通うにはお金が… こんな方におすすめのITエンジニア未経験者特化型の転職サービス「IT求人ナビ」をご紹介します!   今の仕事から転職したいけど、 なかなかプログラミングを勉強する時間が無い。 プログラミングスクールに通うにはお金が足りない。   でもお給料をもらいながらスクールに通えたらどうでしょうか? そんなうまい話あるわけないじゃんと思ったあなた。 IT求人ナビならそれができちゃいます。 今回はこの未 ...

ReadMore

エンジニア転職事情

プログラミング

2020/12/20

【2020年11月】実務経験1年のエンジニア転職事情【コロナ禍の厳しい現実】

悩んでる人そろそろ実務経験1年だし別の会社に転職しようかな。 自分のスキルアップにつながる企業に転職したい。 こう思っているエンジニアの皆さん! ちょっと待ったぁっ!!(笑)   kawateruこんにちは、かわてるです!(@kaz_lion) 色々あって久しぶりの投稿になってしまいました。 今回は実務経験1年程のエンジニアの方や、 これから未経験でエンジニア転職しようと思っている方に向けた記事になります。   ちなみに現在この記事を書いている私はちょうど実務経験1年で絶賛転職活動中で ...

ReadMore

ブログ運営

2020/6/26

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

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

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 , 2022 All Rights Reserved Powered by AFFINGER5.