リンクのクリックエリアを拡大させる（biggerlink）

a-blog cmsでは、アンカーリンクのクリックエリアを拡大させる機能（biggerlink）の設定が標準で実装されています。（v1.3.0より）

biggerlinkの詳細ドキュメントは以下のページを参照してください。

ollicle.com: Biggerlink – jQuery plugin

サンプル）グレーの背景色部分にクリックエリアが拡大されている例

---

<div class="js-biggerlink" style="background-color:#ccc;">
<p><a href="#">ここにアンカーリンク</a></p>
<p>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</p>
</div>

---

リンクのクリックエリアを拡大させる（biggerlink）

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    //------------
    // biggerlink
    biggerlinkMark   : '.js-biggerlink',
    biggerlinkConf   : {
//        biggerclass:'bl-bigger',  // class added to the first contained link and others that trigger it
//        hoverclass:'bl-hover',        // class added to parent element on hover/focus
//        hoverclass2:'bl-hover2',  // class added to parent element on hover/focus of other links
//        clickableclass:'bl-hot',  // class added to parent element with behaviour
//        otherstriggermaster: true,    // will all links in containing biggerlink element trigger the first link
//        follow: 'auto'    
    },
    biggerlinkArray : [
    //    {
    //        'mark'  : '',
    //        'conf'  : {}
    //    }
    ],

biggerlinkMark

ここで指定したセレクタがアンカーリンクのクリックエリアになります。

biggerlinkConf

biggerlinkの詳細設定です。 ・biggerclass：biggerlinkMarkで指定した範囲内のアンカーリンクすべてに付与するクラス名。otherstriggermasterがfalseのときには、一番初めのアンカーリンクに付与されます。 ・hoverclass：biggerlinkMarkを指定した要素にhoverした時に付与するクラス名。 ・hoverclass2：otherstriggermasterがfalseのときに、biggerlinkMarkで指定した範囲内で、一番始めのアンカーリンク以外のアンカーリンクにhoverした時に上書きして付与するクラス名。 ・clickableclass：biggerlinkMarkで指定した範囲内に複数のアンカーリンクが含まれているときに付与されるクラス名。（初期クラス名は「bl-hot」） ・otherstriggermaster：biggerlinkMarkで指定した範囲内のアンカーリンクの順番を考慮するかどうかの設定です。trueの時は順番を考慮せず、falseのときは一番始めのアンカーリンクを考慮します。 ・follow：biggerlinkを動作させる前に何かクリックイベントを動作させる場合は「false」にします。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。

例）biggerlinkMarkで「.js-biggerlink」と指定した場合

---

<div class="js-biggerlink">
<p><a href="#">ここにアンカーリンク</a></p>
<p>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</p>
</div>

CSS

必要に応じて、JavaScriptで指定したそれぞれのクラスにスタイルを指定します。

例）

/* biggerlink */
.bl-hover {
	background-color: #F0F0F0;
}

---