AFFINGER

【AFFINGER5】スライドショーのデザイン・カスタマイズ設定方法を攻略

2020-04-14

slide-show-setting

 

悩む人
AFFINGER5でのスライドショーの設定方法が分からない
AFFINGER5でのスライドショーのカスタマイズ方法分からない

こんな悩みを解決します。

 

本記事の内容

  • スライドショーについて
  • AFFINGER5のスライドショーカスタマイズ方法

 

ブログで人気パーツの「スライドショー」

ブログを見やすくするためや、デザイン性を重視したい時に使われることが多いです。

 

私のブログでもブログトップページの新着記事でスライドショーを使っています。

スライドショー

 

一見難しそうですが、この記事を読めば誰でも簡単に設定できますよ!

 

見やすいブログは、読者の滞在時間が長くなることに繋がるので、こだわりたいとこです。

 

AFFINGER5(アフィンガー5)では使い方を知るだけで、スライドショーを思い通りにカスタマイズすることが可能。

この記事を読んで、ブログのトップページや投稿記事にスライドショーを使っていきましょう!

 

本記事ではAFFINGER5のスライドショーのカスタマイズ方法を詳しく説明します。

 

スライドショーを設定するメリット

メリット

ブログでスライドショーを使うことは、サイトのデザイン性を高くするのに効果があります。また、デザイン性を高くすると、離脱率を低くすることにも繋がるので、ブログを読んでもらいやすくなります。

 

まずは、スライドショーを使うメリットを確認しましょう。

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

  • デザイン性UP
  • 興味を持たせる
  • サイト内滞在時間を増やせる

 

デザイン性UP

地味なサイトとデザイン性が高いのサイト、同じ情報ならばどちらのサイトが見たいですか?デザイン性が高いサイトですよね。

 

地味でレイアウトにこだわりのないサイトだと、見辛いと感じる読者さんもいます。すると、せっかくクリックしてもらったのに、記事は読んでもらえないなんてことも。

 

一方、デザイン性が高いサイトだとレイアウトにこだわっているので、読者は欲しい情報を探しやすくなります。

あきしゅん
見やすいとストレスも溜まらないね!

 

読者が快適に使ってもらえるように、ブログのデザイン性にこだわる際にスライドショーが役に立ちます。

 

興味を持たせる

たくさんの情報の中で動くものがあると気になります。人は無意識に動くものを目で追ってしまうものです。

 

例として2パターンの最新記事の紹介方法を載せました。

パターン1:最新記事(通常)

 

パターン2:最新記事(スライドショー)

AFFINGER5の購入方法とダウンロード・設定手順を解説

AFFINGER

2021/4/4

【初心者向け】AFFINGER5の購入方法とダウンロード・設定手順を解説

WordPress初期設定

ブログ

2021/2/4

【初心者向け】WordPressのやるべき10個の初期設定を全て解説

iPhoneのメモアプリを使った効率のいいブログ下書き

ブログ

2021/1/28

【保存版】iPhoneのメモアプリを使った効率のいいブログ下書き方法

ブログでの稼ぎ方

ブログ

2020/12/26

【超基本】ブログでの稼ぎ方はたった3種類しかありません

副業ブログで稼ぐ

ブログ

2020/12/26

【副業ブログで稼げるのか?】月6桁なら今から始めても余裕で稼げます!

 

このように最新記事一覧がスライドショーになってると目立ちます。あなたもパターン2の方が、興味を持ったのではないでしょうか?

 

記事内だけの話ではなく、トップページでも同じことが言えるでしょう。動くものがあるだけで、読者に興味を持ってもらうことができるのです。

 

しかし、使いすぎは鬱陶しい印象を与えるので注意が必要です。

 

サイト内滞在時間を増やせる

スライドショーを設定すると、新着記事等のアピールをすることができます。すると読者は、本来の目的とは違う記事を、開く可能性がUP!

 

たくさんの記事を見てもらうことは、サイト滞在時間を増やすことに繋がります。

 

サイト滞在時間はGoogleの評価指標の一つ。

【サイト滞在時間が長い → 良いサイト】とGoogleに判断され評価が上がるので、サイトが強くなります。

 

