動画上にお邪魔な閉じるボタン付きバナー設置手順
youtube動画をごら頂くと、動画内にお邪魔な広告が現れ、閲覧障害と感じられる
こともあるかと思います
邪魔なので消し去ろうとポチすると、何やらわずかな位置違いでどこかのサイトに
移動してしまう...
ミステイク確率の高い誘導が、いい誘導手段なのかどうかは何ともいえませんが、
シリウスサイトに同じようなお邪魔バナー、もしくは画像リンクを取り付けることも
お勧めはしませんができるのですね
ただし、シリウスで取り付けるページ専用で作用するもので、アップ動画の
カスタマイズではありません
バナーといいましたが、アフィリバナーをいっています
もしくは、画像にリンクを置いた広告みたいなスタイル
ご注意
グーグルアドセンス広告だけは何かしらの規約に触れる可能性もあるので
控えられることが望ましいかもしれません
検証例 実動...バナーが、見当たらないので画像を代わりにおいてます
閉じるボタンポチで消えます
では、シリウスサイトに設営する手順へ進んでみましょう
確認
指示は、スタイルシートへのCSS指示とHTMlテンプレート内の二つへ書き入れます
例記述はコピーで使えます
列が、折り返されていてもコピーして貼り付ければ整列します
一つ目の作業
設営手順 (スタイルシートCSS)
まず、スタイルシートに、cass指定コードを張り付けます
ここから
.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}
}
ここまで
CSS説明
パソコン用
#ad{width:300px;height:250px;padding:6px;position:absolute;left:100px;top:20px;}
width:300px;height:250px 画像サイズ
position:absolute;left:100px;top:20px; 横位置 高さ調整
高さ調整20pxを80とかにするとパソコン画面ではよい位置でも、スマートフォンですと
画面サイズに収まりれなくなり下へはみ出します
閉じるボタンを指示する行(URLドメインは、あなたのサイト)
#close{width:30px;height:30px;position:absolute;left:16px;top:11px;border:1px solid #fff;background:url(http://URLドメイン/閉じるボタン画像コード)}#close:hover{cursor:pointer}
}
CSSでの画像読み込み指示は、閉じるボタンのみです
閉じるボタンは、画像なので、シリウスに取り込んだ画像コードをページに張り付けて
一部を取り出します
例えば、以下列なら
img/clipimage_70.jpgの部分を取り出します
CSS画像読み込み記載例..........................................ここに置く
(http://www.affiliateno1.com/sirius.customize/img/clipimage_70.jpg)}
URLコードは、上記例、もしくは、以下例
(http://www.affiliateno1.com/img/clipimage_70.jpg)}
で、反応します
一般的に使われる画像コード配列ですと画像が表示されませんので
上記例に従いの記載でお願いいたします
ここで使っているのは以下画像です
探すのが面倒な方は、画像をPCツールで切り取りご使用ください
閉じる画像のサイズは、以下で調整
width:30px;height:30px
横位置 上から下へ 閉じるボタンの枠線の太さ 枠線の色の順
left:16px;top:11px;border:1px solid #fff;
バナー内に閉じるボタンは移動できますので、left:16px;top:11pxで調整してください
各調整は、数値変更で対応してください
また、トップ、カテゴリーでは、上記コードをスタイルシートに配置しますが、
エントリーでしたら、スタイルの割り込みに張り付ければそのページだけで
作用します
二つ目の作業
動画コードとバナー、もしくはお邪魔画像コードの取り入れ、いずれか?
HTML
動画を配置するページに張り付けるコード
<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">
動画の中にお邪魔するアフィリバナーか、リンク付き画像などをここに置きます
(リンク誘導しなければ、画像だけでもOK)
<div id="close" onclick="document.getElementById('ad').style.visibility = 'hidden';"></div>
</div>
</div>
youtube埋め込みコードて、何?なんて質問が、ございました
皆さん、知ってるはずと思ってまして....?
youtube
サイトでの動画あり画面のURLではございません
動画上でマウス操作..右クリック
プルダウンメニューより、埋め込みコードを選択して取り込みシリウス記事欄に
張り付けてください
読み込みコードでは、サイズが少し大きめですので数値を書き換え変更してください
プレビューで動画はご確認いただける...はずです
あとがき
まず、お邪魔画像か、バナーの上かずれ横かに閉じるボタンは現れます
調整をやりすぎて何が何やらわからくなったら、再度CSS張り付けなおして
再統制してみましょう
このカスタイズは、シリウスのデフォルトテンプレートでは、ノンレスポンシブなので
反映されません
デフォルトテンプレートをレスポンシブ構造に切り替えた場合は反映しますが、
知識がないと切り替えできません
もし、チャレンジするならこちらで...Responsive.Design1
iphone設定では、スマートフォンCSSテンプレートにコード追加となりますが、
また、別なCSSコードを製作するようです......面倒ですよ....
関連ページ
- youtube動画の片隅に画像リンクを配置してみる
- youtube動画の上、画面上に画像リンクを置いてみるとクリックされやすいというお話をもとにシリウス専用でカスタマイズしてみました 各カスタマイズをまとめています
- youtube動画をレスポンシブテンプレートに合わせて自動縮小
- シリウスのレスポンシブテンプレートで、youtube動画を設置してもスマートフォンではサイズが縮小しませんので、作用するようCSS指定しましょう