現在位置によって異なるクラスを付与する（link match location）

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

サンプル）

---

• http://www.a-blogcms.jp/support/manual/
• http://www.a-blogcms.jp/
• http://www.appleple.com/

「js-link_match_location」というクラスでlink match locationが適用され、「stay」というクラスが付与されたソースコード

<ul>
	<li class="js-link_match_location stay"><a href="http://www.a-blogcms.jp/support/manual/">http://www.a-blogcms.jp/support/manual/</a></li>
	<li class="js-link_match_location stay"><a href="http://www.a-blogcms.jp/">http://www.a-blogcms.jp/</a></li>
	<li class="js-link_match_location"><a href="http://www.appleple.com/">http://www.appleple.com/</a></li>
</ul>

---

現在位置によって異なるクラスを付与する（link match location）

1. 設定の編集

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

    //---------------------
    // 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',
    linkMatchLocationClass          : 'stay',
    linkMatchLocationFullClass      : 'stay',
    linkMatchLocationBlogClass      : 'stay',
    linkMatchLocationCategoryClass  : 'stay',
    linkMatchLocationEntryClass     : 'stay',
    linkMatchLocationArray  : [{
//        'mark'  : '.js-link_match_location-original',
//        'type'  : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
//        'class' : 'current'
    }],

---

linkMatchLocationMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/ で 以下のページへのアンカーリンクに「linkMatchLocationMark」を指定した場合 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（ドメインが異なる場合） 「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」を指定した場合 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（ドメインが異なる場合） 「linkMatchLocationFullClass」が適用されるのは以下のアンカーリンクとなります。 http://www.example.com/blog/category/entry-1.html
linkMatchLocationBlogMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationBlogClass」で指定したクラスを追加で付与します。 例）現在表示中のページが http://www.example.com/blog/category/entry-1.html で 以下のページへのアンカーリンクに「linkMatchLocationBlogMark」を指定した場合 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（ドメインが異なる場合） 「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」を指定した場合 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（ドメインが異なる場合） 「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」を指定した場合 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（ドメインが異なる場合） 「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	配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

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 -->
</ul>
<!-- 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;
}

---