パンくずリストとは、ホームページなどでメニュー画面の階層を、分かりやすく示したモノです。
例えば、花屋のサイトがあったとすれば、メニューは「商品陳列、商品説明、会社説明………」等々があり、それぞれのメニューページに進めます。
商品のページに進んだら、「お祝いの花、お墓参りの花、プレゼントの花」など、またさらに細かいメニューページに進めます。
例えば、ユーザーが今開いている、「カーネーション」のページは、一体どこなんだろうと思ったとき、パンくずリストを見れば
と言うように、一目で今自分がサイトのどこにいるのかを示せるナビゲーションです。
ブログの場合は、メニューページからの導入という状況はあまりないため、パンくずリストは必要ないかも知れませんが、それでも「カテゴリ」や「ユーザータグ」から分類した「メニュー」を階層に示すことが出来ます。
テンプレート用 変数一覧｜FC2ブログ公式マニュアル
まず、組み立てる形を吟味。使える変数をピックアップしていきます。
基本の形は、カテゴリが記事には必ず一つ設定する項目なので、
このような感じで、カテゴリを主体にしてパンくずナビを組み立てる方法が考えられます。
このような感じで組み上がります。
つまり、特別な表示をするのは「詳細記事画面のみ」と言うことですね。
全記事タイトル画面では「<%sub_title>」の変数では何も表示されないため、全記事表示ブロックは特別にタグを設けています。
【パンくずナビFC2用】
※矢印の記号は「 » 」に書き直します。
「 」…半角空白
「» 」…右向き2重矢印
例えば、花屋のサイトがあったとすれば、メニューは「商品陳列、商品説明、会社説明………」等々があり、それぞれのメニューページに進めます。
商品のページに進んだら、「お祝いの花、お墓参りの花、プレゼントの花」など、またさらに細かいメニューページに進めます。
例えば、ユーザーが今開いている、「カーネーション」のページは、一体どこなんだろうと思ったとき、パンくずリストを見れば
トップページ >> 商品陳列 >> プレゼントの花 >> カーネーション
と言うように、一目で今自分がサイトのどこにいるのかを示せるナビゲーションです。
ブログの場合は、メニューページからの導入という状況はあまりないため、パンくずリストは必要ないかも知れませんが、それでも「カテゴリ」や「ユーザータグ」から分類した「メニュー」を階層に示すことが出来ます。
変数のピックアップ
テンプレート用 変数一覧｜FC2ブログ公式マニュアル
まず、組み立てる形を吟味。使える変数をピックアップしていきます。
基本の形は、カテゴリが記事には必ず一つ設定する項目なので、
| HOME | >> カテゴリ | >> 子カテゴリ | >> 記事タイトル >> タグページ >> サーチページ >> 全記事ページ |
| 全ページで表示される | 詳細記事ページで、 親カテゴリがある場合に表示される | カテゴリページ、詳細記事ページで表示される | トップページ以外で表示される |
このような感じで、カテゴリを主体にしてパンくずナビを組み立てる方法が考えられます。
■子カテゴリ一覧画面で親カテゴリを表示したいのですが、ちょっとこれは変数だけでは難しいようです。
というのも、子カテゴリ一覧を表示中に親カテゴリを表示するには
「<!--topentry--> ～ <!--/topentry-->」
という変数が必要になります。これは、詳細記事画面では「1度」しか表示されないので大丈夫ですが、カテゴリ画面では、記事を繰り返して表示した数だけ繰り返し表示されてしまいます。
というのも、子カテゴリ一覧を表示中に親カテゴリを表示するには
「<!--topentry--> ～ <!--/topentry-->」
という変数が必要になります。これは、詳細記事画面では「1度」しか表示されないので大丈夫ですが、カテゴリ画面では、記事を繰り返して表示した数だけ繰り返し表示されてしまいます。
変数とタグを組み上げる
<a href="<%url>">トップページ</a>
<!--not_index_area-->（トップページ以外）
<!--not_permanent_area-->（個別記事画面以外）
<%sub_title>
<!--/not_permanent_area-->（個別記事画面以外）
<!--permanent_area-->（個別記事画面のみ）
<!--topentry-->
<!--parent_category-->（親カテゴリがある場合）
<a href="<%topentry_parent_category_link>"><%topentry_parent_category>（親カテゴリ）</a> »
<!--/parent_category-->（親カテゴリがある場合）
<a href="<%topentry_category_link>"><%topentry_category>（カテゴリ）</a> »
<%topentry_title>（記事タイトル）
<!--/topentry-->
<!--/permanent_area-->（個別記事画面のみ）
<!--titlelist_area-->全記事表示<!--/titlelist_area-->
<!--/not_index_area-->（トップページ以外）
<!--not_index_area-->（トップページ以外）
<!--not_permanent_area-->（個別記事画面以外）
<%sub_title>
<!--/not_permanent_area-->（個別記事画面以外）
<!--permanent_area-->（個別記事画面のみ）
<!--topentry-->
<!--parent_category-->（親カテゴリがある場合）
<a href="<%topentry_parent_category_link>"><%topentry_parent_category>（親カテゴリ）</a> »
<!--/parent_category-->（親カテゴリがある場合）
<a href="<%topentry_category_link>"><%topentry_category>（カテゴリ）</a> »
<%topentry_title>（記事タイトル）
<!--/topentry-->
<!--/permanent_area-->（個別記事画面のみ）
<!--titlelist_area-->全記事表示<!--/titlelist_area-->
<!--/not_index_area-->（トップページ以外）
このような感じで組み上がります。
つまり、特別な表示をするのは「詳細記事画面のみ」と言うことですね。
全記事タイトル画面では「<%sub_title>」の変数では何も表示されないため、全記事表示ブロックは特別にタグを設けています。
【パンくずナビFC2用】
※矢印の記号は「
「
「
スポンサーリンク
Thu.01.20.2011
Comment
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
