Meta Sliderの使い方:スライドショーの設置

Meta Slider

プラグインMetaSlider(Slider, Gallery, and Carousel by MetaSlider)の設定と使い方をまとめています。

任意の場所にスライドショーを設置できるプラグインです。無料版ではいくつか機能が制限されていますが、設定が簡単でブロックエディターにも対応しているのが特徴です。

目次

\ Amazon 飲料サマーセール /

設定と使い方

プラグインを有効化すると、管理画面に「MetaSlider」が追加されます。

スライドショーの作成

管理画面の「MetaSlider」をクリックします。

初回のみ、データを共有して改善に協力してもらえないか問われるので、「はい(Agree and Continue)」or「いいえ(No Thanks)」を選択して下さい(後からSettings & Helpの「Global Settings」で変更可能)。

データを共有して改善に協力するかを問われる

画面中央の「空のスライドショーを作成する」をクリックして最初のスライドショーを作成します。

「空のスライドショーを作成する」をクリック

スライドショーのタイトルを任意で変更します(複数作成した時の識別用)。

スライドショーのタイトルを変更

画面上部の「スライドを追加」をクリックします。

「スライドを追加」をクリック

スライドショーに表示させたい画像を選択して、「スライドショーを追加」をクリックします。

この際、1枚ずつ画像を追加しても構いませんが、「Ctrl」を押しながら複数選択してまとめて追加することも可能です。また、この画面で新規に画像をアップロードすることもできます。

画像を選択して「スライドショーを追加」をクリック

必要なら、それぞれの画像に詳細情報を入力する及び編集します(任意)。

また、ここではドラッグ&ドロップで画像の順番を入れ替えることもできます。

スライドショーに表示する画像の詳細情報
設定詳細
キャプション画像の上に重ねて表示するテキスト文字
Media library caption(画像のキャプションを使用)
Media library description(画像の説明を使用)
Enter manually(任意の文字列を入力)
URL画像にリンクを貼りたい時はURLを入力
Open in a new windowリンクを新しいタブで開く「target="_blank"」の追加
画像タイトルテキスト画像のtitle属性「title=""」
画像の代替文字列画像のalt属性「alt=""」
切り抜きの位置画像がスライダーのサイズよりも大きい時に表示する位置

設定できたら、画面上部の「Preview」をクリックして、実際に表示されるスライドショーを確認します(横幅や縦幅は後からカスタマイズできるので上手く表示されているかを確認する)。

「Preview」をクリック

問題がなければ、「保存」をクリックしてスライドショーを保存します。

「保存」をクリック

スライドショーは複数作成することができます。

新規にスライドショーを作成したい時は画面上部の「New」から、複製は「Duplicate」から行って下さい。

記事にスライドショーを設置

クラシックエディターの場合は、「スライドショーを追加」ボタンからショートコードを挿入します。

スライドショーのショートコードを挿入

ブロックエディターの場合は、「専用ブロック」からスライドショーを挿入します。

「MetaSlider」のブロックを追加

特に躓くところはなにので、作成したスライドショーを表示させたい場所に挿入して下さい。

ウィジェットにスライドショーを設置

専用ウィジェットを表示させたい場所に追加します。

ウィジェットにスライドショーを設置

但し、同じスライダーを同時に表示させることはできません(既に記事に挿入している場合等)。

テーマファイルにスライドショーを設置

テーマファイルにスライドショーを設置したい時は、スライドショーの管理画面を開いて、「使い方」に表示されている「PHPコード」をコピーして任意の場所に貼り付けます。

「PHPコード」をコピーしてテーマファイルに貼り付ける

トップページ等の任意の場所に設置したい時に使いますが、編集ミスでレイアウトが崩れる可能性もあるので、必ずバックアップを取ってから作業して下さい(分からない方にはおすすめしない)。

スライドショーのカスタマイズ

既に記事やテーマファイルに挿入済みのスライドショーにも設定は反映されます。

初期設定ではレイアウトが崩れている及び綺麗に表示されない時は任意でカスタマイズして下さい。

基本設定

デザインや機能の異なる4つのタイプから選択することができます(カスタマイズできる項目が異なる)。

スライドショーの基本設定
設定詳細
スライドショーの横幅(px)
高さスライドショーの高さ(px)
効果画像が切り替わる時のアニメーション
矢印画像の左右に切り替え用の矢印を表示
ナビゲーション画像の下にナビゲーション用の点を表示

幅はスライドショーを設置するコンテンツの横幅に合わせておくことをおすすめします。高さも同様、挿入する画像の比率に合わせて設定して下さい(ここで設定した大きさの画像が生成される)。

他は全て任意ですが、「Coin Slider」だけはレスポンシブに対応していないのでおすすめしません。

Slideshow Theme

カスタムテーマを使いたい時は、Slideshow Themeの「Select a custom theme」をクリックします。

テーマを変更したい時は「Select a custom theme」をクリック

お好みでテーマを選択して、「Select」をクリックします。

テーマを選択して「Select」をクリック

但し、スライドショーのタイプによってはレイアウトが崩れるので必ずプレビューを確認して下さい。

高度な設定

画面右下の「高度な設定」を開くと、更に細かい設定ができます。

スライドショーの高度な設定
設定詳細
100%幅親コンテナいっぱいに伸縮
中央揃えスライドショーを中央揃え
自動再生オン/オフ切り替え
画像の切り抜き自動切り抜きの設定
ランダムスライドの順番をランダムにする
停止ボタン表示カーソルを載せた時にスライドショーを停止
スライドの遅延各画像の表示時間(ミリ秒「1/1000秒」)
アニメーションの速度アニメーションの速度(ミリ秒「1/1000秒」)
スライドの方向画像がスライドする方向
前のテキスト「前へ」項目のテキスト
次のテキスト「次へ」項目のテキスト

スライドショーのタイプによって設定できる項目は異なりますし、上手く反映されない項目もあるので、必ずプレビューで確認しながら設定を変更して下さい。分からなければ変更しないで下さい。

Settings & Help

スライドショーを新規追加した時の初期値を変更できます(任意)。

Settings & Help
設定詳細
Default Slideshow Titleデフォルトのスライドショータイトル
Base Image Widthデフォルトの横幅
Base Image Heightデフォルトの縦幅
100% Widthスライドショーをコンテンツ幅いっぱいに引き伸ばす
Help Improve MetaSliderMetaSliderの改善に協力する

他にも、通知のON・OFF、データのインポートとエクスポートができます。

最後に

無料版ではいくつか機能が制限されていますが、それでも十分なカスタマイズが可能です。

また、設定項目が多くて少し複雑に見えるかもしれませんが、基本はスライドショーを作成して記事にショートコードを挿入するだけなので、使い方は思ったよりも簡単です。

気になる点があれば、後からカスタマイズして下さい。

シェアしてね!

この記事を書いた人

X(旧Twitter)のインプは参考にならない。記事が拡散されてXのインプが10,000を超えても、サイトへのアクセスは1,000にも満たない。また、トレンドに入っているキーワードを含めて投稿すれば、インプは勝手に増える。記事の内容にもよるけど、Xのインプに対して、サイトへのアクセスが5~10%あれば御の字。ただ、とりあえず記事を投稿しておけば、Xのキーワード検索にはかかるので、アクセスアップには使えるのかもしれない。

コメント

コメントする

目次