youtube動画内に閉じるボタン付きバナー取り付け方法

Sirius.customize

TOP

トップページ

質問

シリウスカスタマイズサポート

ご案内

サイトマップ

動画上にお邪魔な閉じるボタン付きバナー設置手順

youtube動画をごら頂くと、動画内にお邪魔な広告が現れ、閲覧障害と感じられる
こともあるかと思います
邪魔なので消し去ろうとポチすると、何やらわずかな位置違いでどこかのサイトに
移動してしまう...

ミステイク確率の高い誘導が、いい誘導手段なのかどうかは何ともいえませんが、

シリウスサイトに同じようなお邪魔バナー、もしくは画像リンクを取り付けることも
お勧めはしませんができるのですね

ただし、シリウスで取り付けるページ専用で作用するもので、アップ動画の
カスタマイズではありません

バナーといいましたが、アフィリバナーをいっています
もしくは、画像にリンクを置いた広告みたいなスタイル

ご注意
グーグルアドセンス広告だけは何かしらの規約に触れる可能性もあるので
控えられることが望ましいかもしれません

検証例　実動...バナーが、見当たらないので画像を代わりにおいてます
閉じるボタンポチで消えます

では、シリウスサイトに設営する手順へ進んでみましょう

確認
指示は、スタイルシートへのＣＳＳ指示とHTMｌテンプレート内の二つへ書き入れます
例記述はコピーで使えます
列が、折り返されていてもコピーして貼り付ければ整列します

一つ目の作業
設営手順　（スタイルシートＣＳＳ）

まず、スタイルシートに、ｃａｓｓ指定コードを張り付けます

ここから
.demo7 {
position: relative;
padding-top: 20px;
padding-bottom: 60%;
height: 0;
overflow: hidden;
margin-bottom: 30px;
text-align:center;
font-size:50px;
}
.demo7 iframe,
.demo7 embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* パソコンで作用する動画広告のCSS */
@media screen and ( min-width:100px )
{
#video{position:relative;left:0px;top:0px;z-index:100;}
#ad{width:300px;height:250px;padding:6px;position:absolute;left:100px;top:20px;}
#close{width:30px;height:30px;position:absolute;left:16px;top:11px;border:1px solid #fff;background:url(http://ドメイン/画像コード)}#close:hover{cursor:pointer}
}

ここまで

ＣＳＳ説明

パソコン用
#ad{width:300px;height:250px;padding:6px;position:absolute;left:100px;top:20px;}
width:300px;height:250px　画像サイズ
position:absolute;left:100px;top:20px;　横位置　高さ調整
高さ調整20ｐｘを80とかにするとパソコン画面ではよい位置でも、スマートフォンですと
画面サイズに収まりれなくなり下へはみ出します

閉じるボタンを指示する行（ＵＲＬドメインは、あなたのサイト）
#close{width:30px;height:30px;position:absolute;left:16px;top:11px;border:1px solid #fff;background:url(http://ＵＲＬドメイン/閉じるボタン画像コード)}#close:hover{cursor:pointer}
}

ＣＳＳでの画像読み込み指示は、閉じるボタンのみです

閉じるボタンは、画像なので、シリウスに取り込んだ画像コードをページに張り付けて
一部を取り出します

例えば、以下列なら

img/clipimage_70.jpgの部分を取り出します
ＣＳＳ画像読み込み記載例..........................................ここに置く
(http://www.affiliateno1.com/sirius.customize/img/clipimage_70.jpg)}

ＵＲＬコードは、上記例、もしくは、以下例
(http://www.affiliateno1.com/img/clipimage_70.jpg)}
で、反応します

一般的に使われる画像コード配列ですと画像が表示されませんので
上記例に従いの記載でお願いいたします

ここで使っているのは以下画像です

探すのが面倒な方は、画像をＰＣツールで切り取りご使用ください

閉じる画像のサイズは、以下で調整
width:30px;height:30px

横位置　上から下へ　閉じるボタンの枠線の太さ　枠線の色の順
left:16px;top:11px;border:1px solid #fff;

バナー内に閉じるボタンは移動できますので、left:16px;top:11pxで調整してください

各調整は、数値変更で対応してください

また、トップ、カテゴリーでは、上記コードをスタイルシートに配置しますが、
エントリーでしたら、スタイルの割り込みに張り付ければそのページだけで
作用します

二つ目の作業
動画コードとバナー、もしくはお邪魔画像コードの取り入れ、いずれか？
ＨＴＭＬ

動画を配置するページに張り付けるコード

<div id="video"><div class="demo7">
（youtube埋め込みコード）
<iframe width="420" height="315" src="https://www.youtube.com/embed/9xYsJrbc1oQ" frameborder="0" allowfullscreen></iframe>
</div>

<div id="ad">
動画の中にお邪魔するアフィリバナーか、リンク付き画像などをここに置きます
（リンク誘導しなければ、画像だけでもＯＫ）
<div id="close" onclick="document.getElementById('ad').style.visibility = 'hidden';"></div>
</div>
</div>

youtube埋め込みコードて、何？なんて質問が、ございました
皆さん、知ってるはずと思ってまして....?

youtube
サイトでの動画あり画面のＵＲＬではございません

動画上でマウス操作..右クリック
プルダウンメニューより、埋め込みコードを選択して取り込みシリウス記事欄に
張り付けてください

読み込みコードでは、サイズが少し大きめですので数値を書き換え変更してください

プレビューで動画はご確認いただける...はずです

あとがき

まず、お邪魔画像か、バナーの上かずれ横かに閉じるボタンは現れます

調整をやりすぎて何が何やらわからくなったら、再度ＣＳＳ張り付けなおして
再統制してみましょう

このカスタイズは、シリウスのデフォルトテンプレートでは、ノンレスポンシブなので
反映されません

デフォルトテンプレートをレスポンシブ構造に切り替えた場合は反映しますが、
知識がないと切り替えできません
もし、チャレンジするならこちらで...Responsive.Design1

iphone設定では、スマートフォンＣＳＳテンプレートにコード追加となりますが、
また、別なＣＳＳコードを製作するようです......面倒ですよ....

トップページ

動画上にお邪魔な閉じるボタン付きバナー設置手順

関連ページ

スポンサー広告

ＭＥＮＵ一覧

ＣＳＳ追加カスタマイズ

youtube関連

アドセンス

サポート