公式プラグイン「月別アーカイブ」で現在表示中の年月をハイライト

公式プラグイン「月別アーカイブ」をコピペでカスタムし、現在表示されている年月をハイライトする方法です。当サイト作者が作成した次のテンプレートについてです。

カスタム前後の比較

  1. コピペでOKです。

  2. 仕上がりはこんな感じです。2013年3月を表示している場合です。

    130318plugin-date-1.png

メリット

  1. 現在表示されている年月の背景色がハイライトされ、読者のユーザビリティ向上を期待できます。

プラグインのHTMLを編集

  1. 管理画面でプラグインの設定をクリックします。

    130303plugin-recent-1.png
  2. 切り替わった画面にある【HTMLの編集】をクリックします。

    130318plugin-date-2.png
  3. テキストボックスが展開され、次のコードが表示されます。

    <ul>
      <!--archive-->
      <li &align>
        <a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
      </li>
      <!--/archive-->
    </ul>
    130318plugin-date-3.png
  4. 次のコードに変更します。下図で反転している部分が変更後です。

    <ul class="tell-this-page">
    <!--archive-->
    <li &align>
    <a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
    </li>
    <!--/archive-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-112.html-->
    </ul>
    130318plugin-date-4.png
  5.  設定 をクリックします。

テンプレートのHTMLを編集

  1. eyecatcherシリーズではこの編集は不要です。customtemplate と customtemplate-3c の ver1.5.2 以降ではこの編集を不要にしておきます。

  2. 次のコードを探します。下図で反転している部分です。

    <!-- ▼▼▼ ナビゲーション部分背景色定義の一部 開始 ▼▼▼ -->
    (長いので省略)
    <!-- ▲▲▲ ナビゲーション部分背景色定義の一部 終了 ▲▲▲ -->
    130318plugin-date-5.png
  3. 次のコードに変更します。

    <!-- ▼▼▼ ナビゲーション部分背景色定義の一部 開始 ▼▼▼ -->
    <!--tag_area--><!--not_tag_area--><!--
    ※
    ※ ナビゲーション部分での、現在のページへのリンクの背景色を変えられます。
    ※ デフォルト設定では、HOME・サイトマップ・blog-entry-数字・blog-category-数字に対応しています。
    ※ たとえば、現在blog-entry-1.htmlを表示している場合、
    ※ ナビゲーション内にblog-entry-1.htmlへのリンクがあれば、
    ※ その背景色が変わるのでそのページへのリンクであるのが分かりやすいです(ie6非対応)。
    ※ この機能が不要なら、この「ナビゲーション部分背景色定義の一部」をすべて削除します。
    ※ テンプレートの配色によってはカスタムもしくは消去する方が見栄えがよいかもしれません。
    ※ http://customtemplate.blog112.fc2.com/blog-entry-87.html
    ※
    --><!--/not_tag_area--><!--/tag_area-->
    <style type="text/css">
    <!--index_area-->#home #nav-home<!--/index_area-->
    <!--titlelist_area-->#sitemap #nav-sitemap<!--/titlelist_area-->
    <!--permanent_area-->#single .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single .tell-this-page a[href="blog-entry-<%pno>.html"]<!--/permanent_area-->
    <!--category_area-->#category .tell-this-page a[href="<%url>blog-category-<%cno>.html"],#category .tell-this-page a[href="blog-category-<%cno>.html"]<!--/category_area-->
    <!--tag_area-->#tag .tell-this-page .tag-<%tag_word><!--/tag_area-->
    <!--date_area-->#date .tell-this-page a[href="<%url>blog-date-<%now_year><%now_month>.html"],#date .tell-this-page a[href="blog-date-<%now_year><%now_month>.html"]<!--/date_area-->
    <!--not_search_area-->{background:#cff;}<!--/not_search_area-->
    
    <!--index_area-->#home.gray #nav-home<!--/index_area-->
    <!--titlelist_area-->#sitemap.gray #nav-sitemap<!--/titlelist_area-->
    <!--permanent_area-->#single.gray .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single.gray .tell-this-page a[href="blog-entry-<%pno>.html"]<!--/permanent_area-->
    <!--category_area-->#category.gray .tell-this-page a[href="<%url>blog-category-<%cno>.html"],#category.gray .tell-this-page a[href="blog-category-<%cno>.html"]<!--/category_area-->
    <!--tag_area-->#tag.gray .tell-this-page .tag-<%tag_word><!--/tag_area-->
    <!--date_area-->#date.gray .tell-this-page a[href="<%url>blog-date-<%now_year><%now_month>.html"],#date.gray .tell-this-page a[href="blog-date-<%now_year><%now_month>.html"]<!--/date_area-->
    <!--not_search_area-->{background:#333;}<!--/not_search_area-->
    
    <!--permanent_area-->#single.gray #tbox .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single.gray #tbox .tell-this-page a[href="blog-entry-<%pno>.html"],#single.gray .plugins .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single.gray .plugins .tell-this-page a[href="blog-entry-<%pno>.html"]<!--/permanent_area-->
    <!--category_area-->#category.gray .plugins .tell-this-page a[href="<%url>blog-category-<%cno>.html"],#category.gray .plugins .tell-this-page a[href="blog-category-<%cno>.html"]<!--/category_area-->
    <!--tag_area-->#tag.gray .entry .tell-this-page .tag-<%tag_word>,#tag.gray .plugins .tell-this-page .tag-<%tag_word><!--/tag_area-->
    <!--date_area-->#date.gray .plugins .tell-this-page a[href="<%url>blog-date-<%now_year><%now_month>.html"],#date.gray .plugins .tell-this-page a[href="blog-date-<%now_year><%now_month>.html"]<!--/date_area-->
    <!--not_index_area--><!--not_search_area--><!--not_titlelist_area-->{background:#ddd;border-radius:5px;}<!--/not_titlelist_area--><!--/not_search_area--><!--/not_index_area-->
    
    <!--category_area-->#category .tell-this-page a[href="<%url>blog-category-<%cno>.html"]<!--/category_area-->
    <!--tag_area-->#tag .plugins .tell-this-page .tag-<%tag_word><!--/tag_area-->
    <!--date_area-->#date .tell-this-page a[href="<%url>blog-date-<%now_year><%now_month>.html"]<!--/date_area-->
    <!--not_index_area--><!--not_permanent_area--><!--not_search_area--><!--not_titlelist_area-->{border-radius:5px;}<!--/not_titlelist_area--><!--/not_search_area--><!--/not_permanent_area--><!--/not_index_area-->
    
    </style>
    <!-- ▲▲▲ ナビゲーション部分背景色定義の一部 終了 ▲▲▲ -->
  4.  設定 をクリックで完了です。なお、グローバルナビゲーション内の月別アーカイブリストでもハイライト可能になります。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)