WEBデザインで自由に使えるCC0動画サイト「Coverr」、WordPressでの簡単な使い方など

WEBデザイン利用に適した動画が多数公開されている「Coverr」というサイトが良かったので紹介です。

CC0（パブリックドメイン）ライセンスなので、動画制作者の許可なく自由に利用することができます。

Coverrとは

Coverrは、美しいフリー動画配布サイトです。

毎週月曜日に7つの新しい動画がアップされます。

動画の利用は、CC0 1.0になっています。CC0とは、著作物に対し、「できる限りの権利を世界的に放棄する」という意思表示をするための法的ツール（表記）となっており、作品は完全にパブリックドメイン（知的財産権が発生していない状態又は消滅した状態）に置かれます。

簡単に言うと、営利目的で使おうとも、許可を得ることなく勝手に利用、複製、改変、配布、上演などをすることができる動画ばかりのサイトです。

利用コードも載っている

動画ファイルをダウンロードすると、WEB利用に必要な以下のファイルが梱包されています。

• MP4動画
• WEBM動画
• OGV動画
• JPG画像

またこのサイトの特徴として、動画を利用するためのコードもあらかじめ載っています。

WordPressでの最も簡単な利用方法

Coverrに載っているコードでも、多分うまくは行くのかもしれませんが、僕の環境で試してみたところ、何度やってもうまくいかなかったので、JavaScriptなどを使わない最も手軽なWordpressでの利用方法を紹介します。

主な手順

WordPressテーマなどで、簡単に利用する主な手順は以下です。

1. WordPressのアップロード容量を緩和（制限されている場合）
2. Coverrから動画をダウンロード
3. WordPressのメディアにアップロード
4. 動画を利用するためのタグを挿入
5. CSSの編集（コピペ）

WordPressのアップロード容量を緩和

まずは、Wordpressの「最大アップロードサイズ」の確認を行います。

確認をするには、Wordpress管理画面から「メディア→新規作成」画面を表示させ、ページ下部に出てくる「最大アップロードサイズ」を確認してください。

デフォルトだと、2MBぐらいになっているかと思います。

これだと少し少ないので10MBくらいに変更したいと思います。

変更するには、php.iniの設定なら以下のように行います。

WordPressの最大アップロードファイルサイズを変更する方法

WordPressのメディアのアップロードから、画像やPDFをアップロードする時 ...

website-fun.com

ただ、エックスサーバーのような気の利いたサーバなら、php.iniをサーバーのコントロールパネルから変更できるようになっています。

php.ini設定項目がある。

設定変更を選んで

最大アップロードサイズを変更します。（以下は最大30MBに設定した例）

ロリポップサーバーでなら以下のように、

ロリポップ！ならWordPressのメディアのアップロードサイズの上限を簡単に変えられるよ

WordPressを使い始めて半月ほど経ちました。僕のブログでは、自分の撮った写真を記事にあげたり、アイキャッチ画像を設定したりして、見栄えのよい記事を投稿しようと心がけています。でも最初は写真のあげ方とかよくわからなくててんやわんやしたし

mlog.xyz

さくらサーバでなら以下のように、結構簡単に変更できます。

[WP]さくらサーバーで、WordPressのファイルアップロード上限を増やす方法

WordPress ブログを運用していると、画像や音声、動画のメディアファイルをアップするには、上限が2 MB…

www.webantena.net

Coverrから動画をダウンロード

次に、Coverrから動画ファイルなどをダウンロードします。

気に入った動画などがあればクリックしてください。

すると、動画のモーダルウィンドウが表示されるので、「Download」からファイルをダウンロードしてください。

WordPressのメディアにアップロード

ダウンロードしたファイルを解凍して中にある「.jpg」、「.mp4」、「.webm」ファイルを、Wordpress管理画面の「メディア→新規追加」からアップロードしてください。

動画を利用するためのタグを挿入

あとは、Wordpressテーマで動画を使用したい場所のテンプレートファイルなどに以下をコピペします。

あとは、先程アップロードしたメディアファイルからURLを取得して、【jpgファイルのURL】、【webmファイルのURL】、【mp4ファイルのURL】それぞれを入れ替えて入力します。

この時点で、ブラウザで読み込むと、動画自体は表示されます。

CSSの編集（コピペ）

最後に、動画上に表示するテキストなどのスタイルをstyle.cssなどに入力して調節します。

これは、入力する文字列によっても、スタイルは変わってくると思いますが、それぞれで調節してください。

動作確認

例として、以下のようにコードを入力して表示させると

以下のように表示されます。

※一部Internet Explorer環境では動画が表示されず、画像が表示されているかもしれません。

まとめ

こんな感じで、「最大アップロードサイズ」さえうまくできれば、結構手軽にWordpressテーマ内に動画を含めたデザインを追加できます。

ヘッダー部分で表示させたり、グローバルナビ下に表示させて、スタイルをある程度調節すれば、ちょっと目を引く掴みになったりするかもしれません。

以下のように背景に表示させたりもできます。

WordPressテーマの背景を動画にするカスタマイズ方法

Wordpressテーマの背景に動画を利用する方法の紹介です。 編集する前は、「結構大変なんだろうな」と思っていたのですが、動...

nelog.jp

2017-05-13 08:14

利用方法はともあれ、サイトに動画を使う場合は、Coverrは、ライセンス面から、ファイルがそろっている面からでもおすすめです。