Meta Sliderの設定と使い方:スライダーの設置

Meta Sliderの設定と使い方

プラグイン「Meta Slider」を追加すると、コンテンツスライダーを作成することができます。

無料版ではいくつか機能が制限されていますが(この手のプラグインは無料版だと大抵機能が制限されています)、無料版でも十分カスタマイズできますし、設定もそれほど難しくありません。また、スライダーはショートコード及びPHPで好きな場所に設置することができます。

使い方

Meta Sliderを追加&有効化し、ダッシュボードの「Meta Slider」から各種設定を行います。

スライドショーを作成

Meta Sliderの設定画面から、「New」ボタンをクリックして最初のスライドショーを作成します。

スライドショーを作成

スライドショーを作成

設定はいつでも変更できます。とりあえず作成して、細かい調整は後から行って下さい。

スライダーの名前を変更

スライダーを複数作る場合は、名前を変更しておくと識別しやすくなります。

スライダーの名前を変更

スライダーの名前を変更

画像スライドの設定

スライドを追加」ボタンをクリックして、スライドさせたい画像を追加します。

スライドを追加

スライドを追加

既にアップロード済みの画像から選択及び新規に画像をアップロードして使います(無料版では画像以外の項目は制限されています)。この際、画像は挿入するスライダーと同じ幅と高さに統一することをおすすめします。スライダーを挿入するスペースの幅と高さは事前に調べておきましょう。

スライド画像を選択

画像スライドを選択

画像スライドが追加できたら、それぞれの画像に設定を入力します(任意)。

画像スライドの設定

画像スライドの設定

キャプション 画像の上に重ねて表示させるテキスト文字
URL 画像にリンクを貼りたい時はURLを入力
画像タイトルテキスト 画像のtitle属性「title=””」
画像の代替文字列 画像のalt属性「alt=””」
切り抜きの位置 画像がスライダーのサイズよりも大きい時に表示する位置

※画像はドラッグ&ドロップで順番の入れ替え可能です。

基本設定

デザインや機能の異なる4つのスライダーが用意されています。

無料版では、一番カスタマイズの選択肢が豊富な「Nivo Slider」がお勧めです。「Coin Slider」は「width=”100%”」が設定できないだけでなく、レスポンシブに対応していないのでお勧めしません。

幅と高さはスライダーを挿入するスペースのサイズを入力します(「Coin Slider」以外は自動でコンテンツの幅に縮小される)。他はお好みで設定して下さい。

基本設定

基本設定

スライドショーの横幅
高さ スライドショーの高さ
効果 スライド遷移エフェクト
テーマ スライドショーのテーマ(デザイン)
矢印 前後への矢印を表示する
ナビゲーション スライダーの下部にナビゲーション用の点を表示

設定できたら、「保存」ボタンをクリックします。

高度な設定

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

但し、選択したデザインによって設定できる項目は異なります。また、スライダーによっては機能しない設定もあるので、特に変更する必要はありません。分からない方はデフォルト推奨です。

高度な設定

高度な設定

引き伸ばす 親コンテナいっぱい伸縮(非推奨)
中央揃え スライドショーを中央揃え(任意)
自動再生 自動トラジション(任意)
画像の切り抜き 画像の切り抜き方法(スマート切り抜き)
ランダム スライドの順番をランダムにする(任意)
停止ボタン表示 スライダーにカーソルを載せた時にスライドショーを一時停止させる(推奨)
スライドの遅延 各画像の表示時間(ミリ秒)
アニメーションの速度 アニメーションの速度(ミリ秒)
スライスの数 スライスの数(効果をスライスに設定している場合)
スクエアの数 (幅) スクエアの横の数(効果を角切りに設定している場合)
スクエアの数 (高さ) スクエアの縦の数(効果を角切りに設定している場合)
前のテキスト 「前へ」項目のテキストを設定(任意)
次のテキスト 「次へ」項目のテキストを設定(任意)

全ての設定が終わったら、「保存」をクリックして完了です。

スライダーの挿入

記事に挿入

記事に挿入する時は、編集画面の「スライダーを追加」ボタンをクリックします。

スライダーを追加ボタンをクリック

「スライダーを追加」ボタンをクリック

スライダーを選択して、「スライドショーを挿入」をクリックします。

スライダーを選択して「スライドショーを挿入」をクリック

スライダーを選択して「スライドショーを挿入」をクリック

ショートコードが挿入されれば完了です。

Meta Sliderのショートコード

Meta Sliderのショートコード

実際にスライダーが綺麗に表示されているか確認して下さい。

Meta Sliderを記事に挿入

Meta Sliderを記事に挿入

おかしなところがあれば、Meta Sliderの設定画面から修正して下さい。

テーマファイルに挿入

テーマファイルに挿入する時は、Meta Slider編集画面の右下に表示されているコードをコピーして、表示させたい場所に貼り付けます。

テーマファイルに挿入する時のコード

テーマファイルに挿入する時のコード

挿入できたら、スライダーが綺麗に表示されているか確認して下さい。

Meta Sliderをテーマファイルに挿入

Meta Sliderをテーマファイルに挿入

先ほど同様、おかしなところがあれば、Meta Sliderの設定画面から修正して下さい。

最後に

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

また、設定項目が多く複雑に見えますが、スライドの追加と基本設定だけで問題なく機能するので、スライダーを表示させたい時には便利なプラグインです。

スポンサーリンク
スポンサーリンク