グローバルナビゲーションに年ごとのコンパクトな月別アーカイブを設置

縦に長い月別アーカイブではなく、年ごとに月別アーカイブがまとめられている省スペースな月別アーカイブを設置する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. ブログ運営が長くなると月別アーカイブも長くなるので、省スペース化を図ります。

  2. カーソルをホバーするとすべての月別アーカイブが表示されます。

  3. JavaScriptが無効の場合、省スペースではなく通常の月別アーカイブが表示されます。

メリット

  1. 長寿ブログでも、省スペースで月別アーカイブをすべて表示できます。

テンプレートのHTMLを編集

  1. valid-seo-3c (ver1.2.0) のデフォルト状態からのカスタム方法を述べます。

  2. グローバルナビゲーションの右から2番めの項目(RSS)をカスタムする場合で例示します。

    121127compact-monthly-archive-1.png
  3. 次のコードを探します。下図で反転している部分です。

    <!-- ▼右から2番目(1段目のみ) 開始 -->
    <li><a href="<%url>?xml" title="RSSフィード:最新記事の更新が分かります">RSS</a></li>
    <!-- ▲右から2番目 終了 -->
    121127compact-monthly-archive-2.png
  4. 次のコードに変更します。変更後は下図のとおりです。

    <!-- ▼コンパクト月別アーカイブ 開始 -->
    <li><a>月別アーカイブ<span class="small">▼</span></a>
    <ul>
    <li>
    <div id="compact-monthly-archive">
    <noscript><ul>
    <!--archive-->
    <li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月記事一覧 | <%blog_name>"><%archive_year>年<%archive_month>月<span class="archive-count"> (<%archive_count>)</span></a></li>
    <!--/archive-->
    </ul></noscript>
    </div>
    <script type="text/javascript"><!--
    var ay=0;//archive year
    var al='<dl>';//archive list
    <!--archive-->
    if(ay!=<%archive_year>){
    if(al!='<dl>'){al+='</dd>';}
    al+='<dt><%archive_year>年</dt><dd>';
    ay=<%archive_year>;
    }
    al+='<a href="<%archive_link>" title="<%archive_year>年<%archive_month>月 | <%blog_name>"><%archive_month></a>&ensp;';
    <!--/archive-->
    al+='</dd></dl>';
    document.getElementById("compact-monthly-archive").innerHTML=al;
    //-->
    </script>
    </li>
    </ul>
    </li>
    <!-- ▲コンパクト月別アーカイブ 終了 -->
    121127compact-monthly-archive-3.png

テンプレートのCSSを編集

  1. CSS編集で、/*記事*/の上あたりに次のコードを追加します。追加すると、下図で反転して示しているようになります。

    #compact-monthly-archive dl a{display:inline;padding:0;}
    #compact-monthly-archive dt{margin-left:10px;}
    #compact-monthly-archive dd{margin-left:20px;}
    
    121127compact-monthly-archive-4.png

デモページ

  1. デモページです。下図で赤の点線で示している部分がカスタムした部分です。

    121127compact-monthly-archive-5.png
  2. 補足1:デモページ内グローバルナビゲーションの他の部分も比較用にカスタムしておきました。標準の月別アーカイブと省スペース月別アーカイブを並べています。

  3. 補足2:当サイトは2012年1月以降の記事しかありませんが、デモ表示用に2011年と2010年の記事へのリンクを表示させています。

今後のテンプレート改訂時には

  1. テンプレートの改訂時にこのページで述べたカスタムをデフォルトで採用するかもしれません。customtemplateはver1.3.1以降、valid-seoシリーズはver1.2.1以降が対象です。

以上です。

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