パンくずリスト・記事一覧＠ライブドアブログ
2005年11月15日15:31
少しでも読みやすいサイトにならないか、少しでもサイトに滞在していただけるようにならないか、というのは多くのサイトオーナーの願いだと思います。
それには、いわゆるユーザビリティ（使いやすさ）の向上がひとつの手段といえます。
今回ライブドアブログで、パンくずリストの設置と、カテゴリアーカイブの記事一覧、月別アーカイブの記事一覧の作成に取り組んでみました。

ところでパンくずリストとは？。

・e-Words

■パンくずリスト　【topic path】


　Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的に理解する役に立つ。

　大規模なWebサイトは、ページ群全体が大きなカテゴリに分かれ、その下に何階層かの小カテゴリ、個別のページ、という形で階層構造で管理されていることが多い。各ページに、そのページの属するカテゴリのトップページへのリンクを順番に並べたものがパンくずリストである。区切り記号には伝統的に「>」(大なり記号)が使われ、「トップ > コンピュータ > パソコン > 買い方」のように表現する。

（中略）

　童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来である。英語では、パンくずリストの直訳「breadcrumbs list」のほかに、意味を捉えた「topic path」(トピックパス)という語も使われる。


童話では、パンくずは鳥に食べられて結局役に立たなかったため、若干の不安は残りますが、まあいいことにしときましょう。


と言ってもブログの階層はたかがれています。
結局カテゴリーくらいしか階層がないので、しょぼいリストとなってしまいますが、まあ、ないよりマシかな、という事で、気を落とさずに説明させていただきます。

実際設置してみたパンくずリストはこちら。



リニューアル後、ライブドアブログはカテゴリーが２つ登録できるようになりました。

投稿画面で左に入力するのがCategory1、右に入力するのがCategory2です。
主なカテゴリーをCategory1、サブカテゴリーをCategory2として使われる方も多いかと思います。
Category2は取り立てて使わない場合もあるので、できればCategory2はあるときだけ表示されて欲しいものです。


前回記事（グーグルアドセンスを貼りまくる@ライブドアブログ）を参考に、個別記事のHTMLをのぞいてみますと、個別記事の一番下の方に、投稿者や投稿時間、コメント数、トラックバック数、カテゴリー１、カテゴリー２を表示する部分があるではありませんか。

<div class="posted"><$ArticleAuthor$> at <$ArticleTime$><IfArticleAllowComment>│<a href="#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>│<a href="#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing><IfArticleCategory1>│<a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a>＆ｎｂｓｐ；</IfArticleCategory1><IfArticleCategory2>|＆ｎｂｓｐ；<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>

<$ArticleAuthor$>・・・投稿者の名前
<$ArticleTime$>・・・投稿時間
<IfArticleAllowComment></IfArticleAllowComment>・・・コメントが許されているなら表示するという条件
<a href="#comments"></a>・・・コメント部分へのリンク
<$ArticleCommentCount$>・・・コメントの数
<IfArticleAllowPing></IfArticleAllowPing>・・・トラックバックが許されているなら表示するという条件
<a href="#trackback"></a>・・・トラックバック部分へのリンク
<$ArticlePingCount$>・・・トラックバックの数
<IfArticleCategory1></IfArticleCategory1>・・・Category1があるなら表示するという条件
<$ArticleCategory1Url$>・・・Category1のページのアドレス
<$ArticleCategory1$>・・・Category1の名前
<IfArticleCategory2></IfArticleCategory2>・・・Category2があるなら表示するという条件
<$ArticleCategory2Url$>・・・Category2のページのアドレス
<$ArticleCategory2$>・・・Category2の名前
＆ｎｂｓｐ；（実際は半角英字）・・・半角スペース


ややこしいですが、分解するとこうなっています。
＄で囲われたタグは「独自タグ」といわれるもので、普通のHTMLとは別の機能があって、ブログサービスごとに違います。ここに表記しているのはライブドアの独自タグです。
これらを理解するとHTMLをいじりやすくなります。


そういうわけで、これらを使ってパンくずリストのタグを作ってみました。
ちなみに個別記事のタイトル名の独自タグは<$ArticleTitle ESCAPE$>となっています。

<a href="http://afiliate.livedoor.biz/">トップ</a>＞<IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>（<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>）</IfArticleCategory2>＞<$ArticleTitle ESCAPE$>


条件タグでくくられた部分は、その条件を満たさなければ表示されないので、Category2が無ければ括弧も表示されません。

タイトルの下あたりに、<small></small>タグでくくって文字をちっちゃくして、
<div align="right"></div>で囲って右寄せし、入れてみました。

