ホームページのトップに動画を流して、
続けてスライドショーが動くように
「動画とスライドショーを両方」
いれたいんですが、できますか？
えっ？？？
動画とスライドショーを、
両方、ですか！？
動画を入れるプラグインも、それぞれありますが・・・
連続して動かしたいという珍しいリクエストでした。
調べてもあまり情報がなかったので、
こちらにまとめておきますね。
スライダーに動画は入らないの？
みんな大好き、WordPressテーマ
Lightningライトニングについていますね！
プラグインを入れなくても
初めから「カスタマイザー」の中でスライド設定ができます。
ここに、画像やテキストを入力するだけで
簡単にスライダーが作れるのですが、
スライドできるのは画像だけなんです。
というわけで
何かお客様のご要望に叶うものはないだろうか、調べまくりました。
スライダープラグイン 上位７選
「Slider」と検索して出てきたものを上位７つ試してみました。
今回調べてみたところ、けっこう古くて使えない情報が多くて惑わされました。
そんな時は、WordPressにログインして「プラグイン」から検索すれば
最近更新されている、人気のプラグインがわかりますよ！
２）Smart Slider 3 スマートスライダー３
３）Slide Anyting スライドエニシング
４）Slider by Soliloquy ソリロクィ
５）Master Slider マスタースライダー
１ MetaSlider メタスライダー 定番・安心
まずはこちらの「MetaSlider メタスライダー」
有効インストール数が90万！
ダントツです。
安心・安定の定番プラグインです。
使っている方が多いですね。
さてどんなプラグインなのでしょうか。
インストールして有効化すると
「MetaSlider」メニューが増えました。
「Add a New Slideshow」（赤マルをつけたところ）で
スライドショー作成画面に入れます。
「スライドを追加」と小さく書いてありました。
押すと、画像を挿入できる画面になります。
左上に「メディアライブラリ」と３つも書いてあります。
上から、それぞれ
「画像・音声・動画」の３つに分けて表示されるようになっていました。
それぞれ違う項目なのに、日本語に翻訳するとき
全部「メディアライブラリ」という名前にしてしまったのかな（笑）
やったー♪
「動画プレイリストを新規作成」してみます。
「プレイリストを編集」画面に移りました。
動画を複数入れることもできるんですね！
ひとまずここでは１つでいいので、
「動画プレイリストを挿入」をクリック。
なぜか、編集画面に戻ってしまいました。
・・・何回繰り返してもダメでした。
動画挿入機能は、有料オプションだったようです。
購入しても、思ったのと違った場合は
30日間キャッシュバックもしてくれます。
試用期間で30日間って長いですよね！
次行ってみましょう。
次は、
SmartSlider３ スマートスライダー３
です。
２ Smart Slider 3 スマートスライダー３ 多機能・便利・美しい！
設定の下に「Smart Slider」というメニューが増えました。
説明は全部英語ですが、
わかりやすいアイコンや画像があるので感覚的に操作できます^^
見た目、使い勝手がとってもよいので私は好きですね！
緑色の「NEW SLIDER」を押します。
スライダーのサイズやレイアウトを選ぶことができました。
スライドのサイズやデザインもカスタマイズしやすいですね !
そして、「ADD SLIDE」を押すと、
スライドに何を追加するか、選べる画面が出てきました。
・Library・・・ライブラリ、と言われると
WordPressの「メディアライブラリ」かなと思ってしまいましたが、
これは自分のメディアではなく、
プラグインが独自に用意してくれている「素材集」のことでした。
素材まで用意してくれてるんですねぇ。
Smart Sliderも、動画と画像の両方がスライドにできそうです。
スライドにできるのはYoutube、Vimeoなどの
動画サイトにアップロードした動画だけでした。
Youtube動画をスライドショーに入れると
こんな感じになりましたよ。
さらに、上記画像のように、
Youtubeを埋め込むと、動画のタイトルや操作ボタンが見えてしまいます。
一部に使うならいいですが、
サイトのトップイメージにはちょっと合わないので
今回のお客様のご要件には適さないことがわかりました。
使い勝手が良さそうだったので残念です。・
YouTubeリンクで良いならこのSmart Sliderが一番おすすめです！
高機能で素敵なスライダープラグインとして使えますね。
そのままテンプレートとして、画像やテキストを変えれば
面倒な設定なしでかっこいいスライダーが作れちゃいますよ。
ビデオに関しては特に追加機能はなく、YoutubeなどのURLのみのようでした。
つぎは・・
３ Slide Anyting スライドエニシング ビジュアルエディタでスライド作成！
なんでもスライダーにしてくれるのかな？
「SA Slider」というメニューができました。
あらかじめ、スライダーのサンプルが用意されていました。
わかりやすくて親切ですね！
なにこの多機能！！！！
ブログを書くような感覚です！わかりやすいーー！
With SLIDE ANYHTING PPO each slide can now open a MODAL POPUP、
which can be an IMAGE popup a VIDEO EMBED pop up(Youtube/Vimeo),
a popup dispraying a WordPress SHORTCODE.
公式ページ https://edgewebpages.com/より引用
ショートコードが使用できます、とのことです。
（１サイトのみ）
今回のお客様のご要望には添えなさそうなので、残念ながら次行ってみます。
動画は使わず、自由にスライダーをデザインしたい方向けですね。
４ Soliloquy ソリロクィ ドラッグ・ドロップで簡単編集？
不思議なネーミングですね。
シンプルな編集画面ですね。
簡単なのはメディアをアップロードする操作だけで
タブを選ぶ度に「アップグレードはこちら」ばっかり出てきて
なんかよくわからないです。
『File to Upload」ファイルをアップロード、を試してみると・・・
やっぱり動画は対応していないようです。
インスタやWooComarceに対応しているようです。
（黄色くマーカーを引いたところ）
「動画をスライドに追加するには、URLを入力するだけ」ということなので、
やっぱり有料版でも、YoutubeとVimeoだけみたいですね。
１サイト19ドルからです。
ちょっと使い方がいまいちよくわかりませんでした・・（ごめんなさい）
また機会があったら研究してみます。
５ Master Slider マスタースライダー 美麗なデザイン！でも・・
隣にエクスポートとインポートもあります。
作ったスライダーを、他のブログにコピーできるんですね。便利かも。
一から作れって言われても大変なので、これは便利！
６ WP-LogoShowcace WPロゴショーケース 多機能だが・・
続いてこちらです。
「ロゴショーケース」とはこれいかに？
インストールして有効化すると、
こんなお知らせがでます。
更新などのお知らせを受け取りますか？という意味です。
メルマガ登録みたいなものですね。
登録すると、50以上のプラグイン、10以上のテーマがダウンロードできるそうです。
ご興味のある方は右側のAllow and continueへ
不要な方はskipでどうぞ。
またお知らせが出てきますが、
無視してメニューの「All LogoShowcase」に進みましょう。
編集画面はとてもシンプルでした。
WordPressの管理画面そのままみたいな。
「Add New」に進みます。
あれ、なんじゃこりゃ。これだけ？
どうやら、このプラグインでは
このブログ投稿みたいな画面で、１枚づつスライドを作り、
それらにカテゴリーをつけると、
登録したものをまとめて表示できる、という機能でした。
できたのが、これ。
あれ。
スライダーじゃないじゃん・・・
ショートコードを指定の通り記載してもスライダーにはならず、
何か使い方があるのかもしれませんが、不明でした。
このプラグインの有料版は、
スライド機能だけでなく多量のプラグイン、テーマがセットになっており
年間４９ドルでの総合パッケージプランになっていました。
もしかしたら、こちらに加入したり、
初めのメルマガ登録でもらえるプラグインで何かあるのかもしれませんが
わかりづらいことと、検証に時間がかかること、
また、今回の目的である動画については一切触れていないため
期待できなさそうなことから
WPロゴショーケースは今回は見送ろうかと思います。
では、次のプラグインです。
７ Video Slider ビデオスライダー WordPress最新版に対応！
名前にビデオって書いてるんだからできますよね！？（強気）
はじめにこのブログを書いた時は、
「使用中のWordPressバージョンで未検証」で、うまくいきませんでしたが
見直していたら、アップデートしていました^^！
編集画面に入れます。
ビデオが対応していないものもあるので、ご注意ください。
(Videoと入っているものならOK！）
「動画からの静止画スライドショー」を作成することができた！！
調べたところ、アップデートで、「自動再生機能」がついたそうなのですが
どうにも、うまく動作しない。。。残念。。
時間をかけてやりとりしていけば、解決できるかもしれません^^
ノーマル版との違いは、スライドのディスクリプション、タイトルなどを
細かく設定できることと、半年間のサポートがついているようです。
主だったプラグイン、無料のものだけでは
なかなか希望の設定にできないことがわかりました。
裏技 有料テーマ TCD046 SKIN が一番簡単
村重無料ではご希望通り作るのは難しいみたいですね。
動画をトップスライドショーに入れると重たくなりますし、
静止画のスライドショーだけでよいのではないですか？
いやだ！
と言われてしまいました（笑）
村重では有料のプラグインを使うか、
またはこのテーマを使うという方法もありますが・・
それは、美麗なテーマを豊富に販売していることで有名な、
TCDの「SKIN」というテーマです。
メニューの「外観」に「TCDテーマオプション」というメニューが増え、
本当にこれだけの操作で
美しい動画と静止画のスライドショーを手軽に作ることができました。
本当に楽でした（笑）
いろいろ検証したり、組み込んだりするのが大変、
時間がない、という方には、
はじめから必要な機能の備わったテーマを使うことも、ひとつの方法なのかもしれませんね。
動画＋静止画のスライダーを作る方法：回答
というわけで
今回のお客様のリクエスト
動画＋静止画のスライダーを作りたい！！
にお答えする方法は、３通り。
１）上記のTCDテーマ「SKIN」を購入して使う 12,980円(税込)
http://tcdwp.info/tcd046
自分でセットアップする。
３）Smart Slider のPro版 ３５ドルを購入して、
自分でセットアップする。
ですが、初期設定ではスマホに対応していないため、
かっこいいテンプレートをそのまま使おうとすると、
スマホにした時、ひどく崩れることがあります。
そのため、スライダーの設定画面で極力デザイン設定はせず、
クラス名だけつけてCSSで調整しなければならなかったので、結構手間がかかりました。
こちらはテンプレートがはじめからスマホ対応しているので
とっても楽チンでしたよ。
スライダープラグインまとめ
上記のような結果になりましたが、
プラグインもたくさんありましたので、ベスト３を発表します！
|
Smart Slider 3 スマートスライダー３ |
|
|---|---|
| Youtubeは貼れる？ | ○ |
| 動画ファイルは使える？ | 有料版のみ |
| 有料版はいくら？ | 35ドル |
| テンプレートはある？ | 美しいテンプレートが豊富！ |
| コメント | 見た目がわかりやすく、機能も豊富！ スマホ対応もばっちり。 無料で美しいテンプレートが11種類使える |
しかもスマホ対応してくれているので、何も調整せずそのまま使えます!
| Master Slider マスタースライダー
|
|
|---|---|
| Youtubeは貼れる？ | ○ |
| 動画ファイルは使える？ | 有料版のみ |
| 有料版はいくら？ | 24ドル |
| テンプレートはある？ | 美しいテンプレートが豊富！ |
| コメント | 多機能ながら、使いやすくわかりやすい。 無料で動きのあるテンプレートが 15種類使えるがスマホ対応が手間。 |
マスタースライダーのテンプレート例はこんなかんじ。
設定画面は英語で、慣れるまで少しかかりますが
1位のスマートスライダーよりテンプレートが豊富で
文字や画像を１つ１つ思い通りに設定でき、とても便利。
ですが、デザインによってはスマホ見ると
レイアウトが大幅に崩れるので
調整が必要なので残念ながら２位になりました。。
|
Meta Slider メタスライダー
|
|
|---|---|
| Youtubeは貼れる？ | 有料版のみ |
| 動画ファイルは使える？ | 有料版でも× |
| 有料版はいくら？ | 28ドル |
| テンプレートはある？ | レイアウト選択のみ |
| コメント | シンプルで使いやすい、定番プラグイン 英語ですがサポート、マニュアル充実しています。 安心のUpdraft社製。動画を使わないならおすすめ。 |
制作元は「Updraft」と言って、
WordPressの有名なプラグインをたくさん作っている会社なので
将来的にも安心ですね^^
英語で問い合わせたら、すぐに親切な返事が帰ってきましたよ。
（英語ですが・・・）
動画にあまり対応していなかったので、今回使いませんでしたが
安心の定番プラグインです。
スライダープラグイン選びの参考になれば幸いです^^
WordPressテーマNishiki Proでは、スライダーブロックで動画が簡単に作れるようになりました！
とても便利ですよ、ぜひご活用ください！詳しくはこちら ↓ ↓ ↓
