AFFINGER5でスライダーを表示させる方法|初心者向けカスタマイズ
AFFINGER5でスライダーを表示させる方法|初心者向けカスタマイズ

AFFINGER5で、ヘッダー部分に画像スライダーを設置する方法を解説します。

AFFINGER5 スライダー

AFFINGER5 スライダー

スライドさせたい画像を準備

スライド表示させたい画像を準備します。
予め2、3枚ほど準備しておきましょう。

 画像サイズについて
2200×500ピクセルにするとピッタリとフィットします。 高さが大きい場合でも、アップロードした後で表示させたい部分を切り抜くことができます。

画像をスライド表示できるように設定

WordPressの管理画面を開き、『AFFINGER5管理』をクリックします。

WordPressの管理画面を開き、『AFFINGER5管理』をクリック

WordPressの管理画面を開き、『AFFINGER5管理』をクリック

AFFINGER5の管理画面が開きます。

メニューの『ヘッダー』をクリックしましょう。

メニューの『ヘッダー』をクリック

メニューの『ヘッダー』をクリック

ヘッダーの設定画面が開きます。

「画像スライドショー設定」という項目までスクロールし、
ヘッダー画像をスライドショーで表示する』にチェックを入れましょう。

『ヘッダー画像をスライドショーで表示する』にチェック

『ヘッダー画像をスライドショーで表示する』にチェック

「スライドショーの表示方法」で、表示のさせ方を指定できます。

スライドショーの表示方法

スライドショーの表示方法

  • フェードイン・アウト
    画像がスライドせずにフェードイン・フェードアウトします。
  • 右から左
    画像が右から左にスライドします。
  • 左から右
    画像が左から右にスライドします。

「スライドショーの表示速度」で、画像を表示する速度を設定できます。

スライドショーの表示速度

スライドショーの表示速度

全ての設定が完了したら、ページ最下部の『save』ボタンをクリックしましょう。

『save』ボタンをクリック

『save』ボタンをクリック

スライドさせる画像を設定

WordPressの管理画面左サイドメニューから『外観カスタマイズ』という順にクリックして進みます。

『外観→カスタマイズ』という順にクリック

『外観→カスタマイズ』という順にクリック

カスタマイズページが開きます。 左のメニューの『ヘッダー画像』をクリックしましょう。

『ヘッダー画像』をクリック

『ヘッダー画像』をクリック

新規画像を追加』ボタンをクリックします。

『新規画像を追加』ボタンをクリック

『新規画像を追加』ボタンをクリック

事前に準備しておいた画像をアップロードするかメディアライブラリから選択し、『選択して切り抜く』ボタンをクリックしましょう。

『選択して切り抜く』ボタンをクリック

『選択して切り抜く』ボタンをクリック

画像の上に点線の枠が表示されているので、好みの場所で切り抜きたい場合は、枠を動かして『画像切り抜き』ボタンをクリックします。

切り抜かない場合は、『切り抜かない』ボタンをクリックします。

画像の切り抜き

画像の切り抜き

これで、1枚目の画像が設定されました。

AFFINGER5 スライダー

AFFINGER5 スライダー

同様に、スライドさせたい画像をアップロードしていきます。

2枚の画像を設定してみました。

AFFINGER5 スライダー

AFFINGER5 スライダー

スライド画像の設定が終わったら、左上の『公開』ボタンをクリックします。

『公開』ボタンをクリック

『公開』ボタンをクリック

最後に、サイトを開いてスライダーがきちんと表示されているか確認しましょう。

設定した2枚の画像がスライド表示されました。

AFFINGER5 スライダー

AFFINGER5 スライダー

これで、スライダーの表示設定は完了です。

まとめ

今回は、AFFINGER5でヘッダー部分に画像スライダーを設置する方法を解説しました。

スライダーを設置することで、ユーザーにサイトのイメージを効果的に伝えることができるので、商品サイトや企業・店舗サイト等を運営している人には特におすすめの機能です。

気になった方はぜひ設定してみてください。

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事