WINGカスタマイズ

AFFINGER5(WING)で記事中にスライドショーを出す方法!

WING(AFFINGER5)のアップデートで使えるようになった「スライドショー」。

 

アイキャッチが動いて、とにかく目を引きます。

そしてオシャレ!

スライドショーを入れるだけで、一気にオシャレなブログ・サイトに生まれ変わります!

 

では、今回のアップデートでWINGの機能紹介ページで真似してみたいと思っていた

カテゴリ一覧スライドショー」機能ができるようになったので、ご紹介したいと思います!

 

WINGで記事中にスライドショーを表示させる方法!

今までスライドショーといえば

ヘッダーで表示させるのが一般的で、当ブログもスライドショーで表示しています。

 

今回のアップデートでは、記事中にミニスライドショーを表示できるようになりました!

 

スライドショーは、ちょっと好みじゃないという方にも

記事中にカテゴリー一覧やおすすめ記事一覧を表示できるのは、嬉しい機能なのではないでしょうか。

ひよこさん
SEO的にも…ってヤツですね

 

スライドショーを表示する方法とカスタマイズ!

記事投稿画面で「タグ」をクリックし「記事一覧 / カード」を選択します。

カテゴリー一覧(スライドショー)」を選択します。

 

スライドショー

 

こちらが、基本のカテゴリー一覧ですので、お好きなようにカスタマイズしていきましょう。

スライドショー

 

カテゴリーIDの指定 st-catgroup cat="0"

この部分に、カテゴリーにつけられているIDを入力することで、カテゴリーだけのスライドショーができます。

ひよこさん
カテゴリーにつけられているID?
アフィ主婦
そう、ダッシュボードの「投稿」→「カテゴリー」を開くと

カテゴリーごとのIDがわかるわよ

 

最初は0になっているため、新着記事から表示されるようになっています。

 

ページの読み込み数 page="5"

この部分は、スライドショーの表示数をあらわします。

 

order="desc"

orderby="id"

カテゴリーをIDであらわします。変更なし。

 

子カテゴリーの読み込み child="on"

子カテゴリーを含めて読み込むか。

 

スライドショーのONOFF slide="on"

こちらをoffにすると、スライドショーの表示が消えます。

 

列数の指定 slides_to_show="3,3,1"

ひよこさん
列数の指定ってなに?
アフィ主婦
デフォルトでは、

大画面で3列表示、中画面で3列表示、小画面で1列表示よ。

 

大画面は、閲覧サイズが960px以上のこと。

中画面は閲覧サイズが600px~959pxのこと。

小画面は、閲覧サイズが599px以下のことです。

 

各閲覧サイズの列数の指定は、「大画面 , ( 半角カンマ ) 中画面 , 小画面」で区切って指定することができます。

 

例えば、 slides_to_show="3,3,3" なら、どんな閲覧サイズでも3列表示です。

なのでスマホで見たときは、少し小さくなってしまいますが、デザインは変えたくないというときに。

 

投稿日(更新日)の表示 slide_date=""

こちらをoffにすると、投稿日が表示されません。

 

続きを読むテキスト slide_more="ReadMore"

続きを読むテキストを変更することができます。

「ReadMore」でも「もっと詳しく」でもお好きにどうぞ。

 

 

スマホで両端が見切れるか slide_center="on"

スマホ閲覧時のみの設定です。

スマホ閲覧サイズを「1」にしたときに「slide_center="on"」を設定すると、両端が見切れるデザインに。

 

fullsize_type="" アイキャッチのみ、アイキャッチ+タイトル表示

デフォルトのままでは、記事本文が抜粋されて表示されています。

 

スライドをアイキャッチのみにしたい場合は、「"card"」を使用します。(fullsize_type="card")

スライドをアイキャッチと記事タイトルのみにしたい場合は、「"text"」を使用します。(fullsize_type="text")

 

これで、スッキリとしたカードをスライドすることができますよ。

 

記事以外でもスライドショー

記事中だけではなく

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

サイドバートップ及びサイドバーウィジェット」でも使えるようです。

※記事エリアとあわせて4か所が推奨エリアになっています。

 

ダッシュボードから「外観」→「ウィジェット」と進み

ヘッダー画像エリア下のウィジェット」に「テキスト」を入れます。

そこに、コピーしておいたカテゴリー一覧のショートコードを貼り付けます。

「保存」します。

こんな感じで、ヘッダーの下に、カテゴリー一覧がスライドショーで表示されます。

ヘッダーもスライドショーにしてあるので、見づらいですが( ;∀;)

 

同じく、サイドバートップウィジェット

スライドショーをいれてみました。

ひよこさん
小さくなってて見づらい!!
アフィ主婦
確かに。サイドバーでスライドショーする場合は、1列表示が見やすいかもね。

slides_to_show="3,3,2" → slides_to_show="1,1,1"でいいんじゃない?

 

スライドショーがオシャレに使えるWING(AFFINGER5)の詳しいページはこちら

 

WING(AFFINGER5)で記事中にスライドショーを出す方法!まとめ

スライドショーがあると、サイトが一気にオシャレに見えるような気がします。

 

関連記事をたくさん出して、見てもらおうとする気持ち、わかります!

せっかく心を込めて書いた記事、多くの方に読んでもらいたいですよね。

 

けれども、今回スライドショーをたくさん表示させて思ったのは

「キラリと光るボタン」同様、いっぱいあっても目がチカチカしちゃう!!ということ。

 

なにごとも、ほどほどが一番です^^;

人気の投稿とページ

-WINGカスタマイズ
-,

© 2021 あぶログ