グローバルナビゲーションに最新記事,新着コメント,カテゴリ,月別記事を表示

コピペでグローバルナビゲーションに最新記事一覧、新着コメント一覧、親子カテゴリ一覧、全タグ一覧、月別記事一覧を表示する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. コピペでグローバルナビゲーションをカスタムする方法です。

  2. 一度カスタムすると、記事を投稿したり新着コメントが投稿されるとグローバルナビゲーション内の項目も自動で更新されます。

  3. 展開される項目を一つ一つカスタムする場合は、次の記事が参考になります。

メリット

  1. 記事をよく投稿したりコメントが多数つくブログであれば、読者がそれらを確認しやすくなります。

  2. グローバルナビゲーションに特に入れたい項目がない場合、とりあえずで最新記事一覧などを入れておくのもいいかもしれません。

テンプレートのHTMLを編集

はじめに

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

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

    valid-seo-3c-112-nav-recent-etc-2.png
  3. HTML編集で次のコードを見つけます。下図で反転している部分です。このコードのことをこのページでは、「左から2番めのコード」と呼称します。

    <!-- ▼左から2番目 開始 -->
    <li>
    <a href="<%url>blog-entry-1.html">マウスオーバー <span class="small">&#9660;</span></a>
    <!--tag_area--><!--not_tag_area--><!--
    ※ マウスオーバーで2段目まで展開されるサンプルです
    ※ 3行上にある「&#9660;」は、下向き黒ぬり三角(▼)を表示するための「文字実体参照」です。
    ※ マウスオーバーで下に何かでるかも、という暗黙的な目印です。
    ※ 同様に、後ででてくる「&#9658;」は右向き黒ぬり三角です。
    --><!--/not_tag_area--><!--/tag_area-->
    <!-- 2段目開始 -->
    <ul>
    <li><a href="/">2-1(2段目)</a>
    </li>
    <li><a href="/">2-2</a>
    </li>
    <li><a href="/">2-3</a>
    </li>
    </ul><!-- 2段目終了 -->
    </li>
    <!-- ▲左から2番目 終了 -->
    valid-seo-3c-112-nav-recent-etc-1.png
  4. 上記コードを、以下に載せているそれぞれのコードへとコピペで変更します。

新着記事一覧

  1. デフォルト状態から、新着記事一覧が表示されるようにします。次のコードを下図で示しているようにコピペし、更新します。

    <!-- ▼最新記事 開始 -->
    <li id="nav-recent"><a href="<%url>" title="<%blog_name>">最新記事<span class="small">&#9660;</span></a>
    <ul>
    <!--recent-->
    <li>
    <a href="<%recent_link>" title="<%recent_title> | <%blog_name>"><%recent_title></a>
    <ul>
    <li class="recent-summary">
    <dl class="recent-meta">
    <dt>公開</dt><dd><%recent_year>年<%recent_month>月<%recent_day>日(<%recent_wayoubi>)</dd>
    </dl>
    <p class="recent-opening"><%recent_body></p>
    </li>
    </ul>
    </li>
    <!--/recent-->
    </ul>
    </li>
    <!-- ▲最新記事 終了 -->
    
    valid-seo-3c-112-nav-recent-etc-3.png
  2. グローバルナビゲーション1段目は下図で赤の点線で示したとおり変更されます。ホバーすると2段目に最新記事一覧が表示されます。2段目の各項目をホバーすると、記事本文の冒頭部分が少し表示されます。下図はCSS編集前のキャプチャー画像なので、3段目の装飾が甘いのが分かります。

    valid-seo-3c-112-nav-recent-etc-4.png
  3. 以上で、HTML編集での「最新記事一覧」へのカスタムは完了です。

新着コメント一覧

  1. デフォルト状態から、「新着コメント一覧」が表示されるようにします。同じ要領で「左から2番めのコード」を次のコードに置き換えます。

    <!-- ▼新着コメント 開始 -->
    <li id="nav-cm">
    <a>新着コメント<span class="small">&#9660;</span></a>
    <ul>
    <!--rcomment-->
    <li>
    <a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_title></a>
    <ul>
    <li class="recent-summary">
    <dl class="recent-meta">
    <dt>投稿日</dt><dd><%rcomment_year>年<%rcomment_month>月<%rcomment_day>日(<%rcomment_wayoubi>)</dd>
    </dl>
    <dl class="recent-meta">
    <dt>投稿者</dt><dd><%rcomment_name></dd>
    </dl>
    <dl class="recent-meta">
    <dt>元記事</dt><dd><a href="<%rcomment_link>" title="<%rcomment_etitle> | <%blog_name>"><%rcomment_etitle></a></dd>
    </dl>
    <p class="recent-opening"><%rcomment_body></p>
    </li>
    </ul>
    </li>
    <!--/rcomment-->
    </ul>
    </li>
    <!-- ▲新着コメント 終了 -->
  2. 以上で、HTML編集での「新着コメント一覧」へのカスタムは完了です。

