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

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

ただいまの
回答率

91.04%

  • PHP

    17332questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    5793questions

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

  • CSS

    4645questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Xeory Extensionについて

解決済

回答 1

投稿

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

323232

score 3

現在、Xeory ExtensionのテーマでHPを作成中です。

トップページの大きいな余白部分に動画を背景として設定したいのですが
試行錯誤しますが上手くいきません。

画像はCSSで設定できますが、動画となるとHTMLも触らないといけないため
ワードプレスのPHPだとどこを変更すればいいのか全く見当がつきません。

どなたか、アドバイスいただけたら幸いです。

よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

ちょっとイメージが掴めませんが

トップページの大きいな余白部分

デモページでいう青緑色の背景の部分を指すなら、front-page.php

<div id="main_visual">
  <video></video><!-- 追加 -->
  <div class="wrap">
    <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
    <p><?php echo nl2br(get_option('top_description'));?></p>
  </div><!-- .wrap -->
</div>


この位置にvideoを挿入し、あとはCSSで高さを合わせ必要に応じてposition: absolute;等指定してやれば良いでしょう


【追記】

#main_visual {
  position: relative;
}
#main_visual video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#main_visual .wrap {
  position: relative;
  z-index: 2;
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/14 00:15

    お世話になります。
    ありがとうございます。
    PHPの記述を指定されたように変更して
    mp4を埋め込んだのですが上手くいきません。。。

    キャンセル

  • 2017/12/14 10:02

    上手くいかないとは?
    動画の表示がされない・表示はされるけど位置が違う
    などもう少し詳しく教えてください。

    キャンセル

  • 2017/12/14 10:04

    返信ありがとうございます。

    動画が表示されず、そのままの背景のままになっています。
    子テーマが邪魔しているのかと思い子テーマのCSSをすべて削除しても改善されせんでした。

    キャンセル

  • 2017/12/14 10:06

    追加したvideoタグにCSSで
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    としても表示されませんか?

    キャンセル

  • 2017/12/14 10:11

    >追加したvideoタグにCSSで

    このCSSはどのように書けばいいのでしょうか?

    キャンセル

  • 2017/12/14 10:14

    videoタグに何もIDを与えてないなら
    #main_visual video {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    }
    こうです

    キャンセル

  • 2017/12/14 10:19

    できました!!!!
    ありがとうございます!!!!

    動画さいせいされたのですが文字が消えてしまいました
    文字の反映は無理でしょうか?

    キャンセル

  • 2017/12/14 10:25

    その場合もう少し調整しないといけないですね。
    回答に追記したCSSを適用させればいけると思います

    さっき追加したCSSは削除して上書きしてください。

    キャンセル

  • 2017/12/14 10:40

    完璧です。
    ほんとにほんとにありがとうございます!!!!!!!!

    スマホでの表示では、大きな画像として表示されてしまうのですが
    CSSを
    @media screen and (max-width: 480px)
    でくくってもスマホは大きい表示(静止画)になります
    改善策ありますでしょうか??

    キャンセル

  • 2017/12/14 10:54

    スマホでも動画を再生したいということですか?
    video要素での再生はスマホでは全画面表示になってしまいautoplayなども対応していないはずなので
    そこら辺はvideo要素の仕様になるので別に質問を立てた方が良いかもしれません。
    もしくはスマホ表示ではメディアクエリでimg(静止画)に切り替えるか、妥協してもgifが良いと思います。

    キャンセル

  • 2017/12/14 11:02

    返信ありがとうございます
    スマホでは、静止画を考えています。
    別スレッドで質問させていただきます。
    最後に、Xeory Extensionの質問なのですが
    現在、動画とヘッダー(メニューボタンがある場所)が分かれているのですが
    メニューの下に動画が入り背景が半透明にすることは可能でしょうか?

    キャンセル

  • 2017/12/14 11:08

    #header {
    width: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    }
    #gnav,
    #gnav ul li a {
    background: transparent;
    }
    多分これでいけます。色は調整してください。

    キャンセル

  • 2017/12/14 11:11

    返信ありがとうございます

    動画は一番上まできたのですが
    メニュー(ヘッダー)がすべて消えてしまいました・・・。

    キャンセル

  • 2017/12/14 11:13

    スミマセン。#headerにz-index: 99999;を追加してください

    キャンセル

  • 2017/12/14 11:18

    追記しました。
    ヘッダーが表示されましたが、半透明にはなっていないです。
    動画自体は上に移動しているので半透明が反映されていないようです。。。

    キャンセル

  • 2017/12/14 11:21

    うーん、importantしても無理ですかね
    background: rgba(0,0,0,0.5)!important;

    キャンセル

  • 2017/12/14 11:27

    ヘッダー自体はできました!
    ありがとうございます。
    メニューボタンはそのままの不透明になってしまいますが
    ここも変更かのうでしょうか?

    キャンセル

  • 2017/12/14 11:32

    同じくimportantすればいけます
    background: transparent!important;

    キャンセル

  • 2017/12/14 12:09

    返信ありがとうございます。

    メニューのタグはどれになるのでしょうか?

    body.color02 #gnav ul li

    でしているのですが、うまくいきません。。。

    キャンセル

  • 2017/12/14 12:10

    #gnav,
    #gnav ul li a {
    background: transparent!important;
    }
    です。

    キャンセル

  • 2017/12/14 12:32

    お返事ありがとうございます。

    設定しましたが、デフォルトの色の背景が表示されてしまいます、、

    キャンセル

  • 2017/12/14 20:10

    aozuki様
    お世話になっております。
    メニューの透明できました。
    本当にありがとうございます。

    ほかのページにした際に、同じ効果が発生してしまい上にずれてしまっているのですが
    ほかのページではならないようにすることは可能でしょうか?
    アドバイスお願い致します。

    キャンセル

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

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

