Home

現在のURLと一致するa要素を表示する

Ver. 3.1.0 からこの機能はデフォルト無効になりました。

a-blog cmsは、現在表示しているページでそのページへのリンク（アンカー要素（<a>））が存在したら、そのリンクを外す仕様になっています。現在表示中のページから同じページへのリンクは基本的には必要ないという考え方です。

デフォルトの設定

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

  //---------
  // viewing
  viewingMark: 'a.js-viewing-receptor', // 1.3.0 未満のバージョンからアップデートする場合には 'a' と指定してください。
  viewingId: 'viewing',
  viewingClass: 'viewing',
  viewingEraseMark: 'a.js-viewing-erase', // 'a:not(.js-viewing-indelible)', v3.1: デフォルトでaタグを削除しないように修正
  viewingReplacement: '',
  viewingRemoveAttr: ['href', 'charset', 'type', 'hreflang', 'rel', 'rev', 'target'],
  viewingNonTarget: ['block', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid', 'table', 'table-row', 'list-item'],

機能紹介

現在表示中のページと同じリンクのアンカー要素が外れないようにする（Ver. 3.0以前）

現在表示しているページと同じリンクのアンカー要素（<a>）を消す機能を無効にするには、テンプレートファイルを編集します。リンクを表示したいアンカー要素（<a>）にjs-viewing-indelibleというclass名を記述します。サイトの管理上の支障などがなければ、このclass名はとくに変更する必要はありません。

// viewing
viewingEraseMark    : 'a:not(.js-viewing-indelible)',

現在表示中のページと同じリンクのアンカー要素（<a>）が外れても表示が崩れないようにする

またアンカー要素にスタイルが当たっていた場合、その要素が組み込みJSによって外されることによって表示が崩れることがあります。そういった表示崩れを防止するために.js-viewing-receptorというclassが用意されています。
このクラスをアンカー要素に設定することで、そのアンカーの親要素にデフォルトで.viewingというclassが付与されます。そのクラスに対して任意にCSSを記述して表示崩れを防止できます。

// viewing
viewingMark    : 'a.js-viewing-receptor',

Ver. 2.8.84 をダウンロード

クリックエリアを拡大する

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

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

ollicle.com: Biggerlink – jQuery plugin

デモ

リンク部分

ここは説明文ですが、マウスカーソルを宛てたりすると反応します。リンク先も

設定について

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

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

Ver. 2.9.50 をダウンロード

SSLへの書き換え

世の中に常時SSLのサイトが普及したことから、現在この機能は非推奨としています（2021年11月現在）

※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>