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

トピックパスは図のように、現在表示しているページを「>」を用いて階層的にナビゲートする手法のことです。

トピックパス

Seesaaブログではカテゴリページ、過去ログページ、記事ページを開いている際に、現在どのページを開いているのかが分りにくいです。訪問者の多くは新着記事や検索結果からやって来ます。トップページにダイレクトに来てくれるとは限りません。デフォルトのままでは直接サブページに来てくれた人に不親切なので、サイト上部にトピックパスを作成しました。

このカスタマイズはページ全体のHTML編集です。マイブログメニューの[デザイン]⇒[HTML]から編集を行います。ソース中段あたりにbannerの記述があります。

<div id="banner">
<% content_header %>
</div>

次の赤文字で示した記述を追加しました。
一行目でトップページ名<% blog.title %>の表示、二行目以降のif文で各ページを階層的に記述しています。
<% extra_title %>はカテゴリページではカテゴリ名、記事ページでは記事タイトルになります。

<div id="banner">
<div class="topicpath">
<a href="<% blog.page_url %>"><% blog.title %></a>
<% if:page_name eq 'category' %> > <% extra_title %><% /if %>
<% if:page_name eq 'article' %> > <% extra_title %><% /if %>
<% if:page_name eq 'archive' %> > 過去ログページ<% /if %>
</div>
<% content_header %>
</div>

後はスタイルシートの編集.topicpath{ } をデザインして作業は完了です。
初期値との差分を確認すると次のように表示されます。

初期値との差分

これでカテゴリページが表示されている際はカテゴリ名、記事ページが表示されている際は記事タイトル、過去ログページが表示されている際は「過去ログページ」という文字列が表示されます。

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

サイトマップ

Seesaaブログのカスタマイズ > サイト全体 > トピックパスの作成1
スタイルシート カスタマイズ

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

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

記事コンテンツ

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

カテゴリ

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

検索ページ

その他