Meta Slider

ブログ記事内の画像が、自動的に切り替わるこんな↓スライドショーをご覧になったことありませんか?

 

記事内の画像をこんな風にスライドショーにすると、読者さんの目を引きますし、
ブログがグッと魅力的になります。

 

こんなスライドショーも『Meta Slider』というプラグインで作れるんです♪

設定も難しくありませんので、ぜひ取り入れてみてはいかがでしょうか?

ではインストールから順を追って、ご説明していきますね!

 

『Meta Slider』のインストールから有効化

①ダッシュボードの『プラグイン』から【新規追加】をクリック

Meta Slider

②右上の検索窓に『Meta Slider』と入力すると、左の赤枠のように表示されます

【今すぐインストール】をクリック

Meta Slider

④インストールが完了するとボタンが変わるので【有効化】をクリック

Meta Slider

以上で、インストールと有効化は完了です!

 

『Meta Slider』でスライドショーを作成

今回は例として、画像を3枚使用した『メルマガ登録のご案内』のスライドショーを作っていきたいと思います(^-^)

 

①ダッシュボードメニューのしたの方に『Meta Slider』という項目が追加されているので、その中の【Meta Slider】をクリック

Meta Slider

※同じ名前なのでややこしいですが・・・

②開くとこんな状態になっているかもしれません。メニューが重なってしまっているので左端の飛び出ている部分をクリックします

Meta Slider

③このような管理画面が開くので、【スライドを追加】をクリックして画像を追加していきましょう

Meta Slider

④『ファイルのアップロード』を選択して、【ファイルを選択】をクリック(またはここにドラッグ&ドロップ)

Meta Slider

【Ctrlキー】を押しながらスライドショーに使用する画像を選択して【開く】をクリック

※普通に画像をアップロードするように1枚ずつアップロードしてもOKです!

⑥画像が3つ選択されていることを確認して、右下の【スライダーに追加】をクリック

Meta Slider

⑦管理画面の左上の部分がこのスライダーのタイトルになりますので、分かりやすい名前に変更しておきましょう!

Meta Slider

⑧このように全ての画像が一覧になります

⑨各項目を入力していきましょう

Meta Slider

ここに入力した文字が、矢印の『画像スライド』という部分に表示されます。
(何も入力しなければ何も表示されません)

リンク先のURLを入力します。(リンク無しの場合は空欄でOK)

リンク先を新しいウィンドウで開く場合はチェックを入れます
(チェックを入れない場合は、今開いているページの上にリンク先のページが開きます)

⑩『SEO』のタブをクリックすると、SEOに有利な画像タイトルテキスト画像の代替文字列を入力できます

Meta Slider

⑪すべて入力したら【保存してプレビュー】をクリック

Meta Slider

⑫プレビューで画像の状態を確認しましょう(右下の×印から閉じます)

Meta Slider

 

『Meta Slider』の設定と使い方

プレビューを見て、画像のサイズやスライドのスピードなどを調整していきましょう!

①基本的な設定

Meta Sliderの設定

上から順に説明していきますね!

  • 赤枠部分・・・スライダーの種類
  • 幅、高さ・・・元も画像に合わせて調整
  • 効果・・・『フェード』はふわっふわっと画像が切替り、『スライダー』は右から左といった感じでスライドしていきます
  • テーマ・・・最初の赤枠で設定したスライダーの種類によって選択できます。『矢印』や『点』などの位置などが変更できます。
  • 矢印・・・画像の左右に矢印を表示して、読者さんがクリックしてスライダーを動かせるようになります(チェックを入れておきましょう)
  • ナビゲーション・・・『点』にチェックを入れておくと、画像の下に点が並んで、これでも画像を動かすことができます。

矢印はこちらをご覧下さい↓↓

Meta Slider

②高度な設定

Meta Sliderの設定

  • 自動再生
  • スライドの遅延・・・ページを表示させる時にスライダーの画像の読込みを後回しにして、表示速度を上げるための設定
  • アニメーションの速度・・・画像の切り替わる速度を変更できます。

まずはそのまま設定して、あとは必要に応じてプレビューを見ながら調整していきましょう。

③使い方(ショートコード)

Meta Slider

記事内に貼り付けるためのコードですが、実際はコピペしなくても簡単に導入できますので後程説明します(^-^)

④使い方(テンプレートに含める)

Meta Slider

テンプレート自体に埋め込む場合はこちらのコードを使用します。

 

記事内に作成したスライダーを挿入してみましょう

①新規投稿画面に【スライダーを追加】というボタンができています。スライダーを挿入したい場所でこのボタンをクリック

Meta Sliderの追加

②追加したいスライドショーの名前を選択して①【スライドショーを挿入をクリック

Meta Sliderの追加

③先ほどの【設定と使い方】の③で確認したショートコードが自動的に挿入されました

Meta Sliderの追加

④プレビューを確認してみましょう

Meta Sliderの追加

きちんとスライダーが表示できていますね!!

 

まとめ

Meta Sliderはいかがでしたでしょうか?

説明だけ見ると何となく難しそうに感じるかもしれませんが、実際にプレビューを見ながらいじってみると、思ったよりも簡単です。

パッと見た時に動きがあると目を引きますし、ブログが華やかになりますね(^-^)

今回はメルマガ登録フォームへのご案内として作成しましたが、記事の内容によってはビフォーアフターで2枚の画像を切り替えたり、
風景画像を春夏秋冬で4枚切り替えたりしてもおもしろいかもしれません。

スライダーは増やすこともできますので、いろいろ作ってみてくださいね!