質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • WordPress

    7223questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HPのトップ画像を動画に変更したい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 187

bearbear_me

score 4

wordpressの「JIn」というテンプレを使用しているものです。

自分で編集したmp4の動画をトップ画像に使用したいです。

自分のサイトURLです。この「オトモニア」という画像のところを動画にしたいです。
https://otomonia.com/

できたらYouTubeからの引用で設定するのではなく、直接動画を埋め込みたいです。
プログラミングの知識があまりなく、参考サイトを読んでもあまり理解できませんでした。。。

お手数おかけいたしますが、どうかよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+5

テーマによってさまざまですが、動画自体はこのコードで挿入できます

<video src="動画のURL" width="幅" height="高さ" autoplay="true" loop="true" controlbar="no"></video>

※コード内で設定すべきもの

【動画のURL】メディアへアップロードしたものであればそのURLを、大きな動画を直接扱う場合にはFTPでUPLOADSフォルダなどへアップロードしてそのURLを記述する

【幅・高さ】動画の幅と高さを設定します(pxまたは%)。幅だけ指定して高さはautoにするといいかと思います。元の動画の幅以上にすることはできないようですね

【autoplay】自動再生するか(trueは「する」falseは「しない」)

【loop】繰り返しをするか(trueは「する」falseは「しない」)

【controlbar】再生状況のバー表示をするか(trueは「する」falseは「しない」)

まずはこれを投稿などの本文などへ入れて、再生できるかを確認してみてください

再生できたら、テーマのheader.php(テーマによって異なる場合あり)を見て、ヘッダー画像の出力されている部分あたりに再生できたコードを入れてみて、再生できるかを確認します。

うまく再生できたらヘッダー画像の部分のコードを削除すれば完成です

※この方法はあくまでも一般的なやり方ですから、何度も書くようにテーマや環境でさまざまですから参考程度に読んでくださいね。

※再生できる?できない?のみの回答ですのでこれ以上の質問にはお答えしかねますのでご了承ください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 13:59

    momosiriさん ありがとうございます!

    投稿画面でテストしてみたのですがうまくいきませんでした…。
    せっかく教えていただいたのにすみません。

    丁寧に言葉の説明までしてくださってありがとうございました!

    キャンセル

+1

お使いのテンプレート「JIN」は恐らく購入されたモノかと思います。

テンプレートを作成した販売元に問い合わせるのが良いかと思います。

JINお問い合わせ

ちょっとした変更かと思いますが、エンジニアにとって立派な案件レベルの質問に見えることもあるので質問内容は気を付けた方が良いかと思います。
「分からないからやって?」っと捉えられてもしょうがないかと・・・

直接コード編集出来るのであればmomosiriさんの回答で事足りると思いますよ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 13:57

    NIAさん、ありがとうございます!

    今、コードを触ってみてます。どうしてもわからない場合はお問い合わせさせていただこうと思います。

    キャンセル

+1

WordPressのテーマを直接編集する必要があると思われます。
テーマの編集の仕方は下記などを参照にすると良いでしょう(下記はCSSの編集なので、該当するphpファイルに置き換えてください)
https://techacademy.jp/magazine/7750

サイトを参照したところ、編集したい箇所は<div id="main-image" class="main-image animate">
のあたりになりますので、今画像が表示されている部分をvideoタグに置き換えるような形になると思います。

また、WordPressではGUI操作からカスタマイズできない部分に関してはhtmlやphpなどのファイルを直接編集して
変更を行っていかなければならない部分もあるので、WordPressの構造やプログラミングについて知る必要があります。

ご参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 14:01

    razumaさん ありがとうございます!

    画像の部分のタグをvideoタグに変更したらなんとかなりそうです…!

    参考にさせていただきました!ありがとうございました!

    キャンセル

  • 2018/07/24 14:15

    テーマを編集する場合には、子テーマの作成を推奨します。
    子テーマって何?という場合には、一度このあたりをご覧ください。
    https://nelog.jp/wordpress-child-theme
    (あとは「Wordpress 子テーマ」とかでググってくださいね)

    キャンセル

  • 2018/07/24 14:21

    dit.さん ありがとうございます!

    子テーマというものがあるのですね…。お勉強してみます。
    前回も今回もお世話になりました。

    ありがとうございます。

    キャンセル

  • 2018/07/24 14:27

    補足コメントありがとうございます。
    Wordpressをそこまでガリガリ使っているわけではないので勉強になりました。
    親テーマを直接編集せずにそのままにしておけることや、カスタマイズ保持もでき、子テーマはとても良いですね!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    7223questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。