ブログで稼ぎたい・読んでもらいたいと考えてるのであれば、スライドショーをうまく使いましょう。

 

【AFFINGER5】スライドショーカスタマイズ方法

ショートコード

スライドショーのカスタマイズは記事投稿画面から設定することができます。

上記画像のように「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」を選択してください。

 

「カテゴリー一覧(スライドショー)」をクリックすると次のコードが表示されます。

スライドショーコード

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=""

 

難しそうに見えますが、理解しやすいし簡単です。

まずはコードを理解していきましょう。

 

st-catgroup cat

カテゴリーIDを設定します。複数の場合は ","(半角)で区切りましょう。0の場合は新着記事が表示されます。

st-catgroup cat='1,2,3'  → カテゴリー1,2,3を表示

st-catgroup cat='0' → 新着記事を表示

 

page

表示する記事の枚数を設定することができます。

page='5' → 5記事分を表示

 

order

日付順を設定できます。新しい順が ’desc’、古い順が 'asc' です。

order='desc' → 新しい順で表示

 

orderby

どのような順序で並べるかを設定します。たくさん種類があるので紹介はしますが、私は「最新記事」で使ってるので 'id' しか使ってません。

  • none:順序なし
  • id:投稿IDで並び替え
  • title:タイトルで並び替え
  • name:スラッグで並び替え
  • type:投稿タイプで並び替え
  • data:日付で並び替え
  • modified:更新日で並び替え
  • parent:投稿/固定ページで並び替え
  • rand:ランダムに並び替え
  • commnt_count:コメント数で並び替え

orderby='id' → 投稿id順で並び替え

 

child

子カテゴリーを表示させるかどうかを設定します。表示させるなら ’on’、表示させないなら 'off' です。

child='on' → 子カテゴリー表示

 

slide

スライドをさせるかどうか設定します。スライドさせるなら ’on’、スライドさせないなら 'off' です。

これを ’on’ にしたのが、今記事で紹介しているスライドショーです。

slide='on' → スライドあり

 

slides_to_show

スライドショーで表示させる記事の枚数を設定できます。(1〜3枚)

slides_to_show='3.2.1'とした場合

  • 960px以上で3枚表示
  • 600px〜959pxで2枚表示
  • 599px以下で1枚表示

小さい画面の表示枚数が、大きい画面の表示枚数より多くする設定はできません。

サイドバーなどの狭い位置での3画面はレイアウトが崩れるので注意が必要です。

 

slide_data

投稿日を表示させるかどうか設定します。表示させるなら ’on’、表示させないなら 'off' です。

slide_data='on' → 投稿日を表示

 

slide_more

’続きを読む’ ボタンに表示する文字を設定します。デフォルトは ’ReadMore’ に設定されてますが、'続きを読む' のように日本語に変更も可能です。

slide_more='続きを読む' → 「続きを読む」と表記されたボタンを表示

 

slide_center

スマホでの表示方法が、両端が見切れるデザインにするかどうかを設定します。両端を見切れさせるなら ’on’、させないなら 'off' です。

slide_center='on' → スマホで両端を見切れさせる

 

fullsize_type

スライドショーの大まかな表示方法を設定します。

  • card:表示される記事が画像のみになります
  • text:表示される記事がタイトルと画像のみ
  • 表記なし:上記で設定した設定

fullsize_type='text'  → タイトルと画像のみ

fullsize_type='' → 上記で設定したもの通りに表示

 

あきしゅん
一通り設定して「プレビュー」から、スライドショーを確認してみましょう。

 

【AFFINGER5】スライドショー各場所設定方法

配置例

スライドショーはこの記事のように、記事内だけでなく様々な場所に設置することができます。上記画像を参考にどこに設置したいか考えてみましょう。

 

ここでスライドショーを適用した位置は次の4箇所です。

  • ヘッダー画像エリア下のウィジェット
  • トップページ
  • サイドバーウィジェット
  • フッター右用ウィジェット(3列目)

 

大まかな設定は同じですが、位置によってそれぞれ設定を変えた方が見やすくなるので、そのポイントも説明していきます。

 

