クリックエリアを拡大する【非推奨】

現在ではHTMLのa要素によって同じ動作が可能なので、非推奨としています。特に理由がなければ、a要素のそのままの機能でご利用ください。

a-blog cmsでは、アンカーリンクのクリックエリアを拡大させる機能(biggerlink)の設定が標準で実装されています。(Ver. 1.3.0より)
biggerlinkの詳細ドキュメントは以下のページを参照してください。

デモ

設定について

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

//------------
// 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」にします。

使い方

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;
}