広告 AFFINGER(アフィンガー)

【簡単!】AFFINGER5(アフィンガー5)でスライドショーを設定する方法

2020年10月29日

 

悩む人
AFFINGER5(アフィンガー5)のスライドショーを表示させたいけど、どうやって設定するのかな...?

 

こんな悩みに答えます。

 

本記事の内容

  • カテゴリー(記事内)にスライドショーを表示させる方法
  • カテゴリー(記事内)以外にスライドショーを表示させる方法
  • スライドショーの中の日付を見やすくする方法

 

AFFINGER5(アフィンガー5)でのスライドショーは、1つのエリアに複数の記事をまとめることができ、視覚的に目立たせることができる機能です。

 

サイト内の回遊率を促すことができるだけではなく、設定するにも、特別コーディングの知識がなくても簡単に設定ができます。

 

1つのスライドショーを設定するのに、5分ほどで完了しちゃいますので、少しの間お付き合いいただけたら幸いです
KEI

 

それでは、早速始めていきます。

 

[toc]

 

アフィンガー5のカテゴリー(記事内)にスライドショーを表示させる方法

カテゴリー(記事内)にスライドショーを表示させる方法

 

カテゴリー記事内にスライドショーを表示させる方法について、解説します。

 

まず、スライドショーを入れたい記事の編集画面を開きます。

 

「スライドショー」の追加方法

 

ツールバーの「①タグ → ②記事一覧/カード → ③カテゴリ一覧(スライドショー)」をクリックします。

 

すると下記のコードが表示されます。(こちらが「スライドショー」を表示するコードです)

 

スライドショーのコード

 

各ショートコード

cat=""」 ⇨  カテゴリーIDを入力します

page=""」 ⇨ スライドショーに表示させたい記事数を入力します

order=""」 ⇨ 記事の並び順のショートコード

orderby=""」 ⇨ 何順で並べるかのショートコード(タイトル,日付など)

child=""」 ⇨ 「on」にすると子カテゴリーが表示できます

slide=""」 ⇨ スライドのショートコード。「on」はスライド,「off」は無し

slides_to_show="〇〇,〇〇,〇〇"」 ⇨ 表示させる記事の列数

slide_date=""」 ⇨ 日付を表示。「on」だと日付が表示。未入力は非表示

slide_more="ReadMore"」 ⇨ 「続きを読む」の文言を変更

 

スライドショーの各ショートコードを変更して、お好みのスライドショーをカスタマイズしてみてください!
KEI

 

アフィンガー5カテゴリー(記事内)以外にスライドショーを表示させる方法

カテゴリー(記事内)以外にスライドショーを表示させる方法

 

次に、カテゴリー(記事内)以外に「スライドショー」を表示させる方法について、解説します。

 

今回は、以下3つの設定方法について、解説していきますね!
KEI

 

  1. ヘッダー
  2. サイドバーメニュー
  3. フッター

 

1つの設定に5分ほどで完了できちゃいます!
KEI

 

AFFINGER5のスライドショーの表示方法①:
ヘッダー

 

「AFFINGER5管理 → ヘッダー」をクリックします。

 

「AFFINGER5管理 → ヘッダー」

 

上記のキャプチャの通り、「ヘッダーに記事をスライドショーで表示する」にチェックを入れます。

 

最後に「save」をクリックすれば、ヘッダーにスライドショーが表示されます。

 

その他「スライドショー表示方法」「スライドの表示速度」など、お好みに設定してみてください!
KEI

 

AFFINGER5のスライドショーの表示方法②:
サイドメニュー

 

「サイドバーメニュー」にカルーセルの設定は「①外観 → ②ウィジェット」からできます。

 

「外観 → ウィジェット → サイドバーウィジェット」

 

ウィジェットの「サイドバーウィジェット」に「00_STINGERカスタムHTML」を追加して、この中に以下の「カテゴリ一覧(スライドショー)」のコードを入れます。

 

カテゴリ一覧(スライドショー)

 

最後に「保存」をクリックして完了です。

 

AFFINGER5のスライドショーの表示方法③:
フッター

 

フッターも同じように「①外観 → ②ウィジェット」から編集できます。

 

フッターの2列目に「カルーセル」を追加したい場合は、「フッター右用ウィジェット(2列目)」に「00_STINGERカスタムHTML」を追加して「カテゴリ一覧(スライドショー)」のコードを入力します。

 

 

最後に「保存」をクリックすれば完了です。

 

フッター3列目に追加する場合も「フッター右用ウィジェット(3列目)」に「カテゴリ一覧(スライドショー)」のコードを入れれば、同様に設定することができます。
KEI

 

なお、アフィンガー5の「フッターのカスタマイズ方法」について、以下記事に一覧にしてまとめていますので、参考にしてみてください。

 

関連記事
AFFINGER5フッターのカスタマイズ方法まとめ
AFFINGER5フッターのカスタマイズ方法まとめ

    こんな悩みに答えようと思います   本記事の内容 AFFINGER5でフッターにメニューを追加する方法 AFFINGER5でフッターの背景色を変更する方法 AFF ...

続きを見る

 

スライドショーの中の日付を見やすくする方法

 

最後に、スラードショー内の日付をみやすくする設定を解説します。(キャプチャの赤ワクで囲った箇所です。)

 

 

背景画像に被って、日付が読みづらいな...と思う方は、ぜひ設定してみてくださいね!
KEI

 

CSSを編集するので、編集前にはバックアップをしておいてください。

 

バックアップのやり方は以下で詳しく紹介しています。

 

>>UpdraftPlusプラグインを使ってバックアップする方法

 

まず『外観 → 追加CSS』を開き、以下ソースコードを追加します。

 

/* 日付に影をつけるCSS */
.post-slide-date {
background-color: #205a97;
border-radius: 6px;
padding: 3px;
}

 

「追加CSS」画面

 

上記のように、CSSを追加できましたら、「公開」ボタンをクリックして完了です。

 

日付の色を変更するには「background-color: ;」の「:」と「;」の間に色コードを入力すれば、お好みの色に変更できます。
KEI

 

まとめ:AFFINGER5(アフィンガー5)のスライドショー

 

ここまで、AFFINGER5(アフィンガー5)のスライドショー追加方法について、紹介しました。

 

AFFINGER5でのスライドショーの設定方法について、理解できましたでしょうか?

 

AFFINGER5(アフィンガー5)では、スライドショーがボタン1つで作ることができ、プログラミングの知識がなくても簡単に作ることができます

 

また、AFFINGER5(アフィンガー5)を使用してみての感想については、以下記事でまとめていますので、導入を検討されている方は参考にしてみてください。

 

関連記事
AFFINGER6(アフィンガー)を使ってみての感想【メリット・デメリットを紹介】

    こんな悩みに答えます。   本記事の内容 AFFINGER6とは?【前提情報】 AFFINGER6(アフィンガー6)を使ってみてのデメリット・メリット AFFIN ...

続きを見る

 

今回は以上です。

 

ここまで読んでいただき、ありがとうございました!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)