https://github.com/maechabin/jquery-overlayad-js
バナー広告をページの下部または上部に「固定（オーバーレイ）表示」させるためのjQueryプラグイン
https://github.com/maechabin/jquery-overlayad-js
Last synced: 8 months ago
JSON representation
バナー広告をページの下部または上部に「固定（オーバーレイ）表示」させるためのjQueryプラグイン
- Host: GitHub
- URL: https://github.com/maechabin/jquery-overlayad-js
- Owner: maechabin
- Created: 2016-04-17T06:30:19.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-28T10:54:25.000Z (about 10 years ago)
- Last Synced: 2025-09-09T01:56:10.635Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jquery-overlayad-js
バナー広告をページの下部または上部に`「固定（オーバーレイ）表示」`させるためのjQueryプラグイン。
## About
オーバーレイ表示とは、ページの上部または下部にバナー広告を固定して表示させるスタイルです。画面をスクロールしても常に表示され続けるため、クリック率が高くなります。`300×50`や`320×50`のバナーを使って実装するのが一般的です。当プラグインを使うとバナー広告のオーバーレイ表示を手軽に実装することができます。
また当プラグインでは、スマホでの表示を想定して画面サイズよりもバナーサイズが大きい場合や小さい場合の表示補助機能を用意しています。画面サイズがバナーサイズよりも大きかった場合に生じる余計なスペースの`クリック領域化`、画面サイズがバナーサイズよりも小さかった場合の`リキッド表示`、`トリミング表示`に対応しています。
主にアフィリエイトサービスの広告を使用することを想定しているので、アフィリエイトサービスからそのまま広告をコピーして実装できるようになっています。
## Demo
[http://support.moba8.net/tools/overlayad/demo.html](http://support.moba8.net/tools/overlayad/demo.html)
## Download
こちらのページから[ダウンロード](https://github.com/maechabin/jquery-overlayad-js/archive/master.zip)するか、`[git clone]`コマンドでローカルにコピーします。
```
$ git clone git@github.com:maechabin/jquery-overlayad-js.git 任意のディレクトリ名
```
npm経由でも入手可能です。
```
$ npm install --save overlayad
```
機能の実装に使用するファイルは以下のjsファイルとなります。
- ./dist/jquery.overlayad.js
## Usage
### 1. jQueryと当プラグインの読み込み
jQuery本体とdistディレクトリ内の「jquery.overlayad.js」をページに読み込みます。
```html
```
### 2. オーバーレイ広告を表示させる要素を準備
htmlファイル内にオーバーレイ広告を表示させる要素を作成し、任意のclass名またはid名を付けます。
```html
```
作成した要素に対して、以下のスタイルを指定します。（ページ表示時に、設定した広告の画像が表示されるのを防ぐためです。）
```css
.overlay-images {
display: none;
}
```
### 3. スライドショーさせる広告を設定
上記で作成した要素内にスライドショーさせる広告タグ（リンク, 画像[, インプレッション計測用画像]）を順に貼り付けます。貼り付けた順番にスライドショーが実行されます。貼り付ける広告の数に制限はありません。（貼り付ける広告の画像はできるだけ同じサイズのものとすることを推奨します）
```html
```
設定する広告タグは以下の形式（`img要素`を持った`a要素`）となります。a要素には必ずhref属性、img要素にはwidth属性、height属性を設定するようにしてください（width属性、height属性がないと画像の表示サイズに不具合が生じる場合があります）。インプレッションを計測するためのimg要素はあってもなくても問題ありません。（多くのアフィリエイトサービスの広告タグは以下の形式となっていることが多いです）
```html
```
### 4. プラグインを実行
ステップ2で作成した要素に対して、`.overlayAd()`メソッドを実行します。
```javascript
$('.overlay-images').overlayAd();
```
## Options
**position {String}**
オーバーレイ表示させる際の固定箇所を指定します。ページ上部に固定させる場合は`top`、ページ下部に固定させる場合は`bottom`を指定します。デフォルト値は`bottom`。
**mobileStyle {String}**
ページを狭めた際に、ページの横幅のサイズが表示している広告の画像よりも小さくなった場合の画像の表示スタイルを指定します。ページサイズに合わせて画像を縮小させる（アスペクト比は維持されます）場合は'responsive'、ページ中央のポジションを保ったままトリミングさせる場合は`trimming`を指定します。デフォルト値は`responsive`。
**targetBlank {Boolean}**
リンク先を別ウィンドウで表示するかしないか指定します。trueにするとリンク先を別ウィンドウで表示します。デフォルト値は`false`。
**backgroundStyle {Boolean}**
ページの横幅のサイズが、表示している広告の画像サイズよりも大きい場合、画像の両脇に余計なスペースが生じます。こちらのオプションの値を`true`の場合、画像の両脇の余計なスペースを背景色で埋め、クリック可能な領域に変更します。デフォルト値は`true`。
**backgroundColor {String}**
上記のbackgroundStyleを`ture`に設定した場合に設定される背景色を指定します。CSSでbackground-colorに指定できる値で指定します。デフォルト値は`rgba(1,1,1 ,1)`。
オプションの指定方法は以下の通りです。overlayAd()メソッドの引数にオブジェクトリテラル形式でオプションを指定します。
```javascript
// ページ上部に固定し、ページを狭めるとトリミング表示、
// リンク先は別ウィンドウで表示、背景なし（余白あり）
$('.overlay-images').overlayAd({
'position': 'top',
'mobileStyle': 'trimming',
'targetBlank': true,
'backgroundStyle': false,
'backgroundColor': 'none'
});
```
## License
Mit License