メインビジュアルにスライダーや動画を設定できるプラグイン作りました（※v1.0.8にアップデート。不具合修正）

grayish専用になりますが、メインビジュアルに動きが欲しい方がいらっしゃるかもと思い、スライダー又は動画を設定できるプラグイン「grayish MV add Plugin」を作りました。

ブログ型、サイト型どちらでも使用可能です。

スライダー、動画それぞれ専用のパターンを使用して実現するものになります。

プラグインを使用したデモサイトあり

当サイトのメインビジュアルでもスライダーモードで設定しています。（24/05/05現在）

動画、スライダーモードを使ったデモサイトもありますので、ぜひご覧ください。

上記２つのデモサイトは、メインビジュアル以外の部分もちょこちょこカスタマイズしてます。
これらのカスタマイズ内容についても今後紹介していく予定です。

動作条件と利用上の注意事項

以下内容について、ご確認いただいた上でご利用ください。

ご利用の流れ

プラグインをご利用になる手順は以下のようになります。

パターンの画像や動画の更新について

パターン内の画像、動画の更新方法について、詳細を説明します。

スライダーの場合

パターン名：grayish-slider-pattern.json

パターンの編集

WordPress管理画面＞外観＞パターンで、使用するパターンを編集します。

パターンの編集でパターンを開くと、以下のように３つのデモ画像が設定されていると思います。

デモ画像をクリック→ツールバーの「置換」をクリックで、各自のメデイアから画像を選択できますので、必ず各自の画像に変更してご利用ください。

スライド数は、カラム数を増やすことで3以上にできます。

エディタのリストビューでカラムを選択しカラム数を4、５にすると、その分画像の設定が可能になります。

画像を置換後、パターンの「更新」をクリックして管理画面に戻ってください。

パターンIDをコピーしておく

更新したパターンのIDを確認します。

以下の例では、「271」をコピーしておきます。

この数字をプラグインの設定画面でペーストします。

スライダーに設定する画像の推奨サイズについて

プラグインを使用しない場合のメインビジュアルと同様です。

幅1920px & 高さ1080pxや、幅1280px & 高さ720pxの16:9の画像がきれいに表示できると思います。

PCからSPまで同じ画像を使用するため、できるだけ中央付近に内容のある画像を用意してください。

動画　PCサイズのみ版

PCサイズで用意した動画をSP（モバイル）でもそのまま使用する場合のパターンです。

パターン名：grayish-mp4-pc-pattern.json

動画は画像よりも容量が大きくなります。（数Mbyte〜数10Mbyteになることも）

勿論、動画編集ツールで圧縮可能ですが、見た目が粗くなっていくので、どれぐらい圧縮できるかは各自の許容範囲によって変わってくると思います。

そして、PCサイズで用意した動画をそのままSPで使用すると、WiFiでない環境でサイトを閲覧した際に、ユーザーのデータ使用量が大きくなることが考えられます。

なので、できればSP用にサイズを減らした動画も用意して、次項のPC/SP切り替え版を使用していただきたいところですが、とりあえずPC用の動画だけで試したい場合もあると思います。

そんなときはこちらのパターンをご利用ください。

パターンの編集

パターンに設定してあるデモ動画をクリックし、各自のメデイアの動画に置換してご利用ください。
置換方法はスライダーの場合の画像と同様です。

ポスター画像の置換

例えばiPhoneなどのiOS端末で、低電力モードになっている場合、動画は自動再生されません。その場合や、電波の弱い場所で読み込みに時間がかかってしまう場合に、ポスター画像に設定した画像を表示することができます。

ポスター画像を設定しない場合は、動画の最初のシーンがかわりに表示されると思いますが、ポスター画像を設定しておいた方が安心かな〜と。

動画のパターンではデモ用のポスター画像が設定されている為、各自の画像に置換するか、不要な場合は削除してください。

動画　PC/SP切り替え版

PCサイズの動画とSPサイズの動画が用意できている場合に使用するパターンです。
画面幅が768pxより小さい場合、SPサイズ用を使用します。

ポスター画像については、PCサイズ用で設定したものをSP時も使用します。

パターン名：grayish-mp4-pcsp-pattern.json

PCサイズ（上段）、SPサイズ（下段）の動画を置換します。

PCサイズの方のポスター画像も置換または削除を行います。

動画の推奨サイズについて

PCサイズの場合は画像と同様です。

SPサイズについては、縦長になることを想定して、

幅540px & 高さ 960px　（9 : 16)

を推奨します。

プラグインのインストール手順と設定画面

「grayish MV add Plugin」をダウンロード後のインストール手順です。

WordPress管理画面＞プラグインで新規プラグインを追加

プラグインのアップロード

「ファイルを選択」をクリックしダウンロードしたファイル（grayish_mv_add_plugin-main.zip）を解凍せずに選択してください。

今すぐインストールをクリックして有効化

今すぐインストール、有効化と進みます。

有効化し、プラグインの一覧に「grayish MV add Plugin」が追加されたことを確認します。

プラグインの設定画面

プラグインを有効化すると、WordPress管理画面＞設定に、「grayish MV add 設定」という項目が表示されます。

この画面内で、スライダーまたは動画のパターンID(数字のみ）を入力し、下にある「変更を保存」をクリックします。

スライダーの場合は上図のピンク枠にあるように、

• スライダータイプ
• スライド切り替え時間（秒）
• フェードタイプの場合のZoomアニメーション選択
• 横・縦スライドタイプの場合のパララックスアニメーション選択

をお好みで選択し、「変更を保存」をクリックします。

以下、スライダーのパターンID（271）を使用する例です。

動画を手軽に編集できるフリーツールの紹介

動画について、圧縮やサイズ変更について、専用のソフトがなくてもネット上の無料のツールで行うことができます。

今回のデモサイトで使用したサイトを紹介させていただきます。

Adobe Express

まずはAdobe Expressのツールをご紹介。

Adobe Expressは今回紹介しているツールの他にも、Canvaと同様にテンプレートからアイキャッチやロゴ制作などにもご利用いただけます。以前当サイトでも紹介記事を書いています。

MOV→mp4へ変換

MacPCの画面収録などで作成した動画をmp4に変換できます。
直感的に使えますので、とりあえず使ってみてください。

mp4のサイズ変更

PC版からSP版動画を作る場合に利用できます。

他にも便利なツールが沢山あります

Adobe Expressページのヘッダーにある、クイックアクションの項目をクリックすると便利なツールの一覧が見えますので、色々お試しください！

VideoSmaller（mp4を圧縮）

mp4の圧縮ができるVideoSmallerをご紹介。

圧縮は問題なくできましたが、少々使いづらかったかも・・・

他にもオンラインで無料で圧縮するサイトはありますので、もしこちらが使いにくい場合、使いやすいサイトを探してご利用いただければと思います。

AirMore（動画の任意のシーンからポスター画像を作れる）

ポスター画像を設定したいけど、どう作ろうか迷ったときなどに。

AirMoreでは、動画をドラッグして任意のシーンを静止画で切り出すことができます。

動画はCanva等の素材でさくっと作ることも可能

動画は、動画ACなどのフリー素材サイトからダウンロードしてもいいですし、

CanvaやAdobeExpressのフリーの動画素材でも、手軽に作成できますので、良かったらお試しください。

なお、配布パターンに使用しているデモ動画や、デモサイトの動画はCanvaとAdobeExpressの素材を使用して作りました。

では、この記事は以上です。