関連した質問

  • 解決済

    cakephpの

    cakephpブックマークチュートリアル←このサイトのチュートリアルをやってみようと思い、composerでcakephpをインストールしました。しかしアクセスすると以下のエラーが

  • 受付中

    レンタルサーバー上でのメール送信のエラー

    PEAR::Mailでメールを送信を試していて うまく行ったのでレンタルサーバ(webcrowといいます)に上げてみたのですが こちらの方ではエラーが出ます PEAR::Mailの

  • 受付中

    adminerのインストール方法

    phpadminよりも軽いという事でadminerを入れようと思ったのですが、ubuntu のvar/www/htmlにインストールしたadminerを入れても拡張機能がありません

  • 解決済

    Cake PHPの導入時エラーについて

    ・composer ディレクトリ:/usr/local/bin/ ・composer.phar /Applications/XAMPP/xamppfiles/htdocs

  • 解決済

    laravel5.3にてmigrateができない

    いつもお世話になっております。 最近は質問ばかりで恐縮ですがよろしくお願いします。 前提・実現したいこと Laravel5.3,CentOS7,PHP7,MariaDBの

  • 解決済

    PDOをインストールしたい

    前提・実現したいこと Gitでcloneしてきたページを開こうとしたら下記のようなエラーが出たので、pdoをインストールしようとしているのですが うまくいかないです。どういうコマン

  • 解決済

    ブラウザアクションをクリックした時のみ、content_scriptを実行する方法

    やりたいこと Chrome拡張機能を開発していますが、アクセスしたWEBページに対して操作を行いたいと思っています。そこで、content_scriptでjavascriptを挿入

  • 解決済

    Swift Viewわけがエラーになる

    swift初心者です。 viewcontroller肥大化を防ぐためにextensionなどを使った 分散化をしようとしています。 以下のようなエラーが出たのですが、vie

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

  • PHP

    17332questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    5793questions

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

  • CSS

    4645questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。