ワードプレスにおいて投稿記事内の埋め込み動画にかぶさるようにクローズボタン付きのバナー広告を表示させたいと思っています。
テーマはSimplicity2を使用しています。
あるサイトで紹介されていた以下の手順を参考に行ったのですが途中わからないことが所々あり躓いている状況です。
(1)下記のコードをテーマ編集のスタイルシート記述する。
.douga { position: relative; padding-top: 30px; padding-bottom: 70%; height: 0; overflow: hidden; margin-bottom: 30px; text-align:center; font-size:50px; } .douga iframe, .douga embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* パソコンだけに適用する動画広告のCSS */ @media screen and ( min-width:760px ) { #video{position:relative;left:0px;top:0px;z-index:100;} #ad{width:300px;height:250px;padding:6px;position:absolute;left:190px;top:125px;} #close{width:10px;height:10px;position:absolute;left:16px;top:11px;border:1px solid #fff;background:url(http://hamadanoweb.com/blog/wp-content/uploads/2016/02/close.png)}#close:hover{cursor:pointer} }
(2)次にクローズボタンを表示させるためテーマ編集の「個別記事ページ」に下記コードを記述します。記述場所は記事本文を表示するコードの下です。
<div id="ad"> *****バナー広告のコード****** <div id="close" onclick="document.getElementById('ad').style.visibility = 'hidden';"></div> </div> </div> コード
(3)最後に記事を投稿する際に下記のコードで埋め込み動画のiframeを囲えば表示される。
<div id="video"><div class="douga"> *****埋め込み動画のiframe****** </div> コード
・質問1
(1)のコードをスタイルシート(style.css)に記述するようですが表記されているコードをそのままコピペしてよろしいのでしょうか。
・質問2
(2)において「テーマ編集の「個別記事ページ」に下記コードを記述します。記述場所は記事本文を表示するコードの下です。」とのことですが正直どこに記述していいかわかりません。適当な場所を教えていただきたいです。
ブログ初心者ということでHTMLやCSSに関してわからないことだらけですが、解決の手助けをしていただける方がいましたらなにとぞお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。