超簡単!! 動画や写真を背景に埋め込んだ全画面表示の作り方
ページトップの動画を背景に埋め込んだ全画面表示はヘッダーではありません。
コンテンツの先頭部分をディスプレイの高さに合わせて全画面表示のヘッダーのように見せているだけです。
しかも、HTMLのタグ打ちやCSSでコーディングすることは一切していません。
テーマの基本設定とプラグインの入力項目をクリックするだけで簡単に作ることができます。
ページを開いた時に、画面いっぱいに広がる動画が流れたら「なんだろう？」って思わず見ちゃいませんか？ 訪問者の興味を引き付けるページを簡単に作る方法を紹介します。
（追記）
この記事の全画面表示の方法を活用して、「全画面表示のオーバーラッピングスクロールの作り方」を紹介する記事を書きました。CSSでコーディングする必要はなく、初心者でも簡単にオーバーラッピングスクロールを作ることができます。参考にしてください。
目次
１ ドラッグ＆ドロップしてサイト作成できるテーマ「Themify」
（Themifyを知っている方は読み飛ばしてください。）
２ 背景に埋め込む写真や動画を準備する
３ 全画面表示をするための設定方法
４ 写真や動画を背景に埋め込む場所
５ 埋め込んだ写真や動画に文字を重ねる方法
６ ページの途中で全画面表示をすることはできるの？
１ ドラッグ＆ドロップしてサイト作成できるテーマ「Themify」
※ Themifyがどのようなテーマなのかご存知の方は第１章は読み飛ばしてください。※
Webサイトを作成するには、最低でもHTMLとCSSの知識が必要になるので専門に勉強した人以外は手が出せない分野でした。
そこにSMSツールであるワードプレスが公開されるようになり、誰でもWebサイトを作成することができるようになったのはご存知だと思います。
２ 背景に埋め込む写真や動画を準備する
背景に埋め込む写真や動画を準備します。
素材を準備するにあたり注意する２点があります。
１点目は、とにかく容量を小さくすること！
背景に埋め込む写真だったり動画は、訪問者の興味を引きたてる演出であり、綺麗な写真や動画そのものを見せるためのものではありません。
容量が大きいとそれだけ読み込みに時間がかかるので、全画面表示した際に画像が劣化しない範囲内でできる限り小さい容量になるように素材を準備します。
写真：容量 数十KB～百数十KB サイズ 幅400px～800px
動画：容量 数百KB～数百KB サイズ 幅400px～800px
※動画は秒数、フレームレートやビットレートを調整して容量を小さくします。
２点目は、切り取られる部分を考慮して写真や動画を選ぶこと！
全画面表示する際にディスプレイの高さを基準に幅が比率で決まるので、埋め込む素材の縦横比が小さいと幅が不足して全画面表示にならなくなります。逆に素材の縦横比が大きいと両端部分が切り取られ表示されない部分が増えてしまいます。
（二つの動画は同じ素材を異なる幅で表示しています。）
訪問者のディスプレイは、横長、スクエアー、タブレット、スマホと様々なので、ディスプレイの両端に映像が不足したり、切り取られる映像が多くなり過ぎて映像として成り立たないものにならないように素材となる写真や動画のサイズを決める必要があります。
具体的には、横と縦の比率が3：2の縦横比で、伝えたい映像が常に中央に位置している動画や写真を使用するとディスプレイサイズに左右されない全画面表示が行えます。
写真や動画を準備する際に何を使って加工するかですが、フリーソフトも多くありますが、個人的には有料のソフトを購入した方が作業効率が良かったり、仕上がりが綺麗だったりするので初期投資はかかりますが有料のソフトをお勧めします。
私は写真と動画ともにアドビ エレメンツ（adobe Elements）を使用しています。
アドビの製品は性能や機能を重視したプロやセミプロ向けの高品質のソフトが多く、月額課金や年間課金になるのでランニングコストが高くつき手が出しにくいですが、エレメンツシリーズは買取型のため初期投資だけで済むし、アマチュア向けとはいえアドビの製品なので性能も機能も申し分ありません。また、初心者向けの設定からこだわりの詳細設定も簡単に作業モードを切り替えれるので操作性も高いです。（※写真に関しては、最近Affinityを使うことが多くなってきました。プロ用のPhotoShop CCと同等レベルの編集機能があってしかも買取性！ ただし、慣れていないとかなり戸惑いますが使い続ければ簡単に編集できるようになります。近々記事にまとめようと思っています。）
アドビ（adobe）以外にも加工ソフトを販売しているメーカーがあるので、無料体験版を使用して機能と使い勝手を確認してから購入するといいでしょう。
写真編集ソフト
17,800円
![\"icon\"](\"https://yukaki.kagoyacloud.com/wp-content/uploads/cyberlink001.jpg\")
9,800円
9,698円
![](\"https://yukaki.kagoyacloud.com/wp-content/uploads/affinity001.png\")
PC用 6,000円
動画編集ソフト
17,800円
![\"icon\"](\"https://yukaki.kagoyacloud.com/wp-content/uploads/cyberlink002.jpg\")
15,980円
13,824円
11,059円
写真動画セット
24,800円
![\"icon\"](\"https://yukaki.kagoyacloud.com/wp-content/uploads/cyberlink003.jpg\")
18,980円
23,522円
17,640円
３ 全画面表示をするための設定方法
多くのサイトではサイト内を巡回してもらえるようにヘッターにサイト名やメニューを表示したり、サイドバーを表示したりしていると思います。しかし、全画面表示をするにはヘッダーやサイドバーを表示させることはできません。
Themifyのテーマは、個別の投稿や固定ページのヘッダーデザインやサイドバーの有無を変更することができるので、全画面表示ができる設定に変更します。
Themifyカスタムパネル ＞ 投稿オプション の設定を変更します。
サイドバーオプション ：サイドバーなし（一番右）
コンテントの幅 ：Fullwidth（右側）
投稿タイトルを非表示 ：YES（タイトルを表示しない）
アイキャッチ画像を隠す ：YES（アイキャッチ画像を表示しない）
続いて、ページの外観をクリックします。
ヘッダーデザイン ：No Header（ヘッダーなし）
タイトルやパーマリンクなどを修正して「下書きとして保存」をクリックします。
（「公開」をクリックすると作成途中の記事が閲覧可能状態になるので注意してください。）
Themifyカスタムパネルに戻り、Themify Builderをクリックして「→ Frontend」を開きます。
フロントエンド（実際に表示されるWeb画面）に切り替わったら、先頭のロウ（Row）オプションをクリックします。
Row Width ：Fullwidth Row Content（一番右）
Row Height ：Full Height（100% vh）（右側）
を選択して「DONE」クリックして保存します。
これで準備は完了です。
４ 写真や動画を背景に埋め込む
写真や動画を埋め込む位置は、先程Row WidthとRow Heightを指定したロウ（Row）オプションの右隣りにあるロウ（Row）スタイリングの「背景」に埋め込みます。
１枚の写真だけを埋め込む場合は、Background Type「画像」を選択します。
「Zoom background image on hover」にクリックをつけると、マウスオバーした際に画像にズームアクションが追加されます。
Background Type「グラデーション」を選択すると、カラーピッカーで色を指定して綺麗なグラデーションカラーの背景にすることができます。
Background Type「動画」を選択すると、動画を１本埋め込むことができます。（※Builder V4からモバイル環境でも背景に埋め込んだ動画は再生されるようになるはずでしたが、バグにより再生されません。近々修正される予定です。）
「Disable looping」：ループ再生しない。
「Disable audio」：音声を出さない。
「背景画」：非再生の時の代替え画像
Background Type「Slider」を選択すると、複数の写真を連続で表示するスライダーを埋め込むことができます。
「画像サイズ」：４種類から選べますがオリジナルが自動的に適応されているようです。
「Background Slider Mode」：Ken Burns Effect（ズームアクション）にしてください。
Background Type「Slider Videos」はThemify アドオンプラグインである「BG Video Slider」をインストールすると表示されます。複数の動画を連続再生することができます。
「Auto play」：自動再生のON/OFF
「Video progress ber」：再生位置の表示/非表示
「Video controls」：コントロールボタンの表示/非表示
「Disable Audio」：YES（NOにすると自動再生しません）
「Fallback image」：動画が再生できない時に表示する画像
「＋Add new video」：クリックすると動画を追加
埋め込んだ写真が綺麗過ぎてタイトルや文章が目立たなくなったり、動画の容量を抑えるために画質が気になる場合があります。
そんな時は、ロウ（Row）スタイリングのROW OVERLAYで埋め込んだ写真や動画に透過性のある単色を被せて映像を抑えめにしてあげるといいでしょう。
色や透過率は埋め込む素材によって変わってきますが、リアルタイムで反映されるので調整しながら行ってください。
リアルタイムで表示状況を確認しながら作成できるので、初心者でも本当に分かりやすいですよね？ これがThemifyのテーマやプラグインの魅力の一つだと思います。
ついでに表示プレエビューを切り替えて、タブレットやスマホでの表示に支障がないか確認してみましょう。
赤枠で囲ったPCマークをクリックするとWeb表示モードになります。赤色のアンダーラインに位置しているPC・タブレット・スマホボタンでディバイスを切り替えて全画面表示の状況を確認してください。
問題がなければ、左上の「保存」をクリックして一時保存しておきましょう。
５ 埋め込んだ写真や動画に文字を重ねる方法
次に背景の写真や動画に重ねて表示するタイトルや文章を作成していきますが、注意することがあります。
まずは、下の３枚の写真を見比べてください。
PC表示
タブレット表示
スマホ表示
青字の「テキストモジュール」は、通常文章を作成する時に使用するThemifyのテーマにデフォルトで組み込まれているテキストモジュールを使用して、文字サイズを５emにして作成しました。
Themifyのテーマは、レスポンシブルデザインを採用しているので、特に指定をしなければPC表示がタブレットやスマホに流用されます。PCで表示する分には文字の大きさは適切ですが、タブレットやスマホで表示するには文字サイズが大きすぎて文字が重なって読めなくなっているので、デバイスに合わせて文字サイズを指定する必要があります。
やり方は簡単です。
フロントエンドのままデバイスのアイコンをクリックして、編集モードのままデバイスを変えます。プレビューモードにしないようにしてください。
青字のテキストをクリックしてテキストの設定画面を表示して、スタイリングの書式からフォントサイズを画面を見ながら変更します。ちなみに、文字サイズだけでなく文字色、パディング、マージンもデバイスごとに変えることができます。
書式が決まったら最後に「DONE」をクリックして保存します。
同様にタブレットの縦と横のアイコンをそれぞれクリックして文字サイズの調整を行います。
もう一度、プレビューモードにしてデバイスに合わせて文字の大きさが変わっているかを確認してみます。
文字が重なり合って読めない不具合は解消されましたね。
パディングやマージンを調整して位置を微調整すれば完成です。
ただ、デバイスごとに調整するのが面倒と言えば面倒ですし、ディスプレイのサイズは様々なので絶対に文字が重なり合ったりしないと言う訳ではありません。
そんな問題を解消してくれるプラグインが、Themifyのアドオンプラグインの中にあります。
上の写真の中に「Fit Text プラグイン」と表示されている部分を「Fit Text」で作成しています。
Fit Textはポスター広告に使用する文字を簡単に作成するプラグインで、表示するディスプレイのサイズに合わせて文字の大きさを自動的に調整してくれる便利なプラグインです。
この「Fit Text」を使えば、ディスプレイサイズによって発生する文字の重なりや行ズレを起こすことがなくなるので、デバイスごとの調整が不要になりより簡単に全画面表示などが行えるようになるので活用するといいでしょう。
もう一つ気になることがあります。
タイトルなど文字を大きくすると気になってしょうがないのが文字の種類＝フォントです。
本文の文章に使用する文字サイズではあまり気になりませんが、文字サイズを大きくすると日本語の文字がダサくて気になってしまいます。
ThemifyのテーマやプラグインはGoogle Webフォントをサポートしているのでフォントを簡単に変えることができます。例えば
”同じ文字でもフォントが違うだけで文字から受ける印象が大きく変わりますよね。
テキストやFit Textのスタイリングから書式 ＞書体の一覧の中からGoogle Webフォントをを選ぶだけなのでとても簡単です。
日本語に対応するWebフォントもありますが、アルファベットに比べて文字数が多く容量が大きくなるため読み込みが遅くなるのであまりお勧めできません。
お洒落に全画面表示を取り入れても表示される文字がダサいフォントでは残念な印象を受けてしまいます。使用する文字だけをサブセット化する方法もあるのですが、かなり手間なのでやりたくないのが正直な意見です。
そこで手軽にお洒落な日本語フォント風に背景画像に重ねて表示する方法を紹介します。
と、言ってもこれもすごく簡単ことで、写真編集ソフトを使用して透過性ある「png形式」や「gif形式」で写真としてタイトルなどを作成しておき、テキストやFit Textの代わりに写真を被せるだけです。
この方法ならばパソコンの中にあるフォントを使用できるのでお洒落なフォントや可愛らしい文字を使うことができます。デメリットは文章の修正やバランスを変更する度に画像を作り直さないといけないという点です。
透過性の写真を重ねた場合
Fit Textプラグインを重ねた場合
作り方は大きく違いますがWeb表示としては同じように見えると思います。
ちなみにディスプレイサイズによって写真の大きさがリサイズされるのでデバイスごとに調整する必要はありません。
全画面表示部分が完成したら、引き続き本文を作成していきます。
ページが完成したら右上の「保存」をクリックして、「Backend」に戻り「下書き」から「公開」に切り替えます。
６ ページの途中で全画面表示をすることはできるの？
全画面表示をヘッダーのように見せる方法は説明した通りですが、ページの途中に全画面表示を取り入れることはできるか？ と疑問が湧くかもしれません。
答えは、もちろんできます。
このように背景画像の幅や高さも自由に設定することができます。
注意する点は、「３ 全画面表示をするための設定方法」で説明したとおり、themifyカスタムパネル ＞ 投稿オプション ＞サイドバーオプション で「サイドバーなし」を選択しておかないと全幅にすることができません。
このページには他のページのようにサイドバーがあるじゃん？？？
と思われた方もお見えになるかもしれませんね。
このページをバックエンドで表示するとすぐに理解できると思います。
写真の通り、コンテントを２カラムに区切り、右側に「ウィジェットエリア」モジュールをドロップして「サイドバー」の内容をコンテント内に表示させて、サイドバーがあるように見せていた訳です。
ページ内に全幅表示を取り入れて、尚且つ、サイドバーも表示させたい場合は、ページ全体のレイアウトを考えてカラム分けしておく必要があります。
ちなみにThemifyには「メニュー」モジュールもあり、ページ内の任意の位置にヘッダーメニューやフッターメニューを表示することもできます。
このようにページレイアウトをCSSを一切使わずに思うようにカスタマイズできるのがThemifyのテーマの凄いところだと思います。
テーマを思いのままカスタマイズできるだけの知識があればテーマの性能に依存する必要はないかもしれません。しかし、HTMLやCSSが書けなかったり複雑なコードを作成できない初級・中級者が自由にカスタマイズして思い通りのサイトを作成するにはテーマの性能に頼るのが一番の近道ではないでしょうか？
Themifyは誰でも簡単に思い通りにサイト作成ができるワードプレスのテーマです。
Themifyには機能制限がなく無料で使えるテーマが３種類あります。
まずはバックアップサイトやInstantWPでローカル環境を作成してThemifyを試してみてはいかがですか？
Themifyを無料で試す方法
料金プランと割り引き情報
購入ページとDL方法の解説
全画面表示ページの作り方は以上です。
この記事があなたのお役に立てたら幸いです。
またこの記事がお役に立てれたならhatena・Facebook・Twitterでシェアして頂けると励みになります。
