カテゴリ位置とエントリ位置の同時強調表示

TOPページ > 210Movable Type > カテゴリ位置とエントリ位置の同時強調表示

カテゴリ位置とエントリ位置の同時強調表示

2007年5月 5日 07:17 | Writer: yoshi | 記事本文 | コメント(0) | トラックバック(0)

カテゴリ位置とエントリ位置の同時強調表示を同時に行う方法。小粋空間さんのサンプルを頼りに、拡張した。こちらのサイト（http://www.apstars.com/mt/、私の所有サイト）に実装している。ワンカラムのセレクトボックスの状態保持スクリプトの開発をやってて、「お？これは？」と派生的に（ついでに）考えついたもの。

注意点として、エントリページではカテゴリリストとエントリリストの両方を強調表示せねばならないが、カテゴリページではカテゴリリストのみの強調表示でよい点。

以下コードをstyles-site.cssに追記する


/* 選択されたカテゴリを保持する */
#category-selected a,
#category-selected a:hover{
    color:#993333;
    background-color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}
/* 選択されたエントリを保持する */
#entry-selected a,
#entry-selected a:hover{
    color:#993333;
    background-color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

カテゴリアーカイブページのサイドバーモジュールのカテゴリリストに以下を追加

カテゴリアーカイブページのカテゴリリスト部分追加前


<li class="categoly"><a href="<$MTCategoryArchiveLink$>" name="category<$MTCategoryID$>" title="<MTCategoryLabel decode_html="1" remove_html="1"> "><MTCategoryLabel decode_html="1" remove_html="1"></a>

カテゴリアーカイブページのカテゴリリスト部分追加後。spanとid属性の追加。


<li class="categoly"><span><a href="<$MTCategoryArchiveLink$>" id="category<$MTCategoryID$>" name="category<$MTCategoryID$>" title="<MTCategoryLabel decode_html="1" remove_html="1"> "><MTCategoryLabel decode_html="1" remove_html="1"></a></span>

カテゴリアーカイブページへ以下スクリプトの追加。


<!-- 現在位置を強調表示 （カテゴリ用） Script-->
<MTEntries lastn="1">
    <MTEntryCategories glue="/">
        <script type="text/javascript">
        var node1 = document.getElementById("category<$MTCategoryID$>");
        node1.parentNode.setAttribute("id","category-selected");
        </script>
    </MTEntryCategories>
</MTEntries>

エントリアーカイブページのサイドバーモジュールのカテゴリ・エントリリストに以下を追加

カテゴリリスト部分追加前


<li class="categoly"><a href="<$MTCategoryArchiveLink$>" name="category<$MTCategoryID$>" title="<MTCategoryLabel decode_html="1" remove_html="1"> "><MTCategoryLabel decode_html="1" remove_html="1"></a>

カテゴリリスト部分追加後。spanとid属性の追加。


<li class="categoly"><span><a href="<$MTCategoryArchiveLink$>" id="category<$MTCategoryID$>" name="category<$MTCategoryID$>" title="<MTCategoryLabel decode_html="1" remove_html="1"> "><MTCategoryLabel decode_html="1" remove_html="1"></a></span>

エントリリスト部分追加前


<li class="entry"><a href="<$MTEntryPermalink$>" name="entry<$MTEntryID$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>

エントリリスト部分追加後。spanとid属性の追加。


<li class="entry"><span><a href="<$MTEntryPermalink$>" id="entry<$MTEntryID$>" name="entry<$MTEntryID$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></span></li>

エントリアーカイブページへ以下スクリプトの追加。


<!-- 現在位置を強調表示 （カテゴリ用） Script-->
<MTEntryCategories glue="/">
    <script type="text/javascript">
    var node1 = document.getElementById("category<$MTCategoryID$>");
    node1.parentNode.setAttribute("id","category-selected");
    </script>
</MTEntryCategories>

<!-- 現在位置を強調表示 （エントリ用） Script-->
<script type="text/javascript">
var node2 = document.getElementById("entry<$MTEntryID$>");
node2.parentNode.setAttribute("id","entry-selected");
</script>