【スライダー機能】MetaSlider(メタスライダー)

制作サイトマニュアル
この記事は約8分で読めます。

wowで制作したWebサイトに実装しているプラグインのマニュアルです。

スライダー機能として、MetaSlider(メタスライダー)というプラグインを導入しています。

スポンサーリンク

【予備知識】スライダー機能

スライダーのサンプル
  • スライダーとは?
    複数の画像を切り替えて表示できる機能です。
    カルーセル、スライド表示とも言います。

自動で画像が切り替わるのを利用して、メッセージをストーリー的に伝えたり、他のページにリンクさせてキャンペーンや新商品の情報発信に利用されます。

wowで制作したWebサイトでは、HOMEページに設置しています。

スライダー機能
○ メリット・ページの最初に表示される範囲に、多くの情報を表示できる。
・自動で画像が切り替わるため、訪問者の目に留まりやすい。
× デメリット・データ容量が重くなるので、ページ表示速度が遅くなる。
・2枚目以降のクリック率は低い傾向がある。
スポンサーリンク

【プラグイン】MetaSlider(メタスライダー)

新規スライドショー作成

①管理画面からMetaSliderを選択。

  1. WordPress管理画面
    画面左部のメニュー一覧からMetaSliderを選択し、MetaSliderの設定画面を開きます。

②設定画面からNewを選択。

  1. MetaSlider設定画面
    画面右上部のメニューからNewを選択すると、新規作成画面が表示されます。

③スライドショーに名前を付ける。

  1. MetaSlider新規作成画面
    まず、スライドショーに名前を付けます。
     ※ここで付けた名前は管理画面だけに表示されます。

④スライド画像を追加する。

  1. MetaSlider新規作成画面
    画面右上部のメニューからスライドを追加を選択し、画像の管理画面を開きます。
メディアライブラリから追加
  1. 画像の管理画面(メディアライブラリ)
    1. 追加する画像を選択。
    2. 選択後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。
アップロードして追加
  1. 画像の管理画面(アップロード)
    1. 画面左上部のファイルをアップロードタブを選択。
    2. 画面中央の白いエリアに追加したい画像をドラック&ドロップ(重ねる)。
    3. 追加後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。

⑤オプションを設定し、保存する。

  1. MetaSlider新規作成画面
    1. 画面左側のオプションを設定する。
    2. 画面上部の保存ボタンをクリックして保存。
オプション設定の項目
オプション項目概要
スライダー種別・FlexSlider:デフォルト。2種類の切り替え効果。
・R.Slider :PC⇔モバイルの切り替え時、自動でサイズ調整。
・Nivo Slider:14種類の切り替え効果。
・Coin Slider:4種類の切り替え効果。
スライドショーの幅を指定。(px)
高さスライドショーの高さを指定。(px)
効果画像表示のアニメーションを指定。
矢印スライド画面にカーソルを重ねた時に矢印を表示。
ナビゲーション・非表示
・点
スライドショー下部に画像枚数分のアイコンを表示。
カスタムテーマスライドショーのデザインテンプレートを選択。
高度な設定
100%幅デバイスの画面いっぱいに拡大。
中央揃え画面の中央に揃える。
自動再生スライド画像を自動で切り替える。
画像の切り抜き・スマート切り抜き
・標準
・無効
・無効(Smart Pad)
カルーセル・モード一度に複数の画像を表示。
カルーセルマージンカルーセル・モードの画像の余白(px)
Fade in画像が表示される際のアニメーションを指定。
ランダムスライドの表示順をランダムにする。
停止ボタン表示スライド画面にカーソルを重ねた時に自動切り替えを停止。
逆戻りスライドの表示順を逆にする。
スライドの遅延1枚の画像の表示時間(ms(1/1000秒))
アニメーションの速度アニメーションの速度(ms(1/1000秒))
スライドの方向・水平方向
・垂直方向
イージングアニメーションの動きの種類
前のテキスト戻るボタンの表示テキスト
次のテキスト進むボタンの表示テキスト
開発用オプション
cssクラスcssのclass設定
cssを出力独自のCSSを含める場合はチェックを外す。
JSを出力独自のJavascriptを含める場合はチェックを外す。
競合モードなしフレックススライダー化を遅延。

⑥任意の場所にショートコードを貼り付ける。

  1. MetaSlider設定画面→任意の箇所
    1. MetaSlider設定画面の右下部使い方(←ショートコード)をコピー。
    2. 任意の場所にショートコードを貼り付ける。
    3. 正しく表示されていれば、設置完了。

スライドショーの編集(画像の追加・削除)

①管理画面からMetaSliderを選択しスライドショーを開く。

  1. WordPress管理画面
    画面左下部のメニュー一覧からMetaSliderを選択し、MetaSliderの設定画面を開きます。
  1. MetaSlider設定画面
    画面上部のテキストボックスをクリックすると、スライドショーリストが表示される。
  2. スライドショーリスト
    編集したいスライドショーを選択すると、選んだスライドショーの編集画面が表示される。

