AFFINGER

AFFINGER5(アフィンガー5)カスタマイズ設定【スライドショー】

2020-04-14

slide-show-setting

 

悩む人
あきブログで使ってるスライドショーの設定どうやってやるの?
難しいだろうか...。
分かりやすく教えて欲しい!

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

 

本記事の内容

  • スライドショー設定方法
  • 細かい設定変更
  • 表示場所

 

ブログをおしゃれにするために、スライドショーの設定方法について説明します。

 

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

スライドショー

 

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

 

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

 

この記事を読んで、ブログのトップページや投稿記事をおしゃれにしましょう。

 

また、AFFINGER5をこれから導入しようと思っている人はこちらを参考にしてみてください。

AFFINGER5購入はこちら

 

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

メリット

スライドショーを使うことは、サイトのデザイン性を高くするのに効果があります。

また、デザイン性を高くすると、離脱率を低くすることにも繋がります。

 

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

 

オシャレになる

地味なサイトとオシャレなサイト、同じ情報ならばどちらのサイトが見たいですか?

オシャレなサイトですよね。

 

地味でレイアウトにこだわりのないサイトだと、見辛いと感じる読者さんもいます。

すると、せっかくクリックしてもらったのに、記事は読んでもらえないなんてことも。

 

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

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

 

せっかく有料テーマAFFINGER5を購入したのなら、デザインにこだわってオシャレに設定してみましょう。

 

興味を持たせる

たくさんの情報の中で動くものがあると気になります。

人は無意識に動くものを目で追ってしまうものです。

 

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

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

 

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

AFFINGERコピーライト

AFFINGER

2020/10/18

AFFINGER5でコピーライトクレジットを変更・削除する2つの方法

コピーライト

ブログ

2020/6/21

コピーライトの書き方・意味とは?必要なの?全て解説

blog-design-footer

デザイン

2020/6/20

見やすいブログデザイン【フッターの役割】

AFFINGERフッター

AFFINGER

2020/10/18

AFFINGER5(アフィンガー5)カスタマイズ設定【フッター】

ブログ画像最適サイズ

ブログ

2020/6/18

ブログ画像の最適化|ユーザーからもGoogleからも好かれるサイズは?

 

このように最新記事一覧がスライドショーになってると目立ちます。

あなたもパターン2の方が、興味を持ったのではないでしょうか?

 

記事内だけの話ではなく、トップページでも同じことが言えるでしょう。

動くものがあるだけで、読者に興味を持ってもらうことができるのです。

 

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

 

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

スライドショーを設定すると、新着記事等のアピールをすることができます。

すると読者は、本来の目的とは違う記事を、開く可能性がUP!

 

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

 

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

 

サイト滞在時間が長い → 良いサイト

とGoogleに判断され評価が上がるので、サイトが強くなります。

 

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

 

AFFINGER5スライドショー設置場所

配置例

スライドショーはこの記事のように、記事内だけでなく様々な場所に設置することができます。

上記画像を参考にどこに設置したいか考えてみましょう。

 

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

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

 

大まかな設定は同じですが、位置によって設定方法が変わるので詳細に説明していきます。

 

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スライドショー各場所設定方法

設置方法

この記事では以下の各場所にAFFINGER5でのスライドショー設定方法を説明していきます。

  • ヘッダー画像エリア下のウィジェット
  • トップページ
  • サイドバーウィジェット
  • フッター右用ウィジェット(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ならサイドバーを簡単にカスタマイズできます。

実は私がWordPressでブログを初めて1週間の初心者時代から、このサイドバーのデザインはほとんど変わっていません。

 

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

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

 

こんな方にオススメ

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

 

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

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

 

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

AFFINGER5の購入はこちら

 

-AFFINGER

©️ 2020 あきブログ