リンク

目次

現在位置に装飾する

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

スムーズスクロール

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

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

飛び先判定

アンカーリンクは「#hoge」のようなリンクになりますが、飛び先になる要素は「id属性」もしくは「name属性」で設定した要素になります。

<section id="hoge"> <!-- id属性で指定 -->

<form name="hoge" method="post"> <!-- name属性で指定 -->

デフォルトの設定

この機能の設定は、/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;
});

デモ

ページの先頭へ

外部リンクを別タブで開く

ページ内の外部リンクに対して自動的に target="_blank" を付与する組み込みJSです。

基本的に、外部サイトのリンクは別タブで開かせたい事が多いかと思いますが、この機能により、Web制作者や更新者が別タブで開く設定を忘れた場合でも、ページ内に存在する外部リンクを自動的に別タブで開くようにすることができます。

設定

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


設定項目 説明 デフォルト
linkOutsideBlankMark ここで指定されたセレクターの要素に対して、target="_blank" を付与します。 'a:not([target]):not([href^="javascript"]):not([href^="tel"])'
linkOutsideAppendAttr target="_blank" をつけた要素に対して付与する rel 属性の値を設定できます。 'noopener noreferrer'