a-blog cmsでは、ページ内のリンクに「現在のページと同一のURL」があると、自動的にa要素を除去するサポート機能があります。

現在表示中のページから同じページへのリンクは必要ない。という考え方です。
現在表示中のページと同じリンクのアンカー要素(<a>)を表示する | 組み込みJS | リファレンス | a-blog cms 制作者向け情報

という名目なのですが、主要なナビゲーションのように、a要素に対してボタン風に表示するようCSSを定義していると、当然ながらここだけ見た目が変わってしまいます。

先にコーディングしてからCMSに組み込む流れで進めていると、ここで意外とCSSの修正に時間を取られてしまったりします。

開発側にはちょっと申し訳ないですが、この機能そのものを回避する方法をまとめます。

JavaScriptの自動除去を止める

基本的なa要素の除去は、a-blog cms組み込みのJavaScrptが行っています。

この処理は、「js-viewing-indelible」クラスを付けたa要素には適用されません。 モジュールやナビゲーションのタグを書くときに、以下のようにしてください。

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

ページネーションのHTMLレベルでの除去を回避する

ところが、Entry_Bodyモジュールなどに使われている「ページネーション(pager)」では、前項の方法では回避できません。 ここだけは、HTMLレベルでa要素を非表示にしてしまうためです。

ページネーション内のブロックタグの位置を、微妙にいじることで回避します。

修正前

a-blog cmsの標準スニペットでの、ページネーションの数字部分(page:loop内)は、以下のようになっています。

<!-- BEGIN page:loop --><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue -->, <!-- END glue --><!-- END page:loop -->

修正後

a要素の自動除去を回避したい場合は、以下の通り 「BEGIN link#front」が変数「{url}」だけを囲むように修正し、念のため、JSでの除去を回避するクラスも付けてください。

<!-- BEGIN page:loop --><a href="<!-- BEGIN link#front -->{url}<!-- END link#front -->" class="js-viewing-indelible">{page}<!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue -->, <!-- END glue --><!-- END page:loop -->

関連情報