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

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

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

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

Q&A

解決済

1回答

3203閲覧

動画の上にテキストを重ねたい。

julie

総合スコア30

WordPress

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

0グッド

0クリップ

投稿2020/11/07 02:19

編集2020/11/07 08:10

テーマ「シドニー」のヘッダーを動画にしております。
そこで、動画の上にテキストを重ねたいと思いcssのpositionプロパティで行おうと考えました。
動画の上に載せたいテキストにclass指定を行いました。

css

1#wp-custom-header-video{ 2 position: relative; 3} 4.moji{ 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 -ms-transform: translate(-50%,-50%); 9 -webkit-transform: translate(-50%,-50%); 10 transform: translate(-50%,-50%); 11 margin:0; 12 padding:0; 13}

という記述を行いましたが、動画の上にテキストが移動せず困っております。
cssでなくとも動画の上にテキストを載せられることが出来るなら、プラグインのようなものでも大丈夫です。
または、テーマのカスタマイズでも大丈夫なので、どなたか、動画の上にテキストを表示させる方法を教えてください。
よろしくお願いいたします。

以下が、ソースコードになります。

html

1 <div id="wp-custom-header" class="wp-custom-header"> 2 <video id="wp-custom-header-video" autoplay="" loop="" width="1920" height="1080" src="該当URL/wp-content/uploads/2020/11/ヘッダーPV-1.mp4"></video> 3 <button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play"><i class="sydney-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"></path></svg></i></button></div> 4 5<div id="content" class="page-wrap"> 6 <div class="container content-wrapper"> 7 <div class="row"> 8 <div id="primary" class="content-area col-md-9"> 9 <main id="main" class="post-wrap" role="main"> 10<article id="post-368" class="post-368 page type-page status-publish hentry"> 11 <header class="entry-header"> 12 <h1 class="title-post entry-title">home</h1> </header><!-- .entry-header --> 13 <div class="entry-content"> 14 <p class="moji" style="text-align: center;">bbq</p> 15 </div><!-- .entry-content --> 16 17 <footer class="entry-footer"> 18 </footer><!-- .entry-footer --> 19</article><!-- #post-## --> 20 </main><!-- #main --> 21 </div><!-- #primary --> 22 23 </div> 24 </div> 25 </div>

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

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

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

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

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

hatena19

2020/11/07 04:23

現状のHTMLを提示してもらえますか。 検証ツールで該当HTMLタグを右クリックして Copy - CopyElement でコピーできますのでそれを貼り付けてください。
hatena19

2020/11/07 07:40

質問は編集できますので、質問の方に貼り付けてもらえますか。
guest

回答1

0

ベストアンサー

動画のブロックdiv.sydney-hero-area内にテキストを配置して、

html

1<div class="sydney-hero-area"> 2 <div class="header-image"> 3 <div class="overlay"></div> 4 </div> 5 <div id="wp-custom-header" class="wp-custom-header"> 6 <video id="wp-custom-header-video" autoplay="" loop="" width="1920" height="1080" 7 src="該当URL/wp-content/uploads/2020/11/ホームページヘッダーPV.mp4"> 8 </video> 9 <button type="button" id="wp-custom-header-video-button" 10 class="wp-custom-header-video-button wp-custom-header-video-play"> 11 <i class="sydney-svg-icon"> 12 <!-- 略 --> 13 </i> 14 </button> 15 </div> 16 <h1 class="moji" style="text-align: center;">bbq</h1> <!-- ここにテキスト --> 17</div>

下記のCSSで動画は画像の中央に配置されます。

css

1.sydney-hero-area { 2 position: relative; 3} 4 5.moji{ 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 -ms-transform: translate(-50%,-50%); 10 -webkit-transform: translate(-50%,-50%); 11 transform: translate(-50%,-50%); 12 margin:0; 13 padding:0; 14}

HTMLが現状のままでいくなら、下記でどうでしょう。

css

1body { 2 position: relative; 3} 4 5.moji{ 6 position: absolute; 7 top: calc(50vw * 1080 / 1920); 8 left: 50%; 9 -ms-transform: translate(-50%,-50%); 10 -webkit-transform: translate(-50%,-50%); 11 transform: translate(-50%,-50%); 12 margin:0; 13 padding:0; 14}

投稿2020/11/07 08:14

編集2020/11/07 09:59
hatena19

総合スコア33620

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

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

julie

2020/11/07 08:33

ありがとうございます。 ただ、sydneyでどうすれば、仰っている部分にhtmlを打ち込める方法のカスタマイズ方法がわからず困っております。 通常だと、index.phpあたりだと思うのですが、私は、フロントページを固定する形式でサイト構築を行いたいという希望があります。 どうすれば、mp4の下にHTMLの記述をできるようにするかも併せてご教授お願いします。
hatena19

2020/11/07 10:00

現状のHTMLのままで行く場合のCSSコードを回答に追加しましたので参考にしてください。
julie

2020/11/10 01:06

ご協力ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問