AFFINGER6

AFFINGER6でスライドショーを設置する方法

更新日 :

AFFINGER5でスライドショーを設置する方法【カスタマイズの手順も!】
AFFINGERでスライドショーを設置する方法を知りたい!
AFFINGER6でスライドショーをカスタマイズする方法を知りたい!

今回はこんな疑問にお答えしていきます!

AFFINGER6のデザイン上の強みとして「スライドショーの実装機能」が挙げられます。

実際の表示はこんな感じ。

スライドショー完成図

こういったスライドショーをトップページや投稿ページに設置することで、より見やすくてオシャレなデザインを実装できるのです。

そこで今回はAFFINGER6に標準で搭載されている「スライドショー機能」の設置方法やカスタマイズの方法についてご紹介していきます。

AFFINGER6を導入したての方や購入しようか迷っている方は必見です!

この記事でわかること

  • AFFINGER6でスライドショーを表示させる方法
  • AFFINGER6のスライドショー機能のカスタマイズ方法
  • AFFINGER6でスライドショーを設置する際の注意点

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせてご覧ください。

\今なら当サイト限定の豪華特典付き/

AFFINGER6の詳細を見る

AFFINGER6でスライドショーを表示させる方法

AFFINGER6のスライドショー機能の設置方法

それでは早速AFFINGER6のスライドショー機能の設置方法について解説していきます。

具体的な手順は以下の通り。

AFFINGER6のスライドショー機能の設置方法

  1. スライドショー用のショートコードを挿入
  2. ショートコードの属性をカスタマイズ
  3. 設定したスライドショーを好きな場所に設置

それでは順番に見ていきましょう!

1. スライドショー用のショートコードを挿入

AFFINGER6では記事編集画面から設置できるショートコードを使ってスライドショーを実装できます。

まずはWordPress管理画面から記事編集画面に移動しましょう。

投稿ページでも固定ページでも構いません

するとエディタ画面の上の方に「タグ」メニューがあると思います。

記事一覧スライドショー(新着記事)の設置

そうしたら「タグ」メニューを開いて「記事一覧 / カード」→「カテゴリ一覧(スライドショー)」を選択しましょう。

すると以下のようなショートコードが出力されます。

 カテゴリ一覧(スライドショー)のショートコード
[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=""]

2. ショートコードの属性をカスタマイズ

ショートコードを挿入したら、設置したいスライドショーに合わせてコードを編集する必要があります。

各属性の意味は以下の通りです。

  • st-catgroup cat=""
    カテゴリID(0だと全てのカテゴリー)
  • page=""
    表示する記事数
  • order=""
    新しい順なら「desc」古い順なら「asc」
  • orderby=""
    並び順を「id,date,modified,ran」から選択"
  • child=""
    子カテゴリー表示のon,off
  • slide=""
    スライドショーを表示するかのon,off
  • slides_to_show="3,3,1"
    表示する記事数(先頭の3を変更)
  • slide_date=""
    日付を表示するかのon,off
  • slide_more=""
    「続きを読む」のテキスト
  • slide_center=""
    スマホ端末での表示のon,off
  • fullsize_type=""
    「画像のみ表示:card」「画像とテキストを表示:text」「すべて表示:""」

それぞれお好みで設定しましょう。

3. 設定したスライドショーを好きな場所に設置

ショートコードを編集し終わったら、早速好きな場所に設置していきましょう。

投稿記事や固定ページに表示させる場合は、そのままエディタ画面から公開すれば問題ありません。

それ以外の場所に設置したい時はウィジェットメニューから設定していきます。

まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしましょう。

ウィジェットへ

ウィジェットメニューでは左側にウィジェット一覧が、右側にウィジェットを設置する場所一覧が表示されています。

ウィジェット一覧から「テキスト」を選択して、好きな場所に追加しましょう。

ウィジェットを設置

ここでは例として「ヘッダー画像エリア下のウィジェット」に設置していきます。

他にも「投稿記事の上に一括表示」「フッター用ウィジェット」なんかがおすすめです

スライドショーを設置

ウィジェットを設置したら、小さな入力画面が表示されますので「ビジュアルモード」になっていることを確認して、先程のスライドショー設置用のショートコードを入力しましょう。

