【楽天ブックス限定先着特典】劇場版「鬼滅の刃」無限列車編【通常版】(オリジナルトランプ) [ 花江夏樹 ]

Cocoonでヘッダーに動画設定をする技とNIKE脱獄ランナー

スポンサーリンク
NIKE脱獄ランナー Blog

さて、毎度毎度お世話になっていますWordPreass無料テーマのCocoonですが、最近1年も続けているのにちっともPVが100/日以上にならない病で、諦めかけている今日この頃。とりあえず、状況を打破するための策は色々とやろうと思っているのですが、まあ、ブログ記事はコンスタントに書いていこうと思っているわけです。継続は力なりっていうのは、この状況では既に死んだも同然ですけど、、、

って事で、変わったことをしようという一環でCocoonのTOPページ(ヘッダー動画)に動画的要素を入れてみたいと思ったわけです。SEO的には何の意味もないですし、現状この記事でPVが飛躍的に上がるわけもないのですが、まあ継続記事の一環として、少し解説します。

論より証拠、AIR MAX MORRY1971のTOPページ(ヘッダー動画)をご覧ください。はいっ、所謂、アピールエリアの画像を弄っているということですね。では、どのような手法になっているのかを解説します。

スポンサーリンク

Cocoonカスタマイズの目的

今回は、無料で使いやすいWordPress無料テーマのCocoonですが、使いやすい反面誰でも使用していて今一差別化が図りにくいという悩みから、カスタマイズで差別化を図るというのが目的。その手法として手っ取り早く、TOPページ(ヘッダー動画)に動きを与えるべく、動画をSETできないかという案を実現したいと感じた。それも簡単にですね。

ワットソンさん
ワットソンさん

簡単そうだけど簡単にできないの?

Morry
Morry

簡単にできますよ。まあ満足度はわかりませんけど!!

ワットソンさん
ワットソンさん

公式の機能なの?

Morry
Morry

どうやら、公式な機能ではなさそうですね、自己責任でお願いします。

では、いきましょう!!

Cocoon動画(ヘッダー動画)設定 用意するもの

既に揃っていれば

gif動画(まあgifは静止画扱いで設定できる)。これだけでOK。

そうはいってもだらだら大容量の動画(Gifでさえも)はやめた方がいい。SEO的になんの価値もない手法だからあくまでも見栄えの問題で、しかもTOPページの動画ヘッダー動画)をずっと眺めてくれる来訪者なんていないからね。人と違うって感じを出すだけだから、短いGifでいいと思う。ただし、画像サイズについては、PC枠とモバイル端末枠の問題を考えて用意すべし。

Gifが無ければ用意する

デスクトップキャプチャーソフトを使って、色々な動画をキャプチャーしてGIFアニメーションデータを作成しよう。

お勧め無料ソフト『ScreenToGIF』をインストールして使おう^^

まあ、とりあえずDownloadしてインストールしよう。DL

そして起動してみよう。

一番左のレコーダー選択で録画準備をします。

とりあえず画面内で動画を再生してそれをキャプチャー録画してみよう。録画準備になると録画画面枠が出てくるので、キャプチャーしたい動画のWindowsサイズに画面枠を合わせて録画ボタンを押します。

ここで動画のサイズとフレーム数を弄れば容量に大きく影響させることが出来ますので、慣れるまでCocoonのTOPページ(ヘッダー動画)で使用したいGif動画の画質やサイズのバラスの調整をしましょう。

録画停止すると編集画面へと移行します。

慣れるまでは、一旦上のタブ『ファイルを』選択してGIF形式(拡張子.gif)ファイルにて出力保存してみましょう。出来上がった、Gifファイルの完成度と容量を確認し画質や容量、フレーム等のバランスを見てCocoonのTOPページ(ヘッダー動画)で使用できるGifファイルを作ります。

内容は慣れるとして、とりあえず完成したGifファイルを使用してCocoon設定に反映してみます。

CocoonのTOPページで動画(ヘッダー動画)を嵌め込む

Cocoonのメニュー内→Cocoon設定→アピールエリアで画像選択時、Gif画像を選択します。これで基本的には問題なく動画挿入できます。画像の高さ(画面内の動画はH300)は、作成画像のサイズのバランスで考えてください。これは完全に皆様のTOPページセンスによりますので、皆さんのセンスにお任せします。

CocoonTopページ(ヘッダー動画)簡単動画設定

はいっ、設定反映のボタンを押せば保存され、ブログのTOPページに挿入した画像(Gifファイル)が動いていると思います。どうです?

コメント

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