Follow @papepo100
    

選択されたタグが太字強調されるタグリスト

ブログパーツ
0 0 2016/12/03
taglist.png コチラを参考に選択されたタグを太字強調するタグリストを作成しました。
JQueryが必要になるケースが今までなかったので今回初めて使用してみました。

まずはテンプレートの<head>~</head>内に以下を追加します。(jquery.min.jsの追加は適宜行います。)
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    var url = window.location.toString();
    if (url.lastIndexOf('&page=') > 0) {
        url = url.substring(0, url.lastIndexOf('&page='))
    }
    $('.taglist a[href="' + url + '"]').addClass('active');
});
</script>
※$(function(){処理});は「ページが読み込み完了し、DOMの構築が完了した時点で処理を行うJQuery関数」です。ほとんどのJQueryはページの読み込みが終わってからでないと利用できないので、JQueryで処理を行う場合は必ずこの関数内に記述すると考えておいてよいと思われます。

次にテンプレートのタグリストを表示したい箇所に以下を追加します。
<span class="taglist">
<!--tag_list--><a href="<%url>?tag=<%topentry_tag_list_parsename>" align="left" title="「<%topentry_tag_list_name>」をタグに指定した記事を検索"><%topentry_tag_list_name> </a><!--/tag_list-->
</span>

最後に以下をCSSに追加すれば終わりです。
.taglist {
    margin:0 0 0 10px;
}

.active {
    font-weight:bold;
}
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント