今回はWordPressで画像をスライド表示させたいという時に使えるプラグイン『MetaSlider』を紹介します。トップページでオススメ記事への誘導バナーや、イベントLPへ誘導するバナーを切り替えながら出すというだけでなく、記事内で複数の画像を切り替えて表示させたいといった時にも役立つプラグインです。この記事ではMetaSliderの説明やインストール方法、設定の仕方について解説していきます。まとめMetaSliderとはMetaSliderはページ内にスライダーを表示させることのできるプラグインです。ならぶ猫ねる猫たべる猫みつめる猫このような感じですね。スライドの切り替えを4つのパターンと様々なアニメーションから選択する事ができ、サイズ調整や表示の切り替え方法、クラスの付与や動きの指定などMetaSlider1つで多様なスライドが作成できます。無料のプラグインで利用者も多い為、安心して使えるのもポイントです。インストール方法それではMetaSliderをインストールしていきましょう。管理画面の左メニューから「プラグイン」⇒「新規追加」と進み、MetaSliderを検索します。するとこのようなプラグインが検索にヒットしますので「今すぐインストール」⇒「有効化」でプラグインを使える状態にしましょう。プラグインを有効化すると管理画面のメニューにこのようにMetaSliderの項目が追加されます。これでインストールと使用する準備は完了です。-WordPressにプラグインを導入しよう!検索の仕方からインストール、zipフォルダの...https://wp-topics.com/base/1049/WordPressには簡単にブログやホームページを作成できるという利点がありますが、それを可能にしているのは様々な機能を持った「プラグイン」を簡単に導入できる点にあります。個々のプラグインでそれぞれ使い方や設定は違いますが、導入方法は至って簡単です。今回は...MetaSliderでスライドショーを作成するそれでは実際にMetaSliderを設定していきましょう。管理画面のMetaSliderをクリックするとこのように設定の初期画面が開きます。slideshow」をクリックします。するとこのようにスライドの設定画面が開きます。設定画面はメニューバーとスライドの設定画面に分かれており、画像の追加やプレビュー、新しいスライドの作成やスライドの複製は上部のメニューバーから行う事ができます。Slideshow」のエリアとページ右側のサイドバーで行っていきます。スライドに名前を付けるまずはスライドに名前をつけて管理しやすくしておきましょう。Slideshow」をクリックすると作成するスライドショーの名前を変更する事ができますので、スライドショーの中身が分かりやすい名前に変更しておくと後々増えてきた時にどれがどれか分からない!という事を防ぐことができます。スライドショーで表示する画像を選択する名前の変更ができたら次にスライドに表示する画像を選択してみましょう。上部のメニューバーから「スライドを追加」をクリックします。するとこのようにメディアライブラリが立ち上がりますのでスライドで表示させたい画像をアップロードor選択します。キーボードのCtrlを押しながら選択すると一度に複数枚選択できて便利ですのでお試しください。slideshow」をクリックします。読み込みまで少し時間がかかりますが、このように先ほど選択した画像が画面に表示されます。これでスライドショーに表示させたい画像の準備は完了です。スライドの設定スライドパターンの選択MetaSliderではスライドの仕方を4つのパターンから選ぶことができます。SliderFlexSliderがデフォルトのスライダー、R.Sliderはレスポンシブスライダーの略で、スマホ等画面サイズが変わる時に自動的にスライダーのサイズを調整してくれます。Sliderはスライドの切り替えを様々なパターンから選ぶことができます。メニューバーの「Preview」を押すことでスライドショーの見え方を確認することができますので、スライドパターンと効果を色々と試して自身のサイトに合う形を取り入れてみてください。幅と高さを変更する事でスライドショーの大きさを変更する事が可能です。こちらも載せる場所に合わせて調整をしておきましょう。効果の選択スライドパターンによって選択できるスライドアニメーションに違いがありますが、どのように画像を切り替えるかを選択できます。画像が横スライドする形やふわっと消えて新しい画像が出てくるパターンなど、好みの形を設定できます。→)の表示を消すことができます。ナビゲーション(スライド下部の・・・・・)を点で表示するか非表示にするかを選択できます。どちらもユーザーの使い勝手を考えるとあった方が良いと思いますが、賑やかしで使うといった場合はサイトと相談して表示の有無を決めてください。ナビゲーションは有料版であればサムネイル表示にも対応していますが、無料版で使えるのは非表示か点だけとなります。画像の設定では次に画像側の設定をしていきましょう。画像側ではタイトルやリンク、切り抜きの仕方などを設定できます。タイトルの設定デフォルトでは画像のキャプションがタイトルとして扱われます。manually」を選択して好きな文言を記入します。画像にタイトルの表示が必要ない場合は空白のままで構いません。リンクの設定スライドの画像をクリックした際に別のページへ遷移させたい場合、画像にリンクを設定する事ができますので飛び先のURLを記入しておきます。window」にチェックを入れておきましょう。画像の切り抜き設定スライドから画像がはみ出した場合にどのように表示するかを設定できます。画像が切れてしまう場合はここで上手く見えるように調整しましょう。これで画像側の設定も完了です。記事へ挿入する方法それではMetaSliderで作ったスライドを記事内に挿入していきましょう。Use」という項目があります。ここにスライドを記事に表示させるためのショートコードが記述されていますので、コピーして記事内に貼り付けることで表示させることが可能です。投稿記事内で使う場合はショートコードの箇所だけをコピーして貼り付けるようにしないとエラーになりますのでご注意ください。固定ページ内で使いたいという場合はまるっとすべてコピーして貼り付けを行います。表示されていれば成功です!また、クイックタグにこのように「スライダーを追加」が追加されていますので、こちらからこのようにスライダーを選ぶことでも記事内へ挿入する事が可能です。上記の設定で基本的な表示の部分は概ね網羅できていますが、より細かく設定したい場合は「高度な設定」の項目の中で処理を加えていきます。上で選択したスライドのパターンによって、高度な設定の中で設定できる項目も変わりますのでご確認ください。各項目のチェック有無や変更でどのように変化するか下記にまとめておきます。長くなりますので必要な項目のみピックアップしてお読みいただければと思います。widthチェックが入っていると親コンテナの幅いっぱいにスライドが表示されます。スライドの横幅を400pxにしたのに画面いっぱいに表示されてしまう!という場合はここにチェックが入っていないか確認してみてください。中央揃え画面幅よりもスライドが小さい場合、チェックが入っていればスライドが中央寄せで表示されます。自動再生スライドを自動再生する場合はチェックを入れ、ユーザーが矢印をクリックする事で切り替えを行う場合は外しておきます。画像の切り抜き指定したスライドの幅より画像が大きい場合にどのように切り取るかの設定ができます。無効にしておくと指定した幅を無視して画像本来のサイズで表示されます。カルーセル・モード通常スライドショーは画像が一枚ずつ表示されますが、カルーセルモードにしておけば次の画像が少し見える状態のスライドにすることが可能です。カルーセル・モードにすると隣との画像のマージンを決めることもできます。inスライド初期表示の際にふわっと表示させることができます。ランダム切り替わるスライドをランダムにすることができます。停止ボタン表示スライドを自動再生にしている場合、スライドを止めるボタンを表示することができます。逆戻りスライドの順番を逆にすることができます。スライドの遅延スライドが何秒で次の画像に切り替わるかを指定できます。デフォルトは3000ms=3秒です。あまりに早いとユーザーが画像を認識できませんし、遅いと切り替わりを待つ前にユーザーの目線が移動してしまうのでデフォルトか+1000msまでの間に設定しておくことをおすすめします。アニメーションの速度スライドが切り替わるまでに何秒かかるかを指定でき、デフォルトは600ms=0.6秒です。こちらもスライドの遅延同様、早すぎると目がせわしないですし、遅すぎるともどかしいので600msから多くても1000msぐらいの間に抑えておくことをおすすめします。スライドの方向スライドを水平or垂直のどちらで切り替えるかを変更できます。イージングスライドアニメーションを変更できます。画像の切り替わりがフェードかスライドか、スライドの方向が垂直か水平などによってアニメーションが動いたり動かなかったりしますので色々と試していただければと思います。バウンス系の動きなどは面白いのですが、ユーザーの目線が泳いでしまう事も考えられますので特にこだわりが無ければデフォルトで良いかと思います。Sliderで選べる項目です。短冊で切り替え、ワイプで切り替えを選んだ際の画面分割の数を設定できます。Sliderで選べる項目です。Sliderでは画像の切り替えを行う際、スクエアのエフェクトが重なりながら次の画像に切り替える動きが取れます。その際のアニメーションの速度を選択できます。Sliderで選べる項目です。見出しの不透明度を0.1~1で選択でき、数字が小さいほど見出しが薄く(透過)なります。Sliderで選べる項目です。見出しの表示スピードを変更できます。前のテキスト・次のテキストスライド送りの矢印の下に表示されるテキストを変更できます。開発用オプションCSSクラス指定した文字列がclassとしてMetaSliderで生成されたスライドに付与されます。CSSを出力・JSを出力チェックを外すとMetaSliderに関連しているcss、jsファイルがサイトに出力されなくなります。独自のcss、jsを使う場合はチェックを外しておく必要がありますが、そうでない場合はチェックを入れたままにしておいた方がよいでしょう。競合モードなし複数のスライダーを設置する場合に、各スライダーの挙動がコンフリクトを起こさない為に1つ1つのスライダーを個別化する処理のようです。まとめという事で手軽にスライダー表示ができるプラグインMetaSliderの紹介と使い方でした。した設定を書いているので複雑そうに見えますが、実際にスライダーを表示させるまでは非常に簡単に行うことができます。MetaSliderを使えば画像の見せ方に幅を持たせることができますので、是非使ってみてください。2019.09.20ブログを運営していると、実際にどれぐらいの人がサイトに来てくれているのか、どれぐらい記事が読まれているのかというのが気になりだしますよね。問い合わせがくる→メールが送られてくる→メール内容をエクセルに転記する。2019.05.24流行りのインスタグラム。利用されている方も多いのではないかと思います。インスタ映えという言葉もすっかり市民権を得た印象がありますよね。プロフィールWEB屋さんの端くれ。