クリックエリアを拡大する
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の詳細設定です。
|
使い方
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;
}
SSLへの書き換え
※Ver. 2.11.38 でデフォルトではこの機能はオフになりました。
a-blog cmsでは、httpとhttpsのリンクを自動で書き換える機能が実装されています。（Ver.1.4.0より利用可能）
概要
お問い合わせフォームなどを設置していて一部httpsで運用したいページがある場合に、相対パスでリンクしているナビゲーションのリンク先を任意にhttpからhttpsまたはhttpsからhttpへ自動で変換する機能です。
動作しない条件
- config.server.phpのFULLTIME_SSL_ENABLEが"1"の場合（※すべてがSSL/TLSリンクになるため機能が無効になります）。
- 相対パスではなく、絶対パスで指定している場合
- linkHttpsNoRewriteMarkに設定したセレクター（デフォルトでは
.js-link_no_rewrite）が指定されている場合
設定について
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。
詳しくは「組み込みJSについて：設定を編集する」を参照してください。
config.jsの記述
//------------------------------
// link https disabler, enabler
// 暗号化を利用したhttps通信時に通常のリンクがhttps://になってしまうものをhttp://に書き換えます。
linkHttpsDisablerMark: 'off', // 'a:not([rel*="https"]),a:not([data-rel*="https"])',
// a:not([rel*="https"]) というセレクタが設定されている場合はrel属性に"https"と指定されているリンクは書き換えを行わずにhttps://のままになります。
linkHttpsEnablerMark: 'off', // 'a[rel*="https"],a[data-rel*="https"]',
// 通常のhttp通信時にセレクタに該当するアンカーをhttps://から始まるURLに書き換えます。
linkHttpsNoRewriteMark: '.js-link_no_rewrite',
それぞれの機能の解説
| linkHttpsDisablerMark : 'a:not([rel*="https"]),a:not([data-rel*="https"])' | https から始まるURのページを開き、ページ内で使用されているa要素のrel属性またはdata-rel属性ににhttpsという文字列が含まれていない場合、そのリンクはhttpから始まるリンクとなります |
|---|---|
| linkHttpsEnablerMark : 'a[rel*="https"],a[data-rel*="https"]a[rel*="https"]' | httpから始まるURのページを開き、ページ内で使用されているa要素のrel属性またはdata-rel属性にhttpsという文字列が含まれている場合、そのリンクはhttpsから始まるリンクとなります。 |
| linkHttpsNoRewriteMark : '.js-link_no_rewrite' | このセレクターがついた要素はURLの書き換えをおこないません。 |
使い方
JavaScript
Ver. 2.11.38でデフォルトはオフになったため、ご利用いただくためにはconfig.jsの内容をテンプレートから上書きする必要があります。
<script>
ACMS.Ready(function() {
ACMS.Config.linkHttpsDisablerMark = 'a:not([rel*="https"]),a:not([data-rel*="https"])';
ACMS.Config.linkHttpsEnablerMark = 'a[rel*="https"],a[data-rel*="https"]';
ACMS.Config.linkHttpsNoRewriteMark = '.js-link_no_rewrite';
});
</script>
HTML
<a href="/contact/" rel="https">お問い合わせフォームへ</a>