タイトルは設定してもしなくても大丈夫ですが、個人的には見た目的に必要ないと思います。

設定が終わったら青い「保存ボタン」を押して反映させましょう

これでスライドショーの設置は完了です!

AFFINGER6のスライドショー機能のカスタマイズ方法

AFFINGER6のスライドショー機能のカスタマイズ方法

スライドショーのスピードを調整できないかな?
スライドショーの動く向きを変更したい!

実際にスライドショーを設置してみると、こんな悩みが出てくることがあります。

もちろんAFFINGER6ならこういった悩みもあっという間に解決することができます!

まずは下画像のようにWordPress管理画面から「AFFINGER6管理」→「ヘッダー」→「画像スライドショー設定」に移動しましょう。

スライドショーカスタマイズ

すると画像スライドショー設定の部分に以下のような設定項目が用意されています。

画像スライドショー設定

画像スライドショー設定

  • ヘッダー画像をスライドショーで表示するがどうかの選択
  • スライドショーの表示方法の選択「フェードイン・フェードアウト」「右から左」「左から右」
  • スライドショーの表示速度(ミリ秒)

それぞれお好みで設定しましょう。

設定が終わったら「save」を押して変更を反映させましょう!

AFFINGER6でスライドショーを設置する際の注意点

AFFINGER6でスライドショーを設置する際の注意点

最後にAFFINGER6でスライドショーを設置する際の注意点だけご説明します。

それは

スライドショーを設置するとサイトの表示スピードが遅くなる

ということ。

スライドショーを表示させるにはCSSファイルやJavaScriptファイルを大量に読み込む必要があるため、その分表示スピードも遅くなります。

既にサイトスピードが高速、という方は多少遅くなっても問題ないと思いますが、スライドショーを設置していない段階でサイトスピードが遅い方は、その前にサイトスピードを速くしておくことをオススメします。

サイトスピードを速くするための方法についてはこちらの記事がオススメです。

Autoptimizeの設定方法と使い方をご紹介【サイトスピード高速化プラグイン】
Autoptimizeの設定方法と使い方を解説【サイトスピード高速化プラグイン】

Autoptimizeってどんなアプリなの?設定方法や使い方を知りたい! 今回はこんな疑問にお答えしていきます。 WordPressをご使用の皆さん「Autoptimize」は使ってますか? 「Aut ...

続きを見る

サイトスピードを改善・高速化する7つの方法をご紹介!
サイトスピードを改善・高速化する7つの方法を徹底解説

ウェブサイト運営やSEO対策の関係者の皆さん、サイトスピードの高速化は出来ていますか? サイトスピードはサイトのユーザービリティを大きく左右する重要な項目です。 私はインターン先のウェブ広告会社で、1 ...

続きを見る

まとめ:AFFINGER6でスライドショーを設置する方法【カスタマイズの手順も!】

まとめ:AFFINGER6でスライドショーを設置する方法【カスタマイズの手順も!】

AFFINGER6でスライドショーを設置する方法のまとめ

  1. AFFINGER6なら誰でもカンタンにオシャレなスライドショーを実装できる
  2. もちろん表示速度や移動の向きなどのカスタマイズも可能!
  3. AFFINGER6でスライドショーを設置するとサイトスピードが遅くなるので注意しよう

今回はAFFINGER6でスライドショーを設置する方法やカスタマイズの手順についてご紹介しました。

スライドショーはオシャレなサイトを作る上で欠かせない機能です。

WordPressテーマによってはスライドショー機能が搭載されていないものもありますが、AFFINGER6ではデフォルトで実装できるという強みがあります。

AFFINGER6の便利機能を活かして、より良いサイト作っていきましょう!

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきますので応援よろしくお願いします!

AFFINGER6のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER6(アフィンガー6)のカスタマイズ方法まとめ

AFFINGER6のサイトをオリジナルにカスタマイズする方法を知りたい! AFFINGER6をオシャレにカスタマイズしたいけど手順が分からない! 今回はこんな悩みを解決していきます。 AFFINGER ...

続きを見る

\今なら当サイト限定の豪華特典付き/

AFFINGER6の詳細を見る

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-AFFINGER6

Copyright © wagtechblog All Rights Reserved.