2017/08/09

ヘッダー画像(メインビジュアル)を動画にする方法

 

おすすめWordPress(ワードプレス)テーマ【ELEPHANT(エレファント)】のヘッダーにyoutube動画を設定する方法

 

今回は、ワードプレステーマ【ELEPHANT2】のヘッダー画像部分(メインビジュアル)を動画にする方法をご紹介します。

 

今回ご紹介する方法は、テーマのカスタマイズの知識が必要なため、あまりCSS等に触りなれていない方にはおすすめしません。

※テーマのカスタマイズは自己責任でお願いします。必ずバックアップをとってから編集しましょう。

 

【ELEPHANT】のヘッダー画像部分を動画にする方法その1
【子テーマに必要なファイルをコピーしよう!】

 

子テーマに必要なファイルをコピーする作業をしていきます。

 

まずFTPでサーバーにアクセスしてテーマのファイルを開きましょう。

「themes」と書かれているのがテーマの入っているファイルになります。

 

FTPって何って方は、自分でカスタムするのは辞めておいた方が無難です。

それでもどうしても動画をヘッダー(メインビジュアル)に入れたいという方は詳しい方に依頼することをお勧めいたします。

 

 

FTPのテーマファイル位置

 

開けたら次にテーマの中にある「elephant2」を開きます。

 

elephant2のフォルダを確認

その中ににある「header.php」をダウンロードします。

 

header.phpをコピーする

 

ダウンロードできたら今度は子テーマにアップロードします。

 

なのでフォルダを一つ戻っていろいろなテーマがあるところに戻りましょう。

 

今回は子テーマに「elephant2_for_business」を使用しているので今回はこのフォルダを開きます。

 

「elephant2-child」を使っている人はそのフォルダを開きましょう。

 

子テーマのフォルダを開く

 

開いたら先ほどダウンロードした「header.php」をアップロードしましょう。

 

アップロードした様子

 

ここでついでに子テーマの「functions.php」のダウンロードしてバックアップをとっておくといいでしょう。

 

これで準備ができました。

 

【ELEPHANT】のヘッダー画像部分を動画にする方法その2
【テーマのための関数の編集をしていこう!】

 

 

ワードプレスの管理画面にいき「外観」→「テーマの編集」とクリックしてください。

 

右側に「テーマのための関数」(functions.php)があると思います。それをクリックします。

 

 

functions.phpをひらく

 

?>の前のところにコードをいれていきます。ここで失敗するとHPが開かなくなることもあるので前もって「functions.php」のバックアップはあったほうがいいです。

 

コードを入れる場所

 

下記のコードをコピーして貼り付けてください。

 

できたら次のようになります

 

 

コードを貼り付けた様子

ファイルを更新」を押しましょう。

 

【ELEPHANT】のヘッダー画像部分を動画にする方法その3
【テーマーヘッダー(header.php)の編集をしていこう!】

 

次に「header.php」の編集をしていきましょう。

「外観」→「テーマ編集」を開いたら右にあるテーマヘッダーをクリックします。

 

テーマ編集の右の枠にあるテーマヘッダーをクリック

 

今回は下層ページにもヘッダー動画がほしい場合と下層ページにヘッダー動画がいらない場合の2つを書いていきますので、したいほうをやってみてください。

 

下層ページにも動画が欲しい人

 

このプードル鍼灸整骨院のサイトは下層ページにも動画が表示されるようになっています。

参考としてみたい方は、他のページも見ていただければと思います。

ヘッダー画像と書かれている部分をさがしてください。

他のテーマを使っている人はヘッダー画像(メインビジュアル)がはいっている部分をご自身で探しましょう。

 

ヘッダー画像の場所

 

みつけたらそこに下記のコードをコピーして貼り付けてください

 

 

このようになっていれば大丈夫です。

コードを貼り付けた様子

あとは下のほうにある「更新ボタン」を押しましょう。

 

下層ページにヘッダー動画がいらない人

 

手順は上とほぼ一緒ですがいれる位置が変わってきます。

