リンク

目次

現在位置に装飾する

a-blog cmsでは、現在表示しているページの場所によって異なるクラスを付与する設定が標準で実装されています。(Ver. 1.3.0より)

デモ

linkMatchLocationMark

linkMatchLocationCategoryMark

デフォルトの設定

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

//---------------------
// link match location
linkMatchLocationMark          : '.js-link_match_location',
linkMatchLocationFullMark      : '.js-link_match_location-full',
linkMatchLocationBlogMark      : '.js-link_match_location-blog',
linkMatchLocationCategoryMark  : '.js-link_match_location-category',
linkMatchLocationEntryMark     : '.js-link_match_location-entry',
linkMatchLocationContainMark   : '.js-link_match_location-contain',
linkMatchLocationClass         : 'stay',
linkMatchLocationFullClass     : 'stay',
linkMatchLocationBlogClass     : 'stay',
linkMatchLocationCategoryClass : 'stay',
linkMatchLocationEntryClass    : 'stay',
linkMatchLocationContainClass  : 'stay',
linkMatchLocationArray: [{
  //        'mark'  : '.js-link_match_location-original',
  //        'type'  : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
  //        'class' : 'current'
}],

下記のリンク先URLのうち、指定方法による違いを説明します。

  • http://www.example.com/
  • http://www.example.com/blog/
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
  • http://www.example.com/blog/category/sub-category/entry-1.html
  • http://www.example.com/childblog/category/entry-1.html(子ブログの場合)
  • http://www2.example.com/blog/category/entry-1.html(ドメインが異なる場合)


linkMatchLocationMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/ の時、以下のページへのアンカーリンクに「linkMatchLocationMark」を指定した場合
「linkMatchLocationClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationFullMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLとリンク先が“完全に”同じ場合に、「linkMatchLocationFullClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationFullMark」を指定した場合
「linkMatchLocationFullClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/entry-1.html
linkMatchLocationBlogMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationBlogClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationBlogMark」を指定した場合
「linkMatchLocationBlogClass」適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationCategoryMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationCategoryClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/sub-category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationCategoryMark」を指定した場合
「linkMatchLocationCategoryClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/sub-category/entry-1.html
現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、適用されるのは以下のアンカーリンクです。
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationEntryMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているエントリーのURLとリンク先が同じ場合に、「linkMatchLocationEntryClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationEntryMark」を指定した場合
「linkMatchLocationEntryClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationClass 現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationFullClass 現在表示しているページのURLとリンク先が“完全に”同じ場合に付与するクラス名
linkMatchLocationBlogClass 現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationCategoryClass 現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationEntryClass 現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.linkMatchLocationMark          = '.js-link_match_location';
  ACMS.Config.linkMatchLocationFullMark      = '.js-link_match_location-full';
  ACMS.Config.linkMatchLocationBlogMark      = '.js-link_match_location-blog';
  ACMS.Config.linkMatchLocationCategoryMark  = '.js-link_match_location-category';
  ACMS.Config.linkMatchLocationEntryMark     = '.js-link_match_location-entry';
  ACMS.Config.linkMatchLocationContainMark   = '.js-link_match_location-contain';
  ACMS.Config.linkMatchLocationClass         = 'stay';
  ACMS.Config.linkMatchLocationFullClass     = 'stay';
  ACMS.Config.linkMatchLocationBlogClass     = 'stay';
  ACMS.Config.linkMatchLocationCategoryClass = 'stay';
  ACMS.Config.linkMatchLocationEntryClass    = 'stay';
  ACMS.Config.linkMatchLocationContainClass  = 'stay';
  ACMS.Config.linkMatchLocationArray =  [{
  //        'mark'  : '.js-link_match_location-original',
  //        'type'  : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
  //        'class' : 'current'
  }],
});

使い方

HTML

指定したクラスをHTMLに記述します。
例)linkMatchLocationMarkで .js-link_match_location と指定した場合

<!-- BEGIN_MODULE Entry_List -->
<ul>
  <!-- BEGIN entry:loop -->
  <li class="js-link_match_location"><a href="{url}"><span class="date">{date#Y}年{date#m}月{date#d}日</span>{title}</a></li>
  <!-- END entry:loop -->
</u>
<!-- END_MODULE Entry_List -->

CSS

必要に応じてスタイルを指定します。

例)

ul li.stay a:link,
ul li.stay a:active,
ul li.stay a:visited {
  background:url("../images/icn_arrow01.png") no-repeat scroll 10px 12px #CCCCCC;
  color:#FFFFFF;
  display:block;
  padding:10px 10px 10px 33px;
  width:155px;
}

スムーズスクロール

a-blog cmsでは、ページ内をスムーズにスクロールできる設定が標準で実装されています。(Ver. 1.2.1より)
通常のHTMLのアンカーリンクでのページ内移動では瞬間的に移動しますが、この設定をおこなうとスクロールのスピードを徐々に変化させることができるため、ページ内のどこに移動したのか閲覧者が認識しやすくなります。

例えば、Webページの上部に移動させる「ページの先頭へ戻る」というアンカーリンクや、ページ内の任意の項目に移動させるアンカーリンクで使用できます。※ページ内の任意の項目に移動させるのはVer. 1.5.x以上からになります。

デフォルトの設定

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

scrollToMark: 'a.scrollTo', 
scrollToI: 40,
scrollToV: 0.5,


scrollToMark セレクタのアンカーをクリックするとhref属性のフラグに指定された要素へスクロールします。
scrollToI 間隔(i)msec
scrollToV 0 < 移動量(v) < 1

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.scrollToMark    = 'a.js-scrollTo';
  ACMS.Config.scrollToI       = 40;
  ACMS.Config.scrollToV       = 0.5;
});

デモ

ページの先頭へ

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

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

デフォルトの設定

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

viewingMark: 'a.js-viewing-receptor', // 1.3.0 未満のバージョンからアップデートする場合には 'a' と指定してください。
viewingId: 'viewing',
viewingClass: 'viewing',
viewingEraseMark: 'a:not(.js-viewing-indelible)', // display:blockの要素は取り除かれません
viewingReplacement: '',
viewingRemoveAttr: ['href', 'charset', 'type', 'hreflang', 'rel', 'rev', 'target'],
viewingNonTarget: ['block', 'inline-block', 'flex', 'grid', 'table'],

機能紹介

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

現在表示しているページと同じリンクのアンカー要素(<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',

使い方

テンプレート内でアンカー要素(<a>)を表示したい部分を編集する

リンクを表示したいアンカー要素(<a>)に、config.jsで設定しているclass名を記述します。

例)テンプレートに記述するソース(viewingを無効にする場合)

<a href="{url}" class="js-viewing-indelible">{name}</a>

これで現在のページと同じリンクの記述も、アンカー要素(<a>)が表示されるようになります。

テンプレートの記述変更をせずに、全てのアンカー要素(<a>)を表示する

上記のclassを記述せずに現在のページと同じリンクを表示したい場合は、config.js 内の以下の部分を削除またはコメントアウトします。この場合、全てのアンカー要素(<a>)が対象になります。

// viewing
viewingMark         : 'a.js-viewing-receptor', // 1.3.0 未満のバージョンからアップデートする場合には 'a' と指定してください。
viewingId           : 'viewing',
viewingClass        : 'viewing',
viewingEraseMark    : 'a:not(.js-viewing-indelible)', // dispaly:blockの要素は取り除かれません

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

現在では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;
}

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>