目次
１．新規スライダー作成
①管理画面→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」をクリックします。
③編集画面で表示されますので、左メニューに表示されている４本線のアイコン「Text layer」をクリックします。
④最初からなにか文字が入ってますが、削除して新たに文字を入力します。
※バケツアイコンで文字のサイズや色変更もできます。
⑤ドラックドロップ位置を移動できますので、表示位置に設定し、「SAVE」ボタンをクリックします。
これで、テキストが表示されます！
アニメーションを指定すると、様々な動きがつけられますのでお試しください。
公式ホームページマニュアル
公式ホームページマニュアル
こちらが公式の説明書になります。