【スライダー機能】MetaSlider（メタスライダー）

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

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

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

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

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

【プラグイン】MetaSlider（メタスライダー）

• 操作方法
  1. 新規スライドショー作成 »
  2. スライドショーの編集 »
  3. wow制作サイトの仕様 »

新規スライドショー作成

• 新規作成の手順
  1. 管理画面からMetaSliderを選択。 »
  2. 設定画面からNewを選択。 »
  3. スライドショーに名前を付ける。 »
  4. スライド画像を追加する。 »
  5. オプションを設定し、保存する。 »
  6. 任意の場所にショートコードを貼り付ける。 »

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

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

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

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

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

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

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

4. MetaSlider新規作成画面
   画面右上部のメニューからスライドを追加を選択し、画像の管理画面を開きます。

4. 画像の管理画面（メディアライブラリ）
   1. 追加する画像を選択。
   2. 選択後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。

4. 画像の管理画面（アップロード）
   1. 画面左上部のファイルをアップロードタブを選択。
   2. 画面中央の白いエリアに追加したい画像をドラック&ドロップ（重ねる）。
   3. 追加後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。

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

5. MetaSlider新規作成画面
   1. 画面左側のオプションを設定する。
   2. 画面上部の保存ボタンをクリックして保存。

オプション設定の項目

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

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

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

• 画像追加・削除の手順
  1. 管理画面からMetaSliderを選択しスライドショーを開く。 »
  2. スライドショーの編集
     【編集】画像を追加 »
     【編集】画像を削除 »
     【編集】スライドショーを削除 »
  3. 変更を保存。 »

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

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

2. MetaSlider設定画面
   画面上部のテキストボックスをクリックすると、スライドショーリストが表示される。
3. スライドショーリスト
   編集したいスライドショーを選択すると、選んだスライドショーの編集画面が表示される。

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

1. MetaSlider編集画面
   画面右上部のメニューからスライドを追加を選択し、画像の管理画面を開きます。

2. 画像の管理画面（メディアライブラリ）
   1. 追加する画像を選択。
   2. 選択後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。

2. 画像の管理画面（アップロード）
   1. 画面左上部のファイルをアップロードタブを選択。
   2. 画面中央の白いエリアに追加したい画像をドラック&ドロップ（重ねる）。
   3. 追加後、画面右下部のスライドショーを追加ボタンが青くなるのでクリック。

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

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

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

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

③変更を保存する。

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

wow制作サイト仕様

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

• wow仕様
  • 画像サイズ »
  • 設置箇所の管理 »
  • 公開時のオプション設定 »

画像サイズ

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

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

設置箇所の管理

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

• WordPress管理画面
  1. 画面右部のメニュー一覧から外観を選択。
  2. メニュー一覧の外観の下に表示されるウィジェットをクリック。

• ウィジェット編集画面
  1. 画面左部の配置箇所の一覧からコンテンツ上部を選択。
  2. コンテンツ上部内にテキスト（PC用）、テキスト（モバイル用）ウィジェットを利用して設置しています。

公開時のオプション設定

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