
目次
1.新規スライダー作成
①管理画面→Simple Sliderをクリックします。
②NEW SLIDERボタンをクリックします。

③ヘッダーの大きさを選択します。お好みで選択して下さい。
出荷時のサンプルスライダーの設定は、「Full width」です。

④ADD SLIDEボタンをクリックし、画像を選択します。(まだアップロードしてない場合はここでアップロードします)

⑤選択した画像が並んで表示されます。ここでは3枚の画像を選択しました。

⑥メニューの「GENERAL」をクリックし、各種設定をしていきます。
サンプルスライダーの設定では、Nameのみ入力し、後は初期設定のまま変更していません。

・Name: | 名称を設定します。 |
・Controls: | スライダーヘッダーを動かす方法を選択します Mouse scroll:マウスのスクロールボタン Mouse drag:マウスのドラッグ Touch:Disabled(禁止)、DisabledHorizontalVertical(許可) Keyboard:キーボードの矢印キー |
・Thumbnail: | サムネイル |
・Align: | 表示位置を選択します。 |
・Slide background image fill: | スライド画像のスタイルを選択します。 |
⑥スライダーヘッダーのアニメーションを選択します。
お好みで選択して下さい。

このアニメーションは、画像とテキストと組み合わせたアニメーションの動きを設定するものです。
サンプルページ
スライダー画像にテキストを入力する方法は、こちらをご覧ください。
・Main animation: | スライダーヘッダーの動きを選択します。 ・No animation:なし ・Fade:ゆっくり切り替わります ・Crossfade:重なりながら切り替わります ・Horizontal:左からから右へスライドします ・Vertical:下から上へスライドします ・Horizontal-reversed:右から左へスライドします ・Vertical-reversed:上から下へスライドします |
・Main animation properties: | スライダーヘッダーの動きの速度を選択します |
・Background animation: | フェイドイン、フェイドアウトなどの動きを指定できます |
⑦スライダーヘッダーに表示される次の画像へのリンクマークの設定です
下段メニューの「ARROWS」をクリックします。

・Shows on hover: | マウスオーバーしていない時にマークを表示する設定をします。 ・マウスオーバーしていない時はマーク表示しない:チェックをつける ・マウスオーバーしていない時でもマーク表示をする:チェックを外す |
・Previous: | マークの種類、色を選択します。 |
・Style: | マークの背景色等、細かい設定をすることができます。 |
・Previous position: | 戻るボタンのマークの位置を設定します。 |
・Next position: | 進むボタンのマークの位置を設定します。 |
・Alt tags: | マークにマウスオーバーしたときに表示される文字を設定します。 |
⑦画像の枚数分表示される●の設定をします。
下段メニューの「BULLETS」をクリックします。

・Shows on: | マウスオーバーしていない時にマークを表示する設定をします。 ・マウスオーバーしていない時はマーク表示しない:チェックをつける ・マウスオーバーしていない時でもマーク表示をする:チェックを外す |
・Thumbnail: | ●にマウスオーバーするとサムネイルが表示されるように設定します。 |
・Position: | 表示する位置を設定します。 |
・Dot style: | ●のスタイルを設定します。 |
・Bar style: | ●を表示するエリアのスタイルを設定します。 |
⑧下段メニューの「AUTOPLAY」設定
動画をヘッダー画像に設定する時に使用します。
動画を指定していない場合は設定の必要がはありません。

・アイコン選択: | 再生・停止ボタンを表示するかしないかを選択します。 |
・Shows on hover: | マウスオーバーしていない時にマークを表示する設定をします。 |
⑨「TEXT BAR」設定
下段メニュー「TEXT BAR」をクリックします。ヘッダー画像の下に画像の説明等を表示させたいときに設定します。

・アイコン選択: | テキストを表示するかしないかを選択します。 |
・Shows on hover: | マウスオーバーしていない時にマークを表示する設定をします。 ・マウスオーバーしていない時はマーク表示しない:チェックをつける ・マウスオーバーしていない時でもマーク表示をする:チェックを外す |
⑩「THUMBNAILS」設定
下段メニュー「THUMBNAILS」をクリックします。ヘッダー画像の下にサムネイルを表示させたいときに設定します。

・アイコン選択: | サムネイルを表示するかしないかを選択します。 |
・Shows on hover: | マウスオーバーしていない時にマークを表示する設定をします。 マウスオーバーしていない時はマーク表示しない:チェックをつける マウスオーバーしていない時でもマーク表示をする:チェックを外す |
・Thumbnail: | サムネイルの幅と高さを設定します。 |
⑩「SHADOWS」設定
下段メニュー「SHADOWS」をクリックします。ヘッダー画像の下に影を表示させたいときに設定します。

・影を表示するかしないかを選択します。
・影の形を選択します。
⑪上段メニューの「SIZE」をクリックし、各種設定をしていきます。
スライダーヘッダーのサイズを設定します。

・Slider Size: | お好みのサイズを選択します。 |
・Margin: | 画像周りの余白を設定します。 |
・Responsive mode: | 携帯やタブレットで表示する時の設定をします。 |
・表示方法: | Autoかフルサイズを指定します。 |

⑫上段メニューの「AUTOPLAY」をクリックし、各種設定をしていきます。
ヘッダーの画像を切り替える間隔を設定します。

・Autoplay: | 自動で画像を切り替えるか設定します。切り替える間隔をミリ秒で指定します。 自動で画像を切り替えるを有効にするには:オンにする 手動で画像を切り替えるを有効にするには:オフにする |
・Stop autoplay on: | 自動で切り替える動作を止める方法を設定します。 |
⑫ここまで基本の設定は終了です。ページ上部にある「SAVE」ボタンを押して保存して下さい。

⑬先ほど作成したスライダーは「PREVIEW」より確認することができますので、見ながら調整することができます。

2.表示設定
先ほど作成したスライダーヘッダーをWPのヘッダーに設定します。
管理画面→外観→カスタマイズをクリックします。
カスタマイズ画面が表示されたら、カスタマイズメニューのTheme Settings→Homeをクリックします。
Theme Settings画面で「Home Page Slider」に先ほど作成したスライダを選択し、「公開」ボタンをクリックしたら設定完了です。

カスタマイズしてみよう!
スライダー画像にテキストを入力する
①テキストを入力したいスライダーを選択します。
②テキストを入力したい画像の「EDIT」をクリックします。
③編集画面で表示されますので、左メニューに表示されている4本線のアイコン「Text layer」をクリックします。

④最初からなにか文字が入ってますが、削除して新たに文字を入力します。

※バケツアイコンで文字のサイズや色変更もできます。

⑤ドラックドロップ位置を移動できますので、表示位置に設定し、「SAVE」ボタンをクリックします。

これで、テキストが表示されます!
アニメーションを指定すると、様々な動きがつけられますのでお試しください。
公式ホームページマニュアル
公式ホームページマニュアル
こちらが公式の説明書になります。