AFFINGER5

【AFFINGER5】スライドショーの設定方法を紹介!

【AFFINGER5】スライドショーの設定方法を紹介!

質問者
AFFINGER5でスライドショーを使いたいけどよくわからない

 

様々な人がトップページなどに最新記事やカテゴリーのスライドショーの設定していると思います!

 

スライドショーはヘッダーに大きく設定する方法記事内にコードを入力して設定する2つの方法があります!

 

どちらもAFFINGER5ではスライドショーの設定が1クリックでできます!

 

そこで今回は両方の最新記事カテゴリーのそれぞれのスライドショーの設定方法を紹介します!

 

他のカスタマイズ方法はこちらの記事で紹介しています!

 

こんな方におすすめ

  • トップページのヘッダーにスライドショーを表示したい
  • トップページのヘッダー以外の場所にスライドショーを表示したい
  • 記事中にスライドショーを表示したい

ヘッダーにスライドショーを表示する方法

AFFINGER5 スライドショー12

ヘッダーに設定できるスライドショーとはこのようなトップページに表示されるスライドショーのことをさします!

 

大きく表示されるのでとてもインパクトがありますよね!

 

では、この表示の設定方法について説明していきます!

 

AFFINGER5 スライドショー13

  1. AFFINGER5管理をクリックします。
  2. 「ヘッダー」をクリックして記事スライドショー設定を見てください。
  3. 一番上にあるヘッダーに記事をスライドショーで表示するにチェックを入れます。

これで設定完了です!

 

設定を変えなければ新着記事がスライドショーで表示されます。

 

もし一定のカテゴリーを表示させたい場合は表示するカテゴリIDという欄に表示させたいカテゴリのIDを入力しましょう!

AFFINGER5 スライドショー14

 

カテゴリIDは「投稿」→「カテゴリ」で確認することが出来ます!

AFFINGER5 スライドショー3

 

カテゴリリンクを非表示投稿日を非表示にするなど細かいカスタマイズも同じページで出来るので是非いじってみてください!

 

コートを使用してスライドショーを表示する方法

記事中、トップページどちらでもやり方は同じです。

 

AFFINGER5 スライドショー

まず、編集画面を開いたら「タグ」→「記事一覧」→「カテゴリ一覧(スライドショー)」をクリックします。

 

AFFINGER5 スライドショー

すると、このようなコードが表示されます。

 

初めてこれを見たときはよくわからず困惑したため、この後はこのコードについて紹介します。

注意ポイント

WordPressのエディターがGutenbergになっている場合は、Classic Editorというプラグインを有効化しておきましょう。

スライドショーのコードの意味

まずはスライドショーのコードの意味を紹介していきます。

 

これが良くわからず設定を諦めてしまう方がいると思うので簡単に解説していきます。

 

st-catgroup cat=""

表示させたいカテゴリIDを設定します。

 

最新記事

最新記事を表示させたい場合は

st-catgroup cat="0"のままで大丈夫です。

 

カテゴリ一覧

カテゴリ一覧を表示させたい場合はまずカテゴリIDを確認します。

 

カテゴリーの設定方法はこちらの記事に書いてあります!

【AFFINGER5】 ヘッダーメニュー(グローバルメニュー)の設置方法を紹介!
【AFFINGER5】ヘッダーメニュー(グローバルメニュー)の設置方法を紹介!

続きを見る

 

AFFINGER5 スライドショー3

「投稿」→「カテゴリー」をクリックします。

 

すると、このようなページがでてくるため、表示したいカテゴリーのIDをst-catgroup cat=""に入力します。

AFFINGER5のカテゴリーをスライドショーにしたい場合はst-catgroup cat="21"

 

page=""

表示させたい記事数を設定します。

 

5記事表示したい場合はpage="5"とします。

 

order=""

記事の並び順を降順(新しい順)か昇順(古い順)にするかを設定します。

  • 降順→desc
  • 昇順→asc

と入力します。

 

orderby=""