「カテゴリー一覧(スライドショー)」のデフォルトから、どのように変更させたのかを変更点をまとめました。

スライドショーコード

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=""

 

ヘッダー画像エリア下のウィジェット

ヘッダー下ウィジェット
  1. 「ダッシュボード」→「外観」→「ウィジェット」
  2. 利用できるウィジェットの「テキスト」を「ヘッダー画像エリア下のウィジェット」に挿入
  3. タイトルとコードを書いたら「保存」をクリック

 

デフォルトコードからの変更点は次の通りです。

  • child="off"
  • slides_to_show="3,3,2"
  • slide_date="off"
  • slide_more="続きを読む"

 

トップページ

トップページウィジェット
  1. 「ダッシュボード」→「AFFINGER5管理」→「トップページ」
  2. トップページに固定記事を挿入 or 挿入コンテンツ欄にコードを記入
  3. 「保存」をクリック

 

トップページウィジェット2

固定ページの場合

  1. 「固定ページ」→「挿入IDの固定ページ編集」
  2. コードを挿入
  3. 「更新」をクリック

 

シンプルなレイアウトにしたかったので、fullsize_typeを'text'に設定しています。文中を載せると統一感がなくなってしまうからです。

 

デフォルトコードからの変更点は次の通りです。

  • child="off"
  • slides_to_show="3,3,2"
  • slide_date="off"
  • fullsize_type="text"

 

サイドバーウィジェット

サイドバーウィジェット
  1. 「ダッシュボード」→「外観」→「ウィジェット」
  2. 利用できるウィジェットの「テキスト」を「サイドバーウィジェット」に挿入
  3. タイトルとコードを書いたら「保存」をクリック

 

ここでは、「slides_to_show='1, 1, 1'」に設定しています。「slides_to_show='3, 3, 2'」であると次のように表示されてしまうからです。

スライドショー悪い例
あきしゅん
3枚表示はごちゃごちゃしてるね...。

 

デフォルトコードからの変更点は次の通りです。

  • child="off"
  • slides_to_show="1,1,1"
  • slide_date="off"
  • slide_more="続きを読む"

 

フッター右用ウィジェット (3列目)

フッターウィジェット
  1. 「ダッシュボード」→「外観」→「ウィジェット」
  2. 利用できるウィジェットの「テキスト」を「フッター右用ウィジェット」に挿入
  3. タイトルとコードを書いたら「保存」をクリック

 

ここでは、「fullsize_type='card'」に設定しています。表示するエリアが小さいため、コンパクトにしました。

 

デフォルトコードからの変更点は次の通りです。

  • child="off"
  • slides_to_show="3,2,1"
  • slide_date="off"
  • fullsize_type="card"

 

【AFFINGER5】スライドショーカスタマイズ設定まとめ

AFFINGER5でのスライドショーの詳しいカスタマイズ設定方法を解説しました。

 

ブログをおしゃれにすると、読者の目に止まって滞在時間が長くなります。設定も簡単なので、是非この記事を参考にしながらスライドショーを実装してください。

 

また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER記事一覧

 

 

この記事を読んでるという方はAFFINGER5を既に使っている方だと思います。

以下の文章は WordPressテーマ「AFFINGER5」を購入しようと思っている方向けです

AFFINGER5ならスライドショーを簡単にカスタマイズできます。

 

初心者でもAFFINGER5なら、あなたが作りたいスライドショーを簡単に作ることができます。

こちらの記事を読めばAFFINGER5がいかにデザインカスタマイズ性が高いか評判を確認することができます。

affinger-reputation
WordPressテーマAFFINGER5(アフィンガー5)の評判・口コミまとめ

続きを見る

 

こんな方にオススメ

  • 今のテーマでデザインに納得してない方
  • ブログ初心者でテーマ選びに迷ってる方
  • CSSの知識がないけどブログデザインに力入れたい方

 

これらに当てはまる方は是非早いうちに、AFFINGER5導入を考えてみてください。

記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。

 

効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか?

AFFINGER5の購入はこちら

 

-AFFINGER

© 2021 AKI BLOG Powered by AFFINGER5