<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3></div>
<br/>
<div align="right"><small><a href="自サイトのＵＲＬ">トップ</a>＞<IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>（<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>）</IfArticleCategory2>＞<$ArticleTitle ESCAPE$></small></div>


記事の一番下あたりにもしつこいようですが入れてみました。
</div></IfArticleBodyMore>の上あたりにコピペします。

忘れずにHTMLを保存します。


全てのページを再構築していたら、結構時間がかかりますので、
「ブログの投稿」→「投稿したブログを編集する 」からパンくずリストを表示させてみたい個別記事だけを選んで、「この内容で投稿する」を押してください。内容を変える必要はありません。

これで、選んだ個別記事のみが再構築されますので、実際にサイトで選んだ個別記事を見て確認してみてください。変化がない場合は、ブラウザで「更新ボタン」を押してみて確認してみてください。

選んだ個別記事に問題なくパンくずリストができたら、全ページを再構築します。





続いて、カテゴリー別ページに、記事の一覧を作ってみます。

実際の画像はこちら。



良くわからない方は、どれかカテゴリーページをのぞいてみられてください。


今度はカテゴリアーカイブのHTMLを見てみます。
結局、カテゴリアーカイブというのは、<CategorizedArticlesLoop>と</CategorizedArticlesLoop>でくくられた部分がループしているページなんだな、ということが1年もやってるとなんとなくわかってきます。

そういうわけで、このループしている部分の間に挟まっているものを記事のタイトルと記事のリンク以外全て削ってしまえば記事タイトルの一覧ができるのではないか、と1年もやっているとなんとなくわかってきます。


そういうわけで、結局必要なのは、これだけだということがわかりました。

<CategorizedArticlesLoop>
<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a>
</CategorizedArticlesLoop>

<$ArticlePermalink$>・・・個別記事のアドレス
<$ArticleTitle ESCAPE$>・・・個別記事のタイトル


ずいぶんこざっぱりしたものです。しかし、これをそのまま貼り付けると、記事タイトルと記事タイトルの間に１文字のスペースも無く、ぎゅうぎゅう詰めの記事一覧になってしまいますので、少し工夫します。

リンクを<b></b>でくくって太字にし、
<br/>タグで改行させます。
「・」をリンクの頭につけてリストっぽさを出します。

<CategorizedArticlesLoop>
<b>・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></b><br/>
</CategorizedArticlesLoop>


うーん、これでも物足りない、という場合は、テーブルタグで飾りづけします。
<center>タグで真ん中に寄せて、<small>タグで文字をちっちゃくします。

<center><table width=90% border=1 cellspacing=0 cellpadding=3 bordercolordark="#FFCC99" bordercolor="#660000">
<tr bgcolor="#FF6666"><td height=10 valign="middle" align="center"><b>■カテゴリー記事一覧■</td></tr>
<tr><td bgcolor="#FFFFFF"><small>
<CategorizedArticlesLoop>
<b>・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></b><br/>
</CategorizedArticlesLoop>
</small></td></tr>
</table>
</center>


#660000や#FF6666など、色を変更したり、■カテゴリー記事一覧■という部分を変えても良いでしょう。

<div id="categorytitlebody"><h2 id="categorytitle"><$CategoryName ESCAPE$></h2></div>の下あたりにできたものを入れ込みます。

<div id="categorytitlebody"><h2 id="categorytitle"><$CategoryName ESCAPE$></h2></div>
<br/>
<center><table width=90% border=1 cellspacing=0 cellpadding=3 bordercolordark="#FFCC99" bordercolor="#660000">
<tr bgcolor="#FF6666"><td height=10 valign="middle" align="center"><b>■カテゴリー記事一覧■</td></tr>
<tr><td bgcolor="#FFFFFF"><small>
<CategorizedArticlesLoop>
<b>・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></b><br/>
</CategorizedArticlesLoop>
</small></td></tr>
</table>
</center>



月別アーカイブもカテゴリアーカイブと同様です。

<MonthlyArticlesLoop></MonthlyArticlesLoop>と■月別記事一覧■が変わっただけであとは同じです。

<h2 id="categorytitle"><$MonthLabel$></h2>
</div>
の下あたりに入れ込みます。

<h2 id="categorytitle"><$MonthLabel$></h2>
</div>

<center><table width=90% border=1 cellspacing=0 cellpadding=3 bordercolordark="#FFCC99" bordercolor="#660000">
<tr bgcolor="#FF6666"><td height=10 valign="middle" align="center"><b>■月別記事一覧■</td></tr>
<tr><td bgcolor="#FFFFFF"><small>
<MonthlyArticlesLoop>
<b>・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></b><br/>
</MonthlyArticlesLoop>
</small></td></tr>
</table>
</center>
<br/>

