Easing Slider “Lite”っていうワードプレスのプラグインスライドショーっていける!!

Easing Slider "Lite"最近、情報商材アフィリエイトサイトで

 

よくみかけるよになった

 

スライドショーを設置しました。

 

 

うん、これけっこういけますね!

 

 

僕のブログにもついています、商材の広告のスライドショーです。

これ、いいでしょう(^_^)v

easing_slider000

最初は、こういうものを付けるとブログが重くなるんじゃないかと思っていたんですが、

設置してみたら、それほど重い感じもなく、スライドもサクサク動いてくれて、

めちゃ気に入っています。

 

それに、けっこうですね、ここをクリックしてくれる人もいるんで重宝しています。

今日は、その設置の仕方を解説します。

 

 

□ まず、Easing Slider “Lite”のインストールから

 

easing_slider001

ワードプレスの管理画面の左サイトバー「プラグイン」にカーソルを合わせ「新規追加」をクリック。

 

 

easing_slider002

プラグイン画面の赤枠「検索」に 「easing slider “lite”」と入力して、「プラグインの検索」をクリック。

 

 

easing_slider003

 

いろんなプラグインが出てきますが、一番上の「Easing Slider “Lite”」の下にある、

「いますぐインストール」をクリック。

 

 

easing_slider004

管理画面の左サイドバーの中あたりに「Slideshow」というのが表示されているはずです。

これで、インストールの完了です。

 

そうですね、Easing Slider “Lite” を設置する前に、スライド用の画像を用意して

ください。

 

画像のサイズは、3カラムの場合は、巾が500ピクセルくらい、

高さが、250ピクセルくらいです。

2カラムの場合は、巾が600ピクセルくらいになります。

 

このサイズは、あなたのワードプレスのテンプレートによって変わってきますので

だいたいこのくらいのサイズでってことになります。

 

スライド画像は、4個~5個くらいがいいですね。

 

 

□  Easing Slider “Lite”の設定の仕方

 

上の画像の赤枠 「Edit Slideshow」をクリック。

easing_slider005

次の画面の右端にある、「Manage Slides」の下にある赤枠「Add Images」をクリック。

 

 

easing_slider007

用意した画像を、ワードプレスの画像ファイルに追加します。

ファイルをアップロードをクリック。

 

 

easing_slider008

赤枠の「ファイルを選択」をクリック。

 

 

 

easing_slider009

ファイルのアップロードから、先ほどの用意した画像を選択します。

 

僕は、デスクトップの「スライドショーの画像」に入れてあるので、

デスクトップにある、画像のはいったファイルを探します。

 

 

 

easing_slider010

ファイルの中にある画像を、ドラッグ&ドロップで、「ファイルの選択」に、入れます。

4つの画像をこのように、すべて入れてください。

 

 

easing_slider011

これで、スライドショーに使う、画像がワードプレスに入りました。

 

 

easing_slider012

次に、Easing Slider “Lite”の方に、画像を設定します。

ワードプレスにあるスライドショーに使う、画像をクリック。

赤枠の「Insert info slideshow」をクリック。

 

 

easing_slider013

「Welcome to Easing Slider “Lite”」の画面でこのように、スライドショーをする画像が並びます。

次にこの画像にリンクやalt属性をつけます。

 

 

easing_slider014

1つ、画像をクリック。

 

 

easing_slider015

赤枠のところに、リンク先、僕の場合は、「シリウスのレビューと豪華特典」のURLです。

その下、緑枠は、このままです。(” target=”_blank”)ターゲットブランクです。別窓で開いてくれます)

 

 

easing_slider016

その下に、画像のタイトル僕の場合は、「シリウスのレビュー」と入れました。

その下のalt属性も 同じ「シリウスのレビュー」にしました。

 

 

easing_slider017

上の画像設定が決まったら、赤枠の「Apply Changes」で保存されます。

5つの画像を、1つ、1つ設定してください。

 

 

□ その他の設定

easing_slider018

「Dimensions」のひだりの▼をクリック。

画像の大きさを設定してください。

 

「Make this slidesshow responsive」は、できるだけチェックをいれたほうがいいですね。

これは、スマートフォンでも、同じようにスライドショーをみれるようになります。

 

 

easing_slider019

Transitionsの左の▼をクリック。

この2つは、デフォルト(初期設定)でOKです。

 

 

easing_slider020

Next & Previous Arrowsの左の▼をクリック。

これもデフォルトでいいかな(初期設定)

スライドに矢印をつけるとか、つけないとか。

 

 

easing_slider021

Paginationの左の▼をクリック。

スライドショーの下に〇がつきます。4つの画像なら4つ、5つの画像なら5つ。

これも、デフォルトで問題ないですね。

 

 

easing_slider022

Automatic Playback の左の▼をクリック。

Playback はデフォルトでいいです。

 

問題は、「Pause Duration」です。

デフォルトでは、4000くらいになっていますが、僕は、8000にしました。

 

この方が、ゆっくりと画像が切り替わってくれるので、いいのでは。

う~~ん、まあ、人それぞれですね。

 

 

easing_slider023

これですべての設定は完了です、「Save Slideshow」をクリックして、保存してください。

 

 

□ 最後の解説です

 

下記のソースを、PHPファイルにコピペしてください。

<?php if ( function_exists( “easingsliderlite” ) ) { easingsliderlite(); } ?>

 

すいません、ごめんどうですが、左の< と右の>は、全角になっていますので

半角に直して貼りつけてください。

うまくいかない場合は、下記のサイトでコピペしてください。(これが確実)

http://pannyatto.net/slideshow_for_wp/

 

 

貼りつける場所ですが、

 

easing_slider024

 

管理画面左サイドバーの外観にカーソルを合わせます。

赤枠の「テーマの編集」をクリック。

 

 

easing_slider029

 

右サイドバーにある 「メインインデックスのテンプレート」 か 「indexphp」を

探してください。

見つかったら、それをクリック。

 

 

easing_slider026

 

PHPファイルから、赤枠の「▽メインコンテンツ」をさがしてください。

それとも 「<div id=”main-contents”>」をさがしてください。

 

緑枠は、なくてもいいです。

下の赤枠のように、貼りつけてください。

 

 

easing_slider027

 

赤枠のとおり貼りつけたら、「ファイルを更新」してください。

 

これで、すべて完了なんですが、これは、賢威のテンプレートをもとに

説明してます。

 

そのため、他のテンプレートの場合、PHPファイルのHTMLがみつかると

いいのですが、、、、。

 

問題は、スライドショーのショートコードを入れる場所ですね。

なんとかして、「<div id=”main-contents”>」と記してある

場所を探してください。

 

 

 

無事にスライドショーができた方は、こちら

 

easing_slider031

簡単なカスタマイズができます。

「Slideshow」にカーソルを合わせ「Customize」をクリック。

 

 

easing_slider032

 

「Border」をクリック。

画像に枠を付けることができます。

 

「Width」で枠の線の太さを決めます。

「Radius」で枠の角を丸くすることができます。限界が10くらいまでです。

 

最後に、上にある「Save」をクリックして保存します。

 

 

はい、お疲れ様でした。

 

 

 

ランキングに参加しています(^_^)v

ブログランキング

 

 

 

まえむき

 

管理人まえむきに質問があれば、下記からどうぞ (^_^)v もちろん無料です.

アフィリエイト初心者さん、大歓迎!!

メルマガ登録などもしませんから、安心してお問い合わせくださいね^^

管理人まえむきへのお問い合わせ、お気軽にどうぞ

 

 

 

 

関連記事:

コメントを残す

CAPTCHA


サブコンテンツ

このページの先頭へ