アダルトアフィリエイト無料講座step.12「スライド画像を表示する方法」

スライド画像 表示

Wordpressはプラグインを利用することで様々なカスタマイズなどを簡単にすることができるようになります。
今回は狭いスペースに何枚も画像をスライド表示させることができる「Easing Slider」の使用方法をご紹介します。
このサイトでもwordpressに入れておきたいプラグインとして紹介してますが、バージョンアップで少しずつ変ってますので改めてご紹介しようと思います。


Easing Sliderの設定

wordpressのプラグイン新規追加から、「Easing Slider」とうってこの画像が出てきたら、今すぐインストールをクリックし、有効化してください。

 

スライド画像 表示

スライド画像 表示

インストールが完了すると、ダッシュボードに「Sliders」とメニューが表示されるようになります。
新規に作成するので、「Add New」をクリックします。

 

スライド画像 表示

スライド画像 表示

@のName内にスライダーの名前を付けます。これは表示されるわけではないので、自分にわかりやすい名前を付けましょう。
Aは、画像を取り入れるためのボタンです。「Add Slides」をクリックして表示したい画像を選択します。何枚でも可能ですが、3から5枚くらいが妥当だと思います。
左側から順番に画像が表示されますので、順番を変えたいときは画像にマウスを持っていきスライドさせて変えてください。
・隣にあるチェックマークを付けるとランダム表示になります。
(注:画像は同じ大きさのものを事前に準備して置くことをお勧めします。画像の大きさが違うと空白などで見栄えが良くありません)

 

スライド画像 表示

スライド画像 表示

画像を取り入れたら、画像の上にマウスを持っていくと鉛筆マークが表示されますのでクリックします。

 

スライド画像 表示

スライド画像 表示

@Link Toでは「Custom URL」を選択してください。
Aにはリンク先のURLを打ち込みます。または、ASPの広告タグのURLでも構いません。
・リック先を開く際に新しいウィンドウで開くようにチェックマークも入れておきましょう。
・Altemative Textは画像に説明入れたいときに使います

 

スライド画像 表示

スライド画像 表示

Dimensionsをクリックして、スライダー枠のサイズを指定します。
この指定したサイズの枠でスライドします。

 

スライド画像 表示

スライド画像 表示

@画像をスライドさせるかフェイドアウトさせるかの設定です。
Aスライドする間隔の時間設定です。

 

スライド画像 表示

スライド画像 表示

@スライダーに矢印を表示させるかどうかの設定です。
Enableで矢印表示・Disableで非表示になります・
A画像の上にマウスを持って行ったときに、矢印が表示されるかどうかの設定です。
Trueで表示・Falseで未表示です。
B矢印が枠内に表示されるか、枠の外に表示させるかの設定です。

 

スライド画像 表示

スライド画像 表示

@画像の下に画像の枚数分だけ●●●●というように表示する設定です。
Enableで表示・Disableで非表示です。
A画像の上にマウスを持っていくと、●●●●と表示させる設定です。
B画像移動用アイコンをどこに表示させるかの設定です。

 

スライド画像 表示

スライド画像 表示

@スライダーを自動で動かす設定です。
Enableで自動で動きます・Disableは手動になります。
A画像が何秒止まっているかの設定です。

 

スライド画像 表示

スライド画像 表示

設定が終わったら「Update」をクリックします。
ここをクリックしないと保存なりませんので注意しましょう。

 

スライド画像 表示

スライド画像 表示

スライダーの設定は終わりましたので、今度は表示させる設定です。
wordpressのダッシュボードのメニューから「外観」→「ウィジェット」
これで、右側に「Slider」の項目が表示されますのでクリックします。
後は表示させたい箇所を選択します。
最後にウィジェットを追加をクリックします。

 

スライド画像 表示

スライド画像 表示

表示させたい箇所に「Slider」が出ていると思います。
クリックして「Select Slider」から打ち込んでおいたスライダー名を選択して、「保存」をクリックすれば完了です

 

スライド画像 表示

 

これで、サイトにスライダーが表示されているはずです。
確認してみてください。

 

最後までお読みいただきありがとうございました。