親子カテゴリ一覧

  1. デフォルト状態から、「親子カテゴリ一覧」が表示されるようにします。同じ要領で「左から2番めのコード」を次のコードに置き換えます。

    <!-- ▼カテゴリ 開始 -->
    <li id="nav-category"><a>カテゴリ<span class="small">&#9660;</span></a>
    <ul>
    <!--category-->
    <!--category_nosub-->
    <li><a href="<%category_link>" title="<%category_name> | <%blog_name>"><%category_name><span class="category-count"> (<%category_count>)</span></a></li>
    <!--/category_nosub-->
    <!--category_parent-->
    <li><a href="<%category_link>" title="<%category_name> | <%blog_name>"><%category_name><span class="category-count"> (<%category_count>)</span>
     <span>&#9658;</span></a><ul>
    <!--/category_parent-->
    <!--category_sub_hasnext-->
    <li><a href="<%category_link>" title="<%category_name> | <%blog_name>"><%category_name><span class="category-count"> (<%category_count>)</span></a></li>
    <!--/category_sub_hasnext-->
    <!--category_sub_end-->
    <li><a href="<%category_link>" title="<%category_name> | <%blog_name>"><%category_name><span class="category-count"> (<%category_count>)</span></a></li>
    </ul>
    </li>
    <!--/category_sub_end-->
    <!--/category-->
    </ul>
    </li>
    <!-- ▲カテゴリ 終了 -->
    
  2. 以上で、HTML編集での「親子カテゴリ一覧」へのカスタムは完了です。

全タグ一覧

  1. デフォルト状態から、「全タグ一覧」が表示されるようにします。同じ要領で「左から2番めのコード」を次のコードに置き換えます。

    <!-- ▼タグ 開始 -->
    <li id="nav-tag"><a>タグ<span class="small">&#9660;</span></a>
    <ul>
    <li>
    <!--ctag-->
    <a href="<%ctag_url>" title="<%ctag_name> (<%ctag_count>) | <%blog_name>"><%ctag_name></a> 
    <!--/ctag-->
    </li>
    </ul>
    </li>
    <!-- ▲タグ 終了 -->
    
  2. 以上で、HTML編集での「全タグ一覧」へのカスタムは完了です。

月別記事一覧

  1. デフォルト状態から、「月別記事一覧」が表示されるようにします。同じ要領で「左から2番めのコード」を次のコードに置き換えます。

    <!-- ▼月別記事 開始 -->
    <li id="nav-archive"><a>月別記事<span class="small">&#9660;</span></a>
    <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>
    </li>
    <!-- ▲月別記事 終了 -->
    
  2. 以上で、HTML編集での「月別記事一覧」へのカスタムは完了です。

テンプレートのCSSを編集

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

    .recent-summary{padding:10px;}
    .recent-summary{clear:right;}
    .recent-meta{color:#888;font-size:85%;margin:0 0 5px;}
    .recent-meta dt,.recent-meta dd{display:inline;font-weight:normal;margin:0;padding-right:.3em;}
    .recent-meta dt:after{content:"\3A";padding-left:.3em;}
    #nav .recent-meta a{display:inline;padding:0;}
    .recent-opening{border-top:1px dotted #999;padding-top:5px;}
    .recent-opening:before,.recent-opening:after{color:#999;content:" ...以下省略されました";font-size:85%;}
    .recent-opening:before{content:"本文冒頭: ";display:block;}
    #nav-tag li{padding:5px 0;}
    #nav #nav-tag a{display:inline;padding:2px;width:auto;}
    
    valid-seo-3c-112-nav-recent-etc-5.png
  2. 以上で、CSS編集は完了です。

デモページ

  1. 1段目の左から2番めから6番めまでを上記5項目に変更したデモページです。下図で赤の点線で示しているように3段目がCSSで地味に装飾されているのを確認できます。

    valid-seo-3c-112-nav-recent-etc-6.png

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

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

以上です。

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