②-1【スライドショーの編集】画像を追加する。

  1. MetaSlider編集画面
    画面右上部のメニューからスライドを追加を選択し、画像の管理画面を開きます。
メディアライブラリから追加
  1. 画像の管理画面(メディアライブラリ)
    1. 追加する画像を選択。
    2. 選択後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。
アップロードして追加
  1. 画像の管理画面(アップロード)
    1. 画面左上部のファイルをアップロードタブを選択。
    2. 画面中央の白いエリアに追加したい画像をドラック&ドロップ(重ねる)。
    3. 追加後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。

②-2【スライドショーの編集】画像を削除する。

  1. MetaSlider編集画面
    1. 画像項目右上部の×をクリックすると画像が削除できます。

②-3【スライドショーの編集】スライドショーを削除する。

  1. MetaSlider編集画面
    1. ページを最下部までスクロール。
    2. 左側のDELETE SLIDESHOWをクリックするとスライドショーが削除できます。

③変更を保存する。

  1. MetaSlider編集画面
    1. 編集が済んだら、画面左上部の保存を選択。
    2. 実際のWebページで変更されているかを確認する。

wow制作サイト仕様

wowで制作したWebサイトでの仕様をまとめています。

画像サイズ

デバイスに合わせて、パソコン用の横長画像⇔モバイル用の縦長画像を切り替えて表示するようにしています。

  • スライダーの設定サイズ(画像サイズ)
    • パソコン表示:1280px × 720px
    • モバイル表示:618px × 1000px

※制作時のオーダーにより、異なるサイズの場合もございます。

  • MetaSlider編集画面
    1. 画面左側に表示されています。

設置箇所の管理

ウィジェットを使って、HOMEページのコンテンツ上部に表示するようにしています。

  • WordPress管理画面
    1. 画面右部のメニュー一覧から外観を選択。
    2. メニュー一覧の外観の下に表示されるウィジェットをクリック
  • ウィジェット編集画面
    1. 画面左部の配置箇所の一覧からコンテンツ上部を選択
    2. コンテンツ上部内にテキスト(PC用)テキスト(モバイル用)ウィジェットを利用して設置しています。

公開時のオプション設定

オプション項目デフォルト(wow)概要
スライダー種別FlexSlider・FlexSlider:デフォルト。2種類の切り替え効果。
・R.Slider :PC⇔モバイルの切り替え時、自動でサイズ調整。
・Nivo Slider:14種類の切り替え効果。
・Coin Slider:4種類の切り替え効果。
PC:1280px
SP:618px
スライドショーの幅を指定。(px)
高さPC:720px
SP:1000px
スライドショーの高さを指定。(px)
効果フェード画像表示のアニメーションを指定。
矢印スライド画面にカーソルを重ねた時に矢印を表示。
ナビゲーション・非表示
・点
スライドショー下部に画像枚数分のアイコンを表示。
カスタムテーマ空欄スライドショーのデザインテンプレートを選択。
高度な設定
100%幅デバイスの画面いっぱいに拡大。
中央揃え画面の中央に揃える。
自動再生スライド画像を自動で切り替える。
画像の切り抜きスマート切り抜き・スマート切り抜き
・標準
・無効
・無効(Smart Pad)
カルーセル・モード一度に複数の画像を表示。
カルーセルマージンカルーセル・モードの画像の余白(px)
Fade in画像が表示される際のアニメーションを指定。
ランダムスライドの表示順をランダムにする。
停止ボタン表示スライド画面にカーソルを重ねた時に自動切り替えを停止。
逆戻りスライドの表示順を逆にする。
スライドの遅延30001枚の画像の表示時間(ms(1/1000秒))
アニメーションの速度600アニメーションの速度(ms(1/1000秒))
スライドの方向水平方向・水平方向
・垂直方向
イージングLinearアニメーションの動きの種類
前のテキスト前へ戻るボタンの表示テキスト
次のテキストNext進むボタンの表示テキスト
開発用オプション
cssクラス空欄cssのclass設定
cssを出力独自のCSSを含める場合はチェックを外す。
JSを出力独自のJavascriptを含める場合はチェックを外す。
競合モードなしフレックススライダー化を遅延。
スポンサーリンク

【関連リンク】制作サイトマニュアル

サイトマニュアル »
WordPress
管理画面 »投稿 »
メディア »固定ページ
WordPressテーマ「Cocoon」
Cocoon設定高速化
プラグイン(デフォルト) »
Contact Form 7Custom Taxonomy Order
Disable Google Fonts »EWWW Image Optimizer
Invisible reCaptchaWebSub (FKA. PubSubHubbub) »
WP Fastest Cache »WP Multibyte Patch »
XML Sitemaps »
カスタマイズ »
スライダー機能 »リダイレクト機能
facebook埋め込みInstagram埋め込み
Twitter埋め込み

タイトルとURLをコピーしました