どうもやすです＾＾
今回はWordPress内でよく見かけるスライドショーの作成方法に
ついて解説をしていきたいと思います
こちらの設定ではスライドショー作成で画像を使うので
画像の用意をしておくようにしてください＾＾
プラグインのEasing Sliderの導入方法について
まず左側のダッシュボード内から【プラグイン】にマウスの矢印をあわせます
そして右側に【新規追加】が表示されるので クリックします
そしてこの画面に行きますので
右上にあります検索バーに【Easing Slider】を入力します
下の方にページを下げていきますと
Easing Sliderのプラグインがあるので
【今すぐインストール】をクリックします
そしてインストールが終わりますと【有効化】の表示が出るので
【有効化】をクリックします
これで【Easing Slider】の導入は完了です＾＾
次は実際に設定画面に行きます！
Easing Sliderの設定方法について
Easing Sliderを有効化しますと
WordPressのダッシュボード内に【Sliders】という表記があると思いますので
その【Sliders】にマウスを合わせます
そして右側の一覧に【Add New】があるので
そちらをクリックします
この画面になりますので
左側の【Name】にわかりやすい名前を入れます
メールマガジンの登録をうながす画像にするのであれば
メールマガジンのスライドショー みたいな感じの名前にしてもいいと思います＾＾
そして決まりましたら右側の【Add Sliders】をクリックします
この画面になりますので
実際に画像を入れて行きます＾＾
【ファイルをアップロード】を先にクリックして
【ファイル選択】をクリックします
あなた自身のパソコン内のファイルなどが出てくるので
そこからスライドショー作成に使う画像を選択します
右下にある【insert into slider】をクリックします
これで画像が下記のように出てきますので
上記で行なったアップロード作業を枚数分同じように行ないます
僕は合計3枚使うので3枚分アップロードしました
次に設定するのは各画像にあなた自身のメールマガジン登録URLの
リンクの設定をしていきます
画像にマウスをあわせますと 下記のように
ペンのマークとバツのマークが出てきます
設定する場合は【ペン】のアイコンをクリックします
バツのアイコンを押すと画像が消えますので
消す場合はバツのアイコンをクリックしましょう＾＾
リンク設定したい画像のペンのアイコンをクリックすると
このように【LINK SETTINGS】の画面に切り替わるので
【Link to】の項目をクリックして
出てくる一覧から【Custom URL】を選択します
すると このようにhttpから始まる入力欄が出ますので
あなた自身のメールマガジンの登録ページのURLを
入力します
そしてURLの入力して すぐ下に出てくる
【Open link in a new window/tab】
のチェックマークに左クリックを押してチェックを入れます
このチェックマークの設定をしますと
画像をクリックした際に新しいタブ【新しいページ】が開くように設定ができるので
読者さんに元のページの戻る手間をかけさせずに済みますよ＾＾
そして設定が終わったら右下にある【Update】をクリックして
設定を保存しましょう＾＾
保存が完了すると 元の画面に戻って来るので
他の画像も同じように設定をしておくと
どの画像からもあなた自身のメールマガジンの登録ページに
飛ぶことができるようになるので
設定することをおすすめします
設定が完了すると 元の画面に戻ってくるので
その他の設定もしていきます
右側をみて頂くとわかると思いますが
いろいろな表示がありますよね？
この設定についても1つずつ
しっかりと解説していきますね＾＾
Dimensionsの設定について
まず1つ目がこちら 【Dimensions】の設定です
【Width】と【Height】とありますが
これは画像の幅と高さの変更になります
【Width】が幅で【Height】は高さとなります
初期設定は上記画像のような数値になっています
幅が640で高さが400の画像サイズです
そして下にある【Make 100％ full width】ですが
こちらは設置場所の幅をいっぱいまで表示しますよ
という設定になります
設定する事により余白がなくなるので
これはちゃんとチェックを入れておきましょう＾＾
では次の設定です
Transitionsの設定について
次はこちら！【Transitions】
Transitionsの設定はスライドショーで
画像が切り替わるときの動作を設定する事ができます
Effect項目欄に【Slide】と【Fade】とありますが
【Slide】を選択しますと 画像が横にスライドするようになります
【Fade】を選択しますと 画像がふわっとぼやけて次の画像に切り替わる設定になります
そして【Duration】項目欄に400という数値がありますが
これは画像が切り替わる速度の数値になります
数値を大きくすると スライドする速度がゆっくりになり
数値を小さくすると スライドする速度は早くなります
この数値は初期値にしておいて 後でどのくらいの速度で
変わるか見ながら設定を変更するといいでしょう＾＾
Preloadingの設定について
次がこちら！【Preloading】
これは特にいじる事はありませんが
【Enable Lazy Loading】にチェックが入っているかどうがだけ確認しておきましょう＾＾
この設定はサイトを表示させる際に
設定したスライドショーの部分だけを遅らせて読み込ませる事により
サイト全体の表示速度を上げる効果があります＾＾
Next&Previous ArrowsとPagination lconsの設定について
次がこちら！
【Next&Previous Arrows】と【Pagination lcons】
これはいじることはないのでそのまま初期設定で大丈夫ですよ＾＾
Automatic Playbackの設定について
最後がこちら！【Automatic Playback】
これはまずPlayback項目欄の【Enable】にチェックが入っているか確認します
この【Enable】にチェックを入れておかないと
スライドショーが1通りスライドした時点で止まってしまいます
これを設定する事によりずっとスライドしてくれますので
チェックの確認はしておきましょう＾＾
下の【Pause Duration】を見てもらうと 数値が4000になっていると思います
これは1つ1つの画像の表示される時間を表しています
最初は初期値にしておいて 確認しながら
あなた自身の1番いい表示時間を設定するようにしましょう！
全部の設定が終わりましたら 下記画像のように
赤枠で囲っている【Update】をクリックします
これは設定を保存する時に使います＾＾
そして保存が完了しますと 画面の上に このような表示
【Slider has been saved successfully】があります
これは正常に保存が完了しましたよ！
という表示なので この表示が出れば
設定は完了になります
この設定は1度行なえば その画像全てに適応されますよ＾＾
ただ新しく【Add New】から新規設定する場合は
再度画像のアップロードから上記の詳細設定までやらないと行けないですが^^;
作成したスライドショーを実際に記事内に設置する方法
では実際に設定したスライドショーが
どのように表示されるのか
確認をしてみたいと思います
まずダッシュボード項目欄から
【投稿】→【新規追加】をクリックします
記事作成のページに行きますので
タイトルは何も入れずに 下の本文書き込み欄を
1回だけクリックしておきます
そしてクリックした後 上に赤枠で囲っている【Add Slider】をクリックします
この画面【Add a Slider】が出るので
あなた自身が設定した名前のスライドショーを選択します
ちゃんと選択したタイトルになっているか確認しましたら
赤枠で囲っている【Insert Slider】をクリックします
すると記事作成画面に戻り
本文記載欄にIDコードが記載されているのがわかりますね
これで実際に記事本文内にあなた自身が設定した
スライドショーが出るようになっています
もし記事の最後や記事の真ん中でスライドショーを表示させたい場合は
載せたい箇所をクリックした後に、上記のやり方で
IDコードを記載させれば 任意【載せたい箇所】に表示させる事ができますよ＾＾
では実際にどのように出ているのか
右上にある【プレビュー】をクリックして
みてみましょう＾＾
実際にこんな感じで表示されていると思います＾＾
以上でスライドショーの設定と表示方法についての
解説を終わりにします＾＾
やすでした^^
