CDPのメニュー項目を非アンカーにする

up:

メニュー項目の一部のリンクを外す

CDPを利用してサイトを運営している最中、なにかの理由でメニューの一部の項目を、完全に削除したいわけではなく一時的にリンクをきりたい(項目そのものを削除したいときは「CDPの○○がいらないから消したい」を参照)場合や、現在表示しているページへのリンクはしたくないということがあります。

一部の項目のアンカーをとりやめたサンプル
<ul>
  <li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
  <li id="MENU02">メインページ</li>
  <li id="MENU03"><a href="diary.html">日記</a></li>
  <li id="MENU04"><a href="link.html">リンクページ</a></li>
</ul>

普通にいけば、項目名の前後の<a href=""></a>を消せば完了です。

しかし、一部のテンプレートでは、<a>にも重要な装飾が施されているために不格好になる場合があります。

見栄えを揃える

少し姑息な手段かもしれませんが、<a>以外の適当なマークアップを新たに付け加え、それに<a>と同じCSSを当てる方法でデザインの差異を埋めます。

html指定例
<ul>
 <li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
 <li id="MENU02"><Element title="リンクをきってる理由">メインページ</Element></li>
 <li id="MENU03"><a href="diary.html">日記</a></li>
 <li id="MENU04"><a href="link.html">リンクページ</a></li>
</ul>
css指定例
#MENU li Element,
#MENU li a
{
#MENU li.menu-on Element,
#MENU li.menu-on a
{

Elementには削除理由等から考えて一番適したタグ名を適宜当てはめます。以下は例です。

同一ページだからという理由でリンクを外す

em
今表示しているページと同じ項目だという強調表現と考えるなら
span
これといって意味をもたせる必要がないと考えるなら
b
HTML4では非推奨要素とされていますが、HTML5で復活し、ちょっとした実用目的で目立たせたい部分を表します
a
HTML5では、href属性がないahref属性が合ったならリンクが置かれていたであろうプレースホルダーの意味を持ちます

(一時的な)削除という理由でリンクを外す

del
その項目を抹消したことを表します(一時的にという場合は適切ではないかも)
em
その項目は削除されているのだという主張を一種の強調表現と考えるなら
span
これといって意味をもたせる必要がないと考えるなら
s
HTML4では非推奨要素とされていますが、HTML5で復活し「もう正確ではない・関連性がないコンテンツを表します
a
HTML5では、href属性がないahref属性が合ったならリンクが置かれていたであろうプレースホルダーの意味を持ちます(ex.今は工事中のコンテンツだけど今後リンクする予定があるから暫定的に配置する)