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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

Q&A

解決済

3回答

3493閲覧

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

bearbear_me

総合スコア12

WordPress

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

0グッド

0クリップ

投稿2018/07/22 15:53

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

<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/23 06:21

momosiri

総合スコア1509

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bearbear_me

2018/07/24 04:59

momosiriさん ありがとうございます! 投稿画面でテストしてみたのですがうまくいきませんでした…。 せっかく教えていただいたのにすみません。 丁寧に言葉の説明までしてくださってありがとうございました!
guest

0

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

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

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

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

投稿2018/07/23 08:17

razuma

総合スコア1313

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bearbear_me

2018/07/24 05:01

razumaさん ありがとうございます! 画像の部分のタグをvideoタグに変更したらなんとかなりそうです…! 参考にさせていただきました!ありがとうございました!
dit.

2018/07/24 05:15

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

2018/07/24 05:21

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

2018/07/24 05:27

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

0

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

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

JINお問い合わせ

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

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

投稿2018/07/23 07:52

編集2018/07/23 07:53
NIA

総合スコア181

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bearbear_me

2018/07/24 04:57

NIAさん、ありがとうございます! 今、コードを触ってみてます。どうしてもわからない場合はお問い合わせさせていただこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問