何順で記事を並べるかを紹介します。

  • none:順序をつけない
  • id:投稿IDで並び替える
  • title:タイトルで並び替える
  • date:日付で並び替える
  • modified:更新日で並び替える
  • rand:ランダムで並び替える

基本的には設定を変えずに"id"にままでいいと思います!

 

child=""

子カテゴリーも表示させるかを"ON"か"OFF"で設定します。

 

基本的には"ON"のままで大丈夫です。

 

slide=""

スライドにするかしないかを選択します。

 

この記事を見に来た人はスライドショーにしたいと思うので"on"でいいと思います。

 

下にONとOFFの違いを表示しておきます。

 

slide="on"

AirPods Pro (1)

2020/9/25

AirPods Pro(エアーポッズプロ)をレビュー!充電用のアダプタが同封されてないので注意!

2019年10月30日に発売された「AirPods Pro(エアーポッズプロ)を購入しました!   ワイヤレスイヤホン&ノイズキャンセリングを今まで使ったことがない人間がAirPods Proを使うとどんな風に感じるのかをレビューします! もくじAirPods Pro(エアーポッズプロ)の外観AirPods Pro(エアーポッズプロ)のサイズと重量附属品注意!充電用のアダプタが同封されてないAirPods Proの充電方法Lightning-USB-Aケーブルを使用USB‐C規格のアダプ ...

ReadMore

【ColorPick Eyedropper】 Webサイトで使われている色を調べる方法

2020/9/21

Webサイトで使われている色を調べる方法【ColorPick Eyedropper】

質問者気になるサイトの色使いを参考にしたいけど、何の色を使っているかわからない   今回はWebサイトで使われている色を確認することが出来るColorPick Eyedropperの使い方を紹介していきます!   もくじWebサイトで使われている色を調べる方法ColorPick Eyedropperのインストール方法ColorPick Eyedropperが表示されない場合ColorPick Eyedropperの使用方法Webサイトで使われている色を調べる方法【ColorPick E ...

ReadMore

【WordPress】 TinyMCE Advancedでテーブルの 背景色を変更する方法!

2020/8/8

【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法!

ビジュアルエディターの拡張機能としてよく使われるTinyMCE Advanced。   TinyMCE Advancedを使うと表(テーブル)が簡単に設置することが出来ます。   今回は表(テーブル)の背景色を変更する方法を紹介します! もくじTinyMCE Advancedでテーブルを表示する方法表の挿入方法テーブルの背景色の変更行の背景色の変更セルの背景色の変更【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法のまとめ TinyMCE Advan ...

ReadMore

人気ブロガー達が 使っているテーマは?

2020/8/30

人気ブロガー達が使っているテーマは?皆さんは知っているあのブロガーのテーマを調べてみました!

今は様々なインフルエンサーと呼ばれるブロガーさんがいます。   そのブロガーさんたちがどんなWordPressのテーマを使用しているか気になりませんか?   今回はこちらの記事で紹介しているWPSNIFFERを使用して有名ブロガーが使用しているテーマを調べてみました!   もくじマクリン|マクリン今日はヒトデ祭りだぞ!|ヒトデクロネのブログ講座|クロネTsuzuki Blog|Tsuzukiかえるのしっぽ|びびZOOLOG|ズーキーNOJI BLOG|NOJI副業コンパス|ク ...

ReadMore

AFFINGER5を半年使ってみた感想レビュー|メリット&デメリットを紹介!

2020/9/25

AFFINGER5を半年使ってみた感想レビュー|メリット&デメリットを紹介!

AFFINGER5を使ってブログを始めて半年がたちました。   そこで今回はこれからAFFINGER5を購入しようかどうか迷っている方に向けて、メリットとデメリットをそれぞれ3つずつ紹介してきます!   AFFINGER5購入サイト   もくじAFFINGER5のメリットAFFINGER5のメリット カスタマイズの自由度が高いAFFINGER5のメリット Googleアドセンスの設置が楽AFFINGER5のメリット 多彩なタグAFFINGER5のデメリットAFFINGER5の ...

ReadMore

 

slide="off"