ヘッダー画像の下にPHPで<?php if(~ 略 ~?>とかかれている下にコードをペーストしましょう。

 

入れる部分の様子

下記のような感じです。

PHPのあとにコードがコピーされている様子

これで下層ページの時にはヘッダーに動画は表示されません。

TOPはヘッダーに動画が表示されています。

ヘッダーに動画が表示されている様子

ですが下層ページはヘッダーに動画が表示しなくなっています。

下層ページに動画は表示されていない様子

イメージの参考に下記の参考サイトは下層ページはヘッダー動画を表示しないようにしています。

これでテーマの編集は完了です。

 

【ELEPHANT】のヘッダー画像部分を動画にする方法その4
【cssのカスタマイズをしていこう!】

 

次にCSSのカスタマイズをしていきます。

外観」→「カスタマイズ」→「追加CSS」とクリックします。

 

追加CSSをクリック

 

 

開くとこのようになっていますので下記のコードをコピーして貼り付けましょう。

追加CSSの様子

貼り付けるとこのようになります。

 

CSSにコードを貼り付けた様子

 

「#speheader」はワードプレステーマ「エレファント2」の画像のはいっている場所でかぶって余白がでてしまうので表示しないようにするCSSを追加しています。

それ以外の部分はYoutubeのCSS設定になります。

 

他のワードプレステーマを使用している方はそれぞれCSSをカスタマイズしてみてください。

 

これでCSSの設定は完了になります。

 

【ELEPHANT】のヘッダー画像部分を動画にする方法その5
【YOUTUBEの設定をしていこう!】

 

早速、ヘッダー(メインビジュアル)にYoutubeの動画をいれていきましょう。

 

外観」→「カスタマイズ」→「メインビジュアルYouTube設定」とクリックします。

 

カスタマイズにあるメインビジュアルYouTubeの設定をクリック

 

開いたページの一番上にYouTubeの動画のIDを貼り付ける作業をしていきましょう。

ホームページのヘッダーにしたいYouTubeの動画ページにいきましょう。

URLを見るとYouTubeのURLの最後の所にIDがでているはずです。

 

watch?v=○○←

○○の部分がIDです。下の画像だと青い部分です。それをコピーします。

 

URLのIDの部分の画像

 

 

それを設定のページに貼り付けていきます。

YouTube IDと書かれた一番上の項目になります。

次に自動再生するかしないか選びましょう。0か1を入力します。

続いて再生終了後に関連動画を表示するか選びましょう。0か1を入力します。

音量も設定しましょう。0~100まで設定できますがおすすめは0か20くらいです。

次にループの有無を選びましょう。0か1を入力します。

※ループさせる場合はプレイリストを入力する必要があるのでYouTube IDをいれます。
ループさせない場合は空白で大丈夫です。

続いてコントロールの表示を選びましょう。0または1か2を入力します。

最後にコントロールバーのYouTubeのロゴを控えめに表示するかどうかを選びます。0か1を入力しましょう。

 

記入例

 

 

 

自動再生させるか、させないかは、好みや戦略的な問題もあるのでご自分で決めていただければ良いと思います。

ただ再生終了後の関連動画は、【しないの:0】を選んでください。

他の動画に誘導され、WEBサイトから離脱する可能性が高くなってしまいます。

音量も急に音が鳴ると嫌がるかたが多いと思いますので、【0】で設定することをおすすめします。

全部入力できたら保存して公開しましょう。

これでYouToube動画をヘッダー(メインビジュアル)にいれることができました。

 

ヘッダーが動画になっている様子

 

 

こんな感じでオシャレになりました。レスポンシブになっているので携帯でも見れるのがいいですね。

画像より動画のほうがついつい見てしますのでヘッダー(メインビジュアル)に動画があると印象はだいぶかわりますね。

テーマ編集は難しいですが自己責任でチャレンジしてみてください。

参考にしたサイトを貼っておきますので詳しく知りたい方はそちらをみてください。

参考にしたサイト

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

- Comments -

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

CAPTCHA


Copyright© 🐩プードル鍼灸整骨院🐩 , 2017 All Rights Reserved.