ホーム へ       サンプルページ  Adblock Checker and Notifier  adblock_checker.htm

Adblock Checkerは、ユーザーがサイトの一般的な広告ブロッカーの1つを使用しているかどうかを確認するスクリプトで、検出された場合は無効にするよう慎重なメッセージを表示します。      DHTML。       メッセ0ジなどのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、このページのオープンで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、adblock_checker.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※:  変わってしまった、ファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、adblock_checker.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2)(*3) を参考に太字部分の編集を任意に行います。     ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 10.x〜 などで開いて。     更新の確認は、[F5]キー を押し、最新データ読み込み、で。    あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ツール] - [インターネット オプション] - [閲覧の履歴] - [削除] などでも。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像 なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わってしまったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

 

(*1) : adblock_checker.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  Adblock Checker and Notifier</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<style>
/* Style for sample Disable Adblock Notify Message. Remove if not using */

div#blockedmessage{
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: scale(0.9); /* initially scale down nav size */
transform: scale(0.9);
background: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100000;
opacity: 0;
overflow: auto;
-moz-transition: visibility 0s 0.5s, opacity 0.5s, -moz-transform 0.5s; /* transition settings */
-webkit-transition: visibility 0s 0.5s, opacity 0.5s, -webkit-transform 0.5s;
transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
}

div#blockedmessage > div{
width: 80%;
line-height: 1.5;
font-size: 1.2em;
}

div#blockedmessage > div h2{
position: relative;
margin-bottom: 10px;
}

div#blockedmessage > div h2:after{
position: absolute;
content: '';
top: 100%;
left: 0;
width: 35%;
height: 7px;
background: red;

}

div#blockedmessage > div b#dismissmsg{
margin: 20px auto;
cursor: pointer;
text-transform: uppercase;
color: #E20000;
background: #eee;
display: block;
margin: 20px auto;
text-align: center;
border-radius: 8px;
padding: 3px 5px;
font-size: 18px;
box-shadow: 0 0 3px gray;
}

div#blockedmessage.showmsg{
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-ms-transition-delay: 0s;
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-transition-delay: 0s;
}

/* style or show/hide arbitrary content on your page by doing something like the below: */

html.adblocked #targetelement{
// style for #targetelement when ad blocker enabled
}

</style>
<script>

;(function(){

// Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/

var debug = true // set debug to true to always invoke adblockaction() and add class of adblocked to root element regardless of whether Adblock is enabled, for ease of styling and debugging. Set to false on production page

// Main Adblock Detect function
// When Ad Blocker detected
// Adds "adblocked" CSS class to HTML root element
// Calls function adblockaction()

var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found

document.addEventListener('DOMContentLoaded', function(){
var testunit = document.createElement('div');
testunit.innerHTML = '&nbsp;';
testunit.className = targetclass;
document.body.appendChild(testunit);
setTimeout(function() {
if (testunit.offsetHeight === 0 || debug) {
if (typeof adblockaction == 'function'){
adblockaction()
}
document.documentElement.classList.add('adblocked');
}
testunit.remove();
}, 400);
})

// adblockaction function that gets called when Adblock is enabled:

function adblockaction(){
var msg = document.getElementById('blockedmessage');
var dismiss = document.getElementById('dismissmsg');
var hideblockedmessage = getCookie('hideblockedmessage');
if (hideblockedmessage && debug === false){ // message shown already (per session cookie)?
msg.style.visibility = 'hidden' // complete dismiss the message
}
else{
msg.classList.add('showmsg');
}
dismiss.addEventListener('click', function(){
msg.classList.remove('showmsg');
setCookie('hideblockedmessage', 'yes');
})
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value){
document.cookie = name+"="+value+"; path=/"
}


})();

</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

 

(*2) : adblock_checker.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

 

 

<body>部の末尾に記述


<body>

===  この間、説明を省略。  ====

<!--webbot bot="HTMLMarkup" startspan -->
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!-- Add the below outside any tag other than the BODY -->
<div id="blockedmessage">
<div>
<h2>AdBlockerが有効になっているようです。</h2>
ご覧のサイトは、無料のコンテンツを制作し提供するための広告のみに依存しています。 Adblockを無効にしていただき、ありがとうございます。

<b id="dismissmsg">却下する(そして戻る)</b>
</div>
</div>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" endspan -->

</body>

 

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。

AdBlockerが有効になっているようです。

ご覧のサイトは、無料のコンテンツを制作し提供するための広告のみに依存しています。 Adblockを無効にしていただき、ありがとうございます。 却下する(そして戻る)