シリウスにインタースティシャル広告を導入したが、うまく位置が合わない、
というお便りがございましたが、何それと思いの方もおられるかと....

 

簡単に言えば、サイト内に置いた動画内に独自に広告を入れ込むという
もので、自主制作の動画サイトでは見られるリンク誘導方法

 

まずは、質問内容をお読みください

 

---

 

質問1

 

シリウスでのサイト作成の際
オンラインマニュアルLibraryさんにはお世話になっており、
本当に助かってます。

 

今回初めての質問させていただきます。よろしくお願いします。

 

上記にある通り、埋め込み動画iframeなどに覆いかぶさるような
インタースティシャル広告の表示方法についての質問です。

 

テンプレートは『レスポンシブの2カラム』です。

 

インタースティシャル広告表示のためシリウスの「スタイルシート」編集に
下記コードを記述しました。

 

 

.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://＊＊＊.com/＊＊＊＊/close.png)}#close:hover{cursor:pointer}
}

 

上記コードには動画サイズのレスポンシブ設定も含まれているはずです。
「close」に記述してるURLはクリックしてバナー広告を消去するときの
「×」の画像です。

 

 

そして、広告表示したいレントリー記事、その本文コード下に下記コードを
記述しました。

 

<div id="ad">
＊＊＊＊＊バナー広告のコード＊＊＊＊＊＊
<div id="close" onclick="document.getElementById('ad').style.visibility = 'hidden';"></div>
</div>
</div>

 

最後に、記事を書く際に埋め込み動画（iframeなど）を囲むように
下記コードを記述しました。

 

<div id="video"><div class="douga">
＊＊＊＊＊埋め込み動画のiframeなど＊＊＊＊＊＊
</div>

 

上記のやり方でアップロードした際には
PCサイトの広告は表示されたものの、埋め込み動画の中心には
表示されず少々のズレがありました。
iphoneサイトにおいては、埋め込み動画の再生ボタンがプレイヤー下部に
チョコっと顔を出す程度で表示され、広告は埋め込み動画の下、
ただのバナー広告のように表示されるといった始末です；；

 

よろしければデフォルトテンプレートでの表示方法もお教えいただけたら
幸いです。

 

 

 

オンラインマニュアルLibraryさんでは広告表示に関する記事や質問が少なく、
こういった質問はマナー違反なのかなと、少々心配しております。。。

 

質問内容に問題なく、お時間が許させるのであればご教示ください。
よろしくお願いします。

 

---

 

対応1

 

 

ご連絡ありがとうございます。

 

当サイトのご利用ありがとうございます

 

質問を確認しました
インタースティシャル広告は、理解しますが、すべてを理解するには,,,,?
シライシ様には、直面しているので理解できていることでも...読み手としては苦しいです

 

 

/* パソコンだけに適用する動画広告のCSS */とございますが、

 

@media screen and ( min-width:760px )の記載法、、、これでよいのでしょうか？
と疑問が..

 

メディアコードでパソコンでは表示させない、としているのでしょうか？
その場合の記載ではないと思われますが？

 

パソコンでは表示して、スマートフォンでは表示しないというなら
異なる記述になるかと.....

 

display: block;display: none; の記載も必要と思われますが見当たりません

 

 

タダ、これだけで,ずれが修正されるわけではありません

 

 

広告を掲載しているサイトＵＲＬを教えた頂ければと....
メールのＨＴＭＬコードだけでは情報不足でお答えができません
ソースを見ての調整が必要かと思います

 

 

一応疑問

 

この記載もなんか不明？ なぜ、メディアコードでもないのに　100%;の指定を使うのでしょう？

 

.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://＊＊＊.com/＊＊＊＊/close.png)}#close:hover{cursor:pointer}
}

 

---

 

 

質問2

 

シリウスカスタマイズ様、返信ありがとうございます。

 

こんなにはやく、ご丁寧なお返事がいただけるとは恐縮です。

 

 

お恥ずかしいのですが、当方HTMLの知識などまったくなく、シリウス自体、先月
購入したばかりで

 

一つ一つググりながら手探りでサイト作成を行っている状況です。

 

メールに記載したHTMLコードも、広告についてやっと探しあてた下記URLの
ブロ グ様から引っ張てきた次第です。
（リンクサイトは、みだらなコンテンツなので掲載不能）

 

言葉足らず勉強不足で、質問するにもまだはやかったと反省しております。
申し 訳ありませんでした。。。

 

質問に関して端的に申しますと

 

デフォルトテンプレート・レスポンシブテンプレートで
PC・iphoneサイトともにインタースティシャル広告を埋め込み動画上に
掲載したいとなり、そのようにお聞きすればよかったのですが

 

それではあまりにも不躾と思い、理解もしていないのにHTMLコードを
記載してし まいました。

 

勉強がてら初めて作った私のサイトです。
とても人目に晒せるモノではなく、大変見苦しいモノですがサイトURLの方を
置 いておきます。

 

http://tankanpaipubed.web.fc2.com/

 

返信を頂く間に、色々いじっていましたら広告があらぬ所に表示されて
しまいま した＾＾；

 

 

お付き合い頂いてありがとうございます。
重ねがさねお礼申し上げます。

 

---

 

解決へ進む.....

 

さて、今回のインタースティシャル広告への質問ですが、

 

基本がレスポンシブテンプレートでのみ反映される基本ＣＳＳですので、
ここでの解説とせず、当サイトの子サイト、レスポンシブ専用カスタマイズ
サイトで、ＣＳＳを理解してうまく位置調整が合わせできるよう取り付け方法
の詳細を追記しました

 

こちらでご確認ください
http://www.affiliateno1.com/sirius.customize/youtube/file40.html

 

 

スポンサーリンク

 

 

インタースティシャル広告の位置合わせができない
シリウスカスタマイズサポートフォーラム一覧
シリウスカスタマイズサポートフォーラム
シリウスカスタマイズ