AirPods Pro (1)
AirPods Pro(エアーポッズプロ)をレビュー!充電用のアダプタが同封されてないので注意!

2019年10月30日に発売された「AirPods Pro(エアーポッズプロ)を購入しました!   ワイヤレスイヤホン&ノイズキャンセリングを今まで使ったことがない人間がAirPod ...

【ColorPick Eyedropper】 Webサイトで使われている色を調べる方法
Webサイトで使われている色を調べる方法【ColorPick Eyedropper】

質問者気になるサイトの色使いを参考にしたいけど、何の色を使っているかわからない   今回はWebサイトで使われている色を確認することが出来るColorPick Eyedropperの使い方を ...

【WordPress】 TinyMCE Advancedでテーブルの 背景色を変更する方法!
【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法!

ビジュアルエディターの拡張機能としてよく使われるTinyMCE Advanced。   TinyMCE Advancedを使うと表(テーブル)が簡単に設置することが出来ます。   ...

人気ブロガー達が 使っているテーマは?
人気ブロガー達が使っているテーマは?皆さんは知っているあのブロガーのテーマを調べてみました!

今は様々なインフルエンサーと呼ばれるブロガーさんがいます。   そのブロガーさんたちがどんなWordPressのテーマを使用しているか気になりませんか?   今回はこちらの記事で紹 ...

AFFINGER5を半年使ってみた感想レビュー|メリット&デメリットを紹介!
AFFINGER5を半年使ってみた感想レビュー|メリット&デメリットを紹介!

AFFINGER5を使ってブログを始めて半年がたちました。   そこで今回はこれからAFFINGER5を購入しようかどうか迷っている方に向けて、メリットとデメリットをそれぞれ3つずつ紹介して ...

 

slides_to_show=""

ここでは、画面の横幅に応じて表示させる列数を設定することが出来ます。

 

初期状態では「slides_to_show="3,3,1"」となっていますがこの意味は

  • 960px以上(主にPC)で3列
  • 600px~959px(主にタブレット)で3列
  • 599px以下(主にスマホ)で1列

です。

 

slide_date=""

投稿日や更新日を表示させるか設定できます。

 

slide_date="on"

AFFINGER5 スライドショー10

ONにするとアイキャッチ画像の右下に投稿日や更新日が表示されます。

 

slide_date="off"

AFFINGER5 スライドショー11

OFFにするとONであった日付が消えます。

slide_more=""

続きを読むボタンに表示する文字を設定します。

 

初期状態では「ReadMore」となっていますが、「続きを読む」などに変更してもいいと思います。

AFFINGER5 スライドショー4

 

slide_center=""

画面の幅が599px以下(主にスマホ)で見たときの表示方法を設定します。

 

599px以下(主にスマホ)を1列で設定したときは以下のようになります。

slide_center="on"

AFFINGER5 スライドショー5

slide_center="off"

AFFINGER5 スライドショー6

  • ON→左右に前後の記事が少し写る
  • OFF→1つの記事が画面いっぱいの写る

 

fullsize_type=""

スライドの表示方法を設定します。

fullsize_type=""

AFFINGER5 スライドショー7

""になにも入力しないと、アイキャッチ画像+記事タイトル+記事が表示されます。

 

fullsize_type="text"

AFFINGER5 スライドショー8

""にtextと入力すると、アイキャッチ画像+記事タイトルが表示されます。

 

fullsize_type="card"

AFFINGER5 スライドショー9

""にcardと入力するとアイキャッチ画像のみが表示されます。

 

ポイント

textcardでは自動的にslide_date(日付)slide_moreの表示はなくなります。

注意ポイント

原則として同じサイズのアイキャッチ画像による使用をおすすめします。

横幅100%で合わせているため、上下が見切れてしまったり空白ができたりしてしまします。

 

【AFFINGER5】スライドショーの設定方法を紹介のまとめ

AFFINGER5では、このように1クリックで記事のスライドショーの表示をすることが出来ます。

 

スライドショーは訪問者の気を引くこともできるので積極的に使用していきましょう!

 

では、また次の記事で会いましょう!!

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.