ブログ初心者がやってみた!ワードプレス(COCOON)で動画を画像のように配置する方法

オタクおじさんの備忘録

こんにちは、管理人のIGE78です!ブログ初めて3か月の初心者ですが、最近ブログの見た目を良くするためにどうすれば良いかを日々考えています。

誰もが通った道と思いますが、自分のホームページやブログに動画を掲載したいと考えたことはありますか?

動画を掲載するのにまず考えることは Youtube 等に動画をアップして、動画のリンクを貼るということが一番最初に思いつく方法ではないでしょうか。自分は一番最初にこの方法を思いつきました。

しかし、それだけではブログに動きを出すことが出来ませんでした。そこで次に考えたのがGIFアニメーションの活用です。

今回説明する内容はGIFアニメーションを作成して画像のように張り付けるという手法です。ホームページ作成者や慣れている方はもちろんご存じの内容と思いますがブログ(ワードプレス)初心者のおじさんはこんなところで立ちつくしました。

忘れないために備忘録を付けておきます。

動画にしたい内容をGIFファイルで保存する

この内容を確認している皆さんは、もちろん単純に画像を張り付ける方法はご存じと思います。

画像を単純に張り付けるだけなら↑のように画像を選択するだけで張り付けることができます。

では、動画を張り付けるにはどうするかというと。。。

GIFアニメーションにして保存すれば良いのです。(サイズは限定されますが‥)

そうです。GIFアニメーションは動画ではなく画像形式での保存なのです。これはパラパラ漫画をイメージしてもらえれば良いと思います。

動画ほどなめらかではありませんがGIFアニメーションは静止画の連続なので、画像扱いとなるのです。

GIFファイルを作成する

GIFアニメーションを無料で作成したい場合、以下のリンク先を使用することで保存することができます。

gifs.com

GIFアニメーションを作成する方法はいくつかありますが、このサイトでは無料で作成することができます(ダウンロードには会員登録が必要)のでとっかかりには一番良いかと思います。※ただし、右下にgifs.comと表示されます。

他にもGIFアニメーションを作成できるサイトはいろいろあるようですがあまり怪しいサイトに行かないようにした方が良いと思いますので一番メジャーなサイトだけ掲載しておきます。

因みに自分は基本的に動画編集ソフト「フィモーラ」を使って作成しています。

GIFファイルを30mb以下で保存する

【最新版】Wondershare FilmoraX(Windows版)全てのクリエーター達へ、動画編集ソフト 動画編集 ビデオ編集 エフェクト PIP機能付 pcソフト エフェクトディスク ムービー 結婚式 ビデオ編集 卒業式 新年会 Windows10対応 永続ライセンス|ワンダーシェアー
価格:8980円(税込、送料無料) (2022/2/26時点)楽天で購入

GIFファイルを張り付ける際に注意する点があります。ファイルの大きさを30mb以下で保存する必要があるということです。

レンタルサーバーではアップロードする画像の大きさに制限があるためこのように制限をかけなければならず、保存する時に注意を払う必要があります。

自分はコノハウィングを使ってサイトを作っていて、アップロードできる画像の大きさは30mb以下です。そのため画像を30mb以下で保存する必要があります。

アップロードしたGIFファイルをアピールエリア等に配置する

最後にファイルをサーバーにアップロードして画像扱いで張り付けるだけで作業は終了です。

また、youtubeのサムネイルにGIFアニメーションを設定することでyoutubeの動画リンクを張り付けるだけでサムネイルが動くのでそういう手法もありかと思います。

注意点として、レンタルサーバーの場合は容量が限られていますのでデータをアップロードし過ぎないように注意が必要です。

また、GIFアニメーションをアップし過ぎるとサイトが重くなることに加え、しつこ過ぎてページを見る人が減る可能性もありますので注意が必要です。

ファイル自体は30mbと少量ですが、不必要なデータは都度削除するようにしましょう。

コメント

タイトルとURLをコピーしました