ぶっちゃけ、太字部分をコピーして該当部分に挿入して、保存し、再構築すれば、とりあえず記事一覧はできます。

必ずHTMLを保存してから試されてみてください。
一応、自己責任で（笑）。


こうして、パンくずリスト、記事一覧を作ってはみましたが、ユーザビリティはあがったのかは不明です。ページビューもあんまり変わらないような・・・（笑）。


ところで、個別記事に、カテゴリアーカイブの記事一覧を作る方法がお分かりの方はいらっしゃいませんでしょうか。できれば個別記事のサイドバーにでも同じカテゴリー内の記事一覧を表示できれば、もう少し見やすくなると思うのですが・・・。いろいろ試しましたが、これはどうすればいいのかわかりませんでした。
わかる方、教えていただけるとうれしいです。

それができちゃうと、パンくずリストは不要になるんですよね。
童話の世界同様、役に立たないまま消えていく運命なのでしょうか(´･ω･`)ｼｮﾎﾞｰﾝ。


パンくずりすとや記事一覧などのカスタマイズされた記事がありましたら、他のブログサービスでもかまいませんから、お気軽にトラックバックどおぞ〜。



追記:

アーカイブの表示件数を少なく設定されている場合は、下記の部分が必要となります。

<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage>   <a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>



まとめると、下記のようになります。

<center><table width=90% border=1 cellspacing=0 cellpadding=3 bordercolordark="#FFCC99" bordercolor="#660000">
<tr bgcolor="#FF6666"><td height=10 valign="middle" align="center"><b>■カテゴリー記事一覧■</td></tr>
<tr><td bgcolor="#FFFFFF"><small>
<CategorizedArticlesLoop>
<b>・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></b><br/>
</CategorizedArticlesLoop>
<br/>
<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage>   <a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>
</small></td></tr>
</table>
</center>




│clip! │ライブドアブログ  | ブログカスタマイズ
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
鴨竜
鴨竜
2005年11月22日 05:00
はじめまして、
こちらの記事を参考にして記事一覧表示を掲載する事ができました。
とても助かりました。ほとんどタグをそのまんまコピーですが…
これからも色々な記事を参考にさせてもらいます。
宜しくお願いします。

afiliate
2005年11月22日 11:11
どおも〜鴨竜さま。はじめまして。コメントありがとうございます。

設置していただけたとは、うれしいです。
そして、サイトを見せていただいて、足りない部分があったことにも気づかせていただきました。

あわてて追記しています（笑）。

こちらこそよろしくお願いいいたします(●＾∇＾●)／。

はらけん＠天津
はらけん＠天津
2005年11月23日 19:43
5

はじめまして。天津在住のはらけんといいます。
この度は、記事を参照させて頂き、ブログのカスタマイズしました。
非常にわかりやすいブログ構成になり、
読者の方にとっても良かったと思います。

今後とも楽しみに読ませて頂きます。
中国情報更新してますのでお時間あるとき遊びに来てくださいね。
それでは。

afiliate
2005年11月24日 08:56
どおも〜はらけん＠天津さま。はじめまして。コメントありがとうございます。

サイト拝見させていただきました。
もともとすっきりとしていて、とても読みやすい構成のサイト、という印象でした。
かなりユーザービリティに気を配ってある感じがしました。

今回の記事が少しでもお役に立ってると、うれしいです。
どこかやり方が間違ったりしていないかなあ、といつも心配ではあるんですが、問題なく設置できていたようなので安心しました。

お暇なときにでもまたよられてくださいね〜




この記事へのトラックバック


1. 記事一覧の表示  [ LOVE LIONS　〜獅子達の進撃〜 ]   2005年11月22日 05:48

ブログのＨＴＭＬを少しいじりました。 変更点 ??トップページに最新記事（新着記事）の一覧を表示 ??カテゴリアーカイブ、月別アーカイブに記事一覧を表示


2. パンくずリスト・記事一覧を付ける  [ 中国・天津情報中心【旧：はらけん上海日記(ブログ)】 ]   2005年11月23日 19:40

中国にいると、日本の祭日はもちろん出勤。だけどメールも電話も激減、上司も出張中ということで、ネットサーフィンにいそしんでいると（笑）、アフィリエイトは儲かんないってばさんのサイトで非常にお役立ち記事を発見。パンくずリスト・記事一覧＠ライブドアブログこれを....