トピックパス(パンくずリスト)の作成2

記事の << 前 | main | 次 >> ナビゲーションの変わりにトピックパスを配置しました。

トピックパス

この場所に配置することによりトピックパス1では実現できなかった過去ログページの年月表示や、図のような記事ページの属するカテゴリ名表示が可能になります。

このカスタマイズはトピックパス1と異なり、記事コンテンツの編集です。マイブログメニューの[デザイン]⇒[コンテンツ]の[記事]から編集を行います。ソース上段に少し長いですがnaviの記述があります。

<!-- Content -->
<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%><<<a href="<% previous_article.page_url %>"><% previous_article.subject | tag_break %></a>| <% /if -%>
<a href="<% blog.page_url %>"M>ain</a>
<% if:next_article -%>| <a href="<% next_article.page_url %>"><% next_article.subject | tag_break %></a>>><% /if -%>
</div>
<% /if -%>
<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:previous_archive -%><<<a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a>|<% /if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_archive -%>|<a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a>>><% /if -%>
</div>
<% /if -%>
<% if:page_name eq 'category' -%>
<% /if -%>

<% loop:list_article -%>

赤文字で示した箇所がnaviに関する記述です。この部分を次のように書き換えました。

<!-- Content -->
<div class="topicpath2">
<a href="<% blog.page_url %>"><% blog.title %></a>
<% if:page_name eq 'article' %> > <% loop:list_article -%><a href="<% article_category.page_url %>"><% article_category.name %></a> > <% article.subject %><% /loop %><% /if %>
<% if:page_name eq 'archive' %> > <% archive.createstamp | date_format("%Y年%m月") %><% /if %>
<% if:page_name eq 'category' %> > <% category.name %><% /if %>
</div>

<% loop:list_article -%>

記事ページではarticle_categoryarticle.subjectを用いることにより「カテゴリ名 > 記事タイトル」のような階層表示が可能になりました。過去ログページではarchive.createstampを用いることにより年月の表示が可能になりました。

トピックパス

後はスタイルシートの編集.topicpath2{ } をデザインして作業は完了です。

関連記事:トピックパスの作成1
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > 記事コンテンツ > トピックパスの作成2
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他