Twenty Sixteen ヘッダー画像を動画にする

WordPress Twenty Sixteen カスタマイズ
ヘッダー画像を動画(MP4)にする
 
WordPress のヘッダー画像に『 gif アニメーション 』を設定しているが、IEでみるとGIFアニメーションとして動くが、Chrome や Firefox そして iPad の Safari と言ったブラウザでは『動かない』。
 
 
そこで、ヘッダー画像を『 mp4 の動画 』に変更してみると、当然ながら、すべてのブラウザで動くようになった。
以下、ヘッダー画像を動画に変更した作業記録。
 
スポンサー リンク
 
 

 目 次

  • 1. ヘッダー画像の変更方法
    • ※ header.php の修正。
  • 2. 動画の作成要領
    • ※ gifでアニメを作り、MP4に変換した。
 
 
1. ヘッダー画像の変更方法
 

①.メディアライブラリに、動画をアップロードする。

②.動画と現在のヘッダー画像のURLをメモする。

header.php で、ヘッダー画像を表示している箇所。

最下部辺りにある、ソースコード。

③.このソースコードを、次のコードに置き換える。

それぞれのURLに、先ほどメモしたアドレスをセットする。

これで、Chrome や Firefox そして iPad の Safari でも『動く』ようになった。

 

2. 動画の作成要領
 

①.パワーポイントで、パラパラ漫画の『コマ』を作る。

54コマも作った。

②.「GIMP」で、GIFアニメーションにする。(「GIMP」公式サイト。
JPGファイルをコマ順に、ドラッグ&ドロップする。

全てのファイルの投入が終わったら、『エクスポート』を行う。

名前の入力と拡張子を『 gif 』にし、『エクスポート』をクリックする。

途中で次の警告が出るが、『切り抜き』をクリックすれば問題ない。

コマ間の時間指定を変更して、アニメーションの動きを最適化する。

以上で、アニメーション作成は完了。
「GIMP」を使えば、コマ数が多いGIFアニメーションでも、簡単に作成できる

③.GIF を MP4 に変換する。
GIF MP4 変換。オンライン フリー』サイトを利用して、変換を行った。

以上。
(2017.07.20)

 
             

スポンサー リンク
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください