渡る世間は○○ダ！！:Blogにパン屑リストをつけてみる

	[ コンピュータ/インターネット - 一般 \| かんたん！ブログをはじめてみよう ]	livedoor ホーム

2004年11月23日

Blogにパン屑リストをつけてみる

よく、企業のホームページのようなしっかりしたサイトには、パン屑リストと呼ばれるナビゲータが付いています。

大規模なWebサイトだと、

｢今、どこのページを見ているのか。｣

が、わかりにくかったりするので、パン屑リストを付けてサイトの構成をわかり易くしています。

Blogはコンテンツが増えていくツールですので、これがあると便利ですね。で、参考にしたのはパンパでガウチョさんのページです。

個別記事ページにパン屑リスト

上記のページにある通り個別ページとスタイルシートを修正すると、｢前のページ｣｢次のページ｣｢Blogトップページ｣の3つのリンクが追加されます。

ここでは、表示を少し変えたものにしてみます。同じくパンパでガウチョさんの次のページを参考に、livedoor Blogの特殊タグを利用し、表示される内容を変更します。

livedoor Blogの特殊タグ一覧

それぞれのHTMLテンプレートで<div id="content">の後に次のソースを追加します。

1. 個別ページ
<div id="navigation"> <a href="<$BlogUrl$>">トップページ</a> > <IfArticleCategory><a href="<$ArticleCategoryUrl$>"><$ArticleCategory ESCAPE$></a> > </IfPrevArticle><$ArticleTitle ESCAPE$> </div>

2. 月別アーカイブ
<div id="navigation"> <a href="<$BlogUrl$>">トップページ</a> > 月別アーカイブ </div>

3. カテゴリ別アーカイブ
<div id="navigation"> <a href="<$BlogUrl$>">トップページ</a> > <$CategoryName ESCAPE$> </div>

4. スタイルシート
#navigation{
text-align:left;
padding:0px 0px 3px 10px;
font-size:x-small;
font-weight:bold;
}

HTMLテンプレートへの追加が終わったらBlogの再構築をして完了です。パン屑リストが自動で表示されてくるはずです。

- 追記 - 2005/10/23
Blogテンプレートのデザインを変更したので、旧テンプレートのソースは参考として掲載します。また、今までは各ソースをHTMLファイルに変換して掲載していましたが、Textareaの形式に変更しました。

・個別ページのHTML_v005

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
    <link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<$RSSUrl$>" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="<$AtomUrl$>" />
    <IfFoafUrl>
      <link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" />
    </IfFoafUrl>
    <title><$BlogTitle ESCAPE$>:<$ArticleTitle ESCAPE$></title>

    <script language="JavaScript">
      <!--
        var HOST = '<$BlogDomain$>';
        var PATH = '<$BlogCookiePath$>';

        // Copyright (c) 1996-1997 Athenia Associates.
        // http://www.webreference.com/js/
        // License is granted if and only if this entire
        // copyright notice is included. By Tomer Shiran.

        function setCookie (name, value, expires, path, domain, secure) {
            var curCookie = name + "=" + escape(value) + (expires ? "; expires=" + expires.toGMTString() : "") + (path ? "; path=" + path : "") + (domain ? "; domain=" + domain : "") + (secure ? "secure" : "");
            document.cookie = curCookie;
        }

        function getCookie (name) {
            var prefix = name + '=';
            var c = document.cookie;
            var nullstring = '';
            var cookieStartIndex = c.indexOf(prefix);
            if (cookieStartIndex == -1)
                return nullstring;
            var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
            if (cookieEndIndex == -1)
                cookieEndIndex = c.length;
            return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
        }

        function deleteCookie (name, path, domain) {
            if (getCookie(name))
                document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
        }

        function fixDate (date) {
            var base = new Date(0);
            var skew = base.getTime();
            if (skew > 0)
                date.setTime(date.getTime() - skew);
        }

        function setCommentAuthor(f) {
            if(!f.bake.checked) {
                 deleteCookie("author", PATH, HOST);
                 deleteCookie("email", PATH, HOST);
                 deleteCookie("url", PATH, HOST);
                 return true;
            }
            var now = new Date();
            fixDate(now);
            now.setTime(now.getTime() + 30 * 24 * 60 * 60 * 1000);
            if(f.author != undefined)
                setCookie("author", f.author.value, now, PATH, HOST, '');
            if(f.email != undefined)
                setCookie("email", f.email.value, now, PATH, HOST, '');
            if(f.url != undefined)
                setCookie("url", f.url.value, now, PATH, HOST, '');
        }

        function removeCommentAuthor(f) {
            deleteCookie("author", PATH, HOST);
            deleteCookie("email", PATH, HOST);
            deleteCookie("url", PATH, HOST);
            f.author.value = '';
            f.email.value = '';
            f.url.value = '';
        }
      -->
    </script>
  </head>

  <body>
    <IfCommentNeedAuth>
      <script type="text/javascript" src="<$BlogAuthJsUrl$>"></script>
    </IfCommentNeedAuth>

    <a name="top"></a>

    <!-- Blog Main Contents -->
      <div id="container">

      <!-- Banner Space -->
        <div id="banner">
          <h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
          <div class="description"><$BlogDescription$></div>
        </div>

      <!-- Blog Body Space -->
        <div id="content">

        <!-- Navigation -->
	  <div id="navigation">
            <a href="<$BlogUrl$>">トップページ</a> > <IfArticleCategory><a href="<$ArticleCategoryUrl$>"><$ArticleCategory ESCAPE$></a> > </IfPrevArticle><$ArticleTitle ESCAPE$>
          </div>

        <!-- Blog Body -->
          <div class="blog">
            <$TrackBackAutoDiscovery$>
            <h2 class="date"><$ArticleDate$></h2>

            <div class="blogbody">
              <h3 class="title"><$ArticleTitle ESCAPE$></h3>
              <div class="main"><$ArticleBody$><br clear="all"></div>
              <a name="more"></a>
              <div class="main"><$ArticleBodyMore$><br clear="all"></div>

              <div class="posted">Posted by <$ArticleAuthor$> at <$ArticleTime$>
                <IfArticleAllowComment>│<a class="aposted" href="#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
                <IfArticleAllowPing>│<a class="aposted" href="#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing>
                  <div class="menu"><a class="amenu" href="<$BlogUrl$>">このBlogのトップへ</a>
                    <IfPrevArticle>│<a class="amenu" href="<$PrevArticle$>">前の記事</a></IfPrevArticle>
                    <IfNextArticle>│<a class="amenu" href="<$NextArticle$>">次の記事</a></IfNextArticle>
                  </div>
              </div>

              <IfArticleAllowPing>
                <a name="trackback"></a>
                <h3 class="title">この記事へのトラックバックURL</h3>
                <div class="trackback-url"><$ArticleTrackBackUrl$></div>
              </IfArticleAllowPing>

              <IfArticlePingCount>
                <div class="comments-head">この記事へのトラックバック</div>
                <TrackBacksLoop>
                  <div class="trackback-body"><$PingExcerpt ESCAPE$></div>
                  <div class="trackback-post"><a class="atrackback-post" target="_blank" href="<$PingBlogUrl$>"><$PingTitle ESCAPE$></a>【<$PingBlogName ESCAPE$>】at <$PingDateTime$></div>
                </TrackBacksLoop>
              </IfArticlePingCount>

              <a name="comments"></a>
              <IfArticleCommentCount>
                <div class="comments-head">この記事へのコメント</div>
                <CommentsLoop>
                  <div class="comments-body"><$CommentBody$></div>
                  <div class="comments-post">Posted by 
                    <IfCommentUrl><a class="aposted" href="<$CommentUrl$>"><$CommentAuthor ESCAPE$></a>
                      <ElseIfCommentEmail><a class="aposted" href="mailto:<$CommentEmail ESCAPE$>"><$CommentAuthor ESCAPE$></a>
                    <Else>
                      <$CommentAuthor ESCAPE$>
                    </IfCommentUrl> at <$CommentDateTime$>
                  </div>
                </CommentsLoop>
              </IfArticleCommentCount>

              <IfArticleAllowComment>
                <$CommentPostError$>
                <IfCommentNeedAuth>
                  <script language="JavaScript">
                    <!--
                      if(authorized_name) {
                          document.write('<div class="comments-body">■ようこそ' + authorized_name + 'さん    <a href="<$CommentLogoutUrl$>">ログアウト</a></div>');
                      }
                      else {
                          document.write('<div class="comments-head">このBlogにコメントするには<a href="<$CommentLoginUrl$>">ログイン</a>が必要です。</div>');
                      }
                    -->
                  </script>
                </IfCommentNeedAuth>

                <table cellpadding="5" cellspacing="0" border="0" class="form">
                  <form action="<$ArticleCommentUrl$>#errors" method="POST" name="comment_form" onSubmit="javacript:setCommentAuthor(this);">
                    <tr>
                      <td><label for="author">名前: </label></td>
                      <td><label for="email">
                        <IfCommentNeedAuth>
                          <script language="JavaScript">
                            <!--
                              if(authorized_name)
                              	           document.write(authorized_name);
                              else
                      	                   document.write('<input id="author" name="author">');
                            -->
                          </script>
                        <Else><input id="author" name="author">
                        </IfCommentNeedAuth>
                        </label></td>
                    </tr>
                    <tr>
                      <td valign="top"><label for="email">メール: </label></td>
                      <td><input id="email" name="email"></td>
                    </tr>
                    <tr>
                      <td valign="top"><label for="url">URL: </label></td>
                      <td><input id="url" name="url"></td>
                    </tr>
                    <tr>
                      <td><label for="bake">情報を記憶: </label></td>
                      <td><input id="bake" type="checkbox" name="cookie" style="padding:0;margin:0px;"></td>
                    </tr>
                    <tr>
                      <td valign="top"><label for="text">コメント: </label></td>
                      <td><textarea id="text" name="body" rows="10" cols="50"></textarea></td>
                    </tr>
                    <tr>
                      <td> </td>
                      <td><input type="submit" value="　書込　"></td>
                    </tr>
                  </form>
                </table>

              </IfArticleAllowComment>

              <div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
            </div>
          </div>
        </div>

        <!-- Sidebar Space -->
          <div id="links">
            <script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>

            <div class="powered">
              <a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a>
            </div>

            <div class="syndicate">
              <a href="<$RSSUrl$>">Syndicate this site (XML) </a>
            </div>

              <!-- checkers -->
                <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
                  <tr>
                    <td width="1%"><img src="http://blog.livedoor.com/img/usr/cmn/icon_cks.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをチェッカーズに追加"></td>
                    <td width="99%"><a href="<$AddCheckers$>" target="_blank">このBlogを<br>チェッカーズに追加</a></td>
                  </tr>
                </table>

                <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
                  <tr>
                    <td width="1%"><img src="http://image.blog.livedoor.com/img/usr/cmn/icon_br.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをリーダーに追加"></td>
                    <td width="99%"><a href="<$AddBlogReader$>" target="_blank">このBlogを<br>リーダーに追加</a></td>
                  </tr>
                </table>
          </div>

        <!-- Footer Space -->
          <div id="footer">Copyright (C) 2004 sarugane. All rights reserved.</div>
      </div>

      <script type="text/javascript" language="javascript">
        <!--
          if (document.comment_form.author != undefined)
              document.comment_form.author.value = getCookie("author");
          if (document.comment_form.email != undefined)
              document.comment_form.email.value = getCookie("email");
          if (document.comment_form.url != undefined)
              document.comment_form.url.value = getCookie("url");
          if (getCookie("author") || getCookie("email"))
              document.comment_form.bake.checked = true;
        //-->
      </script>
  </body>
</html>

・月別アーカイブのHTML_v008

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
    <link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<$RSSUrl$>" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="<$AtomUrl$>" />
    <IfFoafUrl>
      <link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" />
    </IfFoafUrl>
    <title><$BlogTitle ESCAPE$></title>
  </head>

  <body>
    <a name="top"></a>

    <!-- Blog Main Contents -->
      <div id="container">

        <!-- Banner Space -->
          <div id="banner">
            <h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
              <div class="description"><$BlogDescription$></div>
          </div>

        <!-- Blog Body Space -->
          <div id="content">

          <!-- Navigation -->
	    <div id="navigation">
              <a href="<$BlogUrl$>">トップページ</a> > 月別アーカイブ
            </div>

          <!-- Blog Body -->
            <div class="blog">
              <MonthlyArticlesLoop>
                <$TrackBackAutoDiscovery$>
                <IfDateChanged><a name="<$ArticleDateTag$>"></a><h2 class="date"><$ArticleDate$></h2></IfDateChanged>

                <div class="blogbody">
                  <a name="<$ArticleId$>"></a>
                  <h3 class="title"><a class="atitle" href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></h3>

                  <div class="main"><$ArticleBody$>  
                    <IfArticleBodyMore><span class="main-continues"><a class="acontinues" href="<$ArticlePermalink$>">続きを読む</a></span></IfArticleBodyMore><br clear="all">
                  </div>

                  <div class="posted">Posted by <$ArticleAuthor$> at
                    <a class="aposted" href="<$ArticlePermalink$>"><$ArticleTime$></a>
                    <IfArticleAllowComment>│<a class="aposted" href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
                    <IfArticleAllowPing>│<a class="aposted" href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing>
                    <IfArticleCategory>│<a class="aposted" href="<$ArticleCategoryUrl$>"><$ArticleCategory ESCAPE$></a></IfArticleCategory>
                  </div>
                </div>

              </MonthlyArticlesLoop>
              <div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
            </div>
          </div>

          <!-- Sidebar Space -->
            <div id="links">
              <script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>

              <div class="powered">
                <a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a>
              </div>

              <div class="syndicate">
                <a href="<$RSSUrl$>">Syndicate this site (XML) </a>
              </div>

              <!-- checkers -->
                <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
                  <tr>
                    <td width="1%"><img src="http://blog.livedoor.com/img/usr/cmn/icon_cks.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをチェッカーズに追加"></td>
                    <td width="99%"><a href="<$AddCheckers$>" target="_blank">このBlogを<br>チェッカーズに追加</a></td>
                  </tr>
                </table>

                <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
                  <tr>
                    <td width="1%"><img src="http://image.blog.livedoor.com/img/usr/cmn/icon_br.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをリーダーに追加"></td>
                    <td width="99%"><a href="<$AddBlogReader$>" target="_blank">このBlogを<br>リーダーに追加</a></td>
                  </tr>
                </table>
            </div>

        <!-- Footer Space -->
          <div id="footer">Copyright (C) 2004 sarugane. All rights reserved.</div>
      </div>
  </body>
</html>

・カテゴリ別アーカイブのHTML_v006

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
    <link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<$RSSUrl$>" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="<$AtomUrl$>" />
    <IfFoafUrl>
      <link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" />
    </IfFoafUrl>
    <title><$BlogTitle ESCAPE$>:<$CategoryName ESCAPE$></title>
  </head>

  <body>
    <a name="top"></a>

    <!-- Blog Main Contents -->
      <div id="container">

        <!-- Banner Space -->
          <div id="banner">
            <h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
            <div class="description"><$BlogDescription$></div>
          </div>

        <!-- Blog Body Space -->
          <div id="content">

          <!-- Navigation -->
	    <div id="navigation">
              <a href="<$BlogUrl$>">トップページ</a> > <$CategoryName ESCAPE$>
            </div>

          <!-- Blog Body -->
            <div class="blog">
              <CategorizedArticlesLoop>
                <$TrackBackAutoDiscovery$>
                <IfDateChanged><h2 class="date"><$ArticleDate$></h2></IfDateChanged>

                <div class="blogbody">
                  <a name="<$ArticleId$>"></a>
                  <h3 class="title"><a class="atitle" href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></h3>

                  <div class="main"><$ArticleBody$>  
                    <IfArticleBodyMore><span class="main-continues"><a class="acontinues" href="<$ArticlePermalink$>">続きを読む</a></span></IfArticleBodyMore><br clear="all">
                  </div>

                  <div class="posted">Posted by <$ArticleAuthor$> at
                    <a class="aposted" href="<$ArticlePermalink$>"><$ArticleTime$></a>
                    <IfArticleAllowComment>│<a class="aposted" href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
                    <IfArticleAllowPing>│<a class="aposted" href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing>
                  </div>
                </div>

              </CategorizedArticlesLoop>
              <div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
            </div>
          </div>

          <!-- Sidebar Space -->
            <div id="links">
              <script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>

              <div class="powered">
                <a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a>
              </div>

              <div class="syndicate">
                <a href="<$RSSUrl$>">Syndicate this site (XML) </a>
              </div>

              <!-- checkers -->
                <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
                  <tr>
                    <td width="1%"><img src="http://blog.livedoor.com/img/usr/cmn/icon_cks.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをチェッカーズに追加"></td>
                    <td width="99%"><a href="<$AddCheckers$>" target="_blank">このBlogを<br>チェッカーズに追加</a></td>
                  </tr>
                </table>

                <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
                  <tr>
                    <td width="1%"><img src="http://image.blog.livedoor.com/img/usr/cmn/icon_br.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをリーダーに追加"></td>
                    <td width="99%"><a href="<$AddBlogReader$>" target="_blank">このBlogを<br>リーダーに追加</a></td>
                  </tr>
                </table>
            </div>

        <!-- Footer Space -->
          <div id="footer">Copyright (C) 2004 sarugane. All rights reserved.</div>
      </div>
  </body>
</html>

・スタイルシート_v005

@charset "EUC-JP";

	body{
		color:#666;
		margin:0;
		text-align:left;
		width:100%;
		height:100%;
		background:#fff url('http://blog.livedoor.jp/sarugane/54241805.png') repeat-x scroll 0 0;
	}

	a{color:#666;text-decoration:underline;}
	a:link{color:#666;text-decoration:underline;}
	a:visited{text-decoration:underline;}
	a:active{}
	a:hover{color:#666;text-decoration:none;}

	a.acalendar{color:#666;text-decoration:underline;}
	a.acalendar:link{color:#666;text-decoration:underline;}
	a.acalendar:visited{text-decoration:underline;}
	a.acalendar:active{}
	a.acalendar:hover{color:#666;text-decoration:none;}

	a.acontinues{color:#666;text-decoration:underline;}
	a.acontinues:link{color:#666;text-decoration:underline;}
	a.acontinues:visited{text-decoration:underline;}
	a.acontinues:active{}
	a.acontinues:hover{color:#666;text-decoration:none;}

	a.amenu{color:#666;text-decoration:underline;}
	a.amenu:link{color:#666;text-decoration:underline;}
	a.amenu:visited{text-decoration:underline;}
	a.amenu:active{}
	a.amenu:hover{color:#666;text-decoration:none;}

	#container{
		width:850px;
		margin:0 auto 0 auto;
		text-align:left;
	}

	#banner,#subbanner{
		background:url('http://blog.livedoor.jp/sarugane/f6134883.png') no-repeat scroll 0 0;
		height:120px;
	}

	#banner a{color:#fff;text-decoration:none;}
	#banner a:link{color:#fff;text-decoration:none;}
	#banner a:visited{text-decoration:none;}
	#banner a:active{}
	#banner a:hover{color:#fff;text-decoration:underline;}

	#subbanner a{color:#fff;text-decoration:none;}
	#subbanner a:link{color:#fff;text-decoration:none;}
	#subbanner a:visited{text-decoration:none;}
	#subbanner a:active{}
	#subbanner a:hover{color:#fff;text-decoration:underline;}

	h1,h2,h3{margin:0;padding:0;}

	.blogtitle{
		font-size:26px;
		font-weight:bold;
		padding:70px 0 0 15px;
		text-align:left;
		letter-spacing:2px;
	}

	.description{
		color:#fff;
		font-size:12px;
		font-weight:bold;
		padding:0 0 0 15px;
		text-align:left;
		letter-spacing:2px;
	}

	#navigation{
		text-align:left;
		padding:0px 0px 3px 10px;
		font-size:x-small;
		font-weight:bold;
	}

	#content{
		width:600px;
		float:right;
	}

	.blog{
		margin:0px 20px 10px 10px;
	}

	.date{
		color:#fff;
		font-size:x-small;
		font-weight:bold;
		padding:5px 10px 5px 10px;
		height:20px;
		background:#999;
	}

	.blogbody{
		margin:0 0 0 0;
		background:#f5f5f5
	}

	.title{
		color:#000;
		font-size:x-small;
		font-weight:bold;
		height:10px;
		padding:5px 5px;
	}

	a.atitle{color:#000;text-decoration:none;}
	a.atitle:link{color:#000;text-decoration:none;}
	a.atitle:visited{text-decoration:none;}
	a.atitle:active{}
	a.atitle:hover{color:#000;text-decoration:underline;}

	.main{
		font-size:x-small;
		line-height:135%;
		margin:20px 5px 15px 0px;
		padding:5px 5px 5px 5px;
		color:#666;
	}

	.main-continues{
		font-size:x-small;
	}

	.posted{
		color:#666;
		font-size:x-small;
		text-align:right;
		margin:0 0 25px 0;
	}

	a.aposted{color:#666;text-decoration:underline;font-weight:bold;}
	a.aposted:link{color:#666;text-decoration:underline;font-weight:bold;}
	a.aposted:visited{text-decoration:underline;font-weight:bold;}
	a.aposted:active{font-weight:bold;}
	a.aposted:hover{color:#666;text-decoration:none;font-weight:bold;}

	.menu{
		color:#666;
		font-size:x-small;
		text-align:right;
	}

	.commetns-container{
		margin:0px 20px 10px 10px;
		background:#f5f5f5
	}

	.comments-head{
		color:#666;
		font-size:x-small;
		font-weight:bold;
		padding:0 0 0 0px;
		height:10px;
	}

	.comments-body{
		font-size:x-small;
		line-height:135%;
		margin:20px 0 15px 13px;
	}

	.comments-post{
		color:#666;
		font-size:x-small;
		text-align:right;
		margin:0 0 25px 0;
	}

	.trackback-url{
		color:#666;
		font-size:x-small;
		font-weight:bold;
		margin:20px 0 15px 13px;
	}

	.trackback-body{
		font-size:x-small;
		line-height:135%;
		margin:20px 0 15px 13px;
	}

	.trackback-post{
		color:#666;
		font-size:x-small;
		text-align:right;
		margin:0 0 25px 0;
	}

	a.atrackback-post{color:#666;text-decoration:underline;font-weight:bold;}
	a.atrackback-post:link{color:666;text-decoration:underline;font-weight:bold;}
	a.atrackback-post:visited{text-decoration:underline;font-weight:bold;}
	a.atrackback-post:active{font-weight:bold;}
	a.atrackback-post:hover{color:#666;text-decoration:none;font-weight:bold;}

	table.form{margin:25px 0 0 13px;}

	label{
		font-size:x-small;
		font-weight:bold;
	}

	#author{width:200px;border:1px solid #666;}
	#email{width:200px;border:1px solid #666;}
	#url{width:200px;border:1px solid #666;}
	#text{width:500px;height:200px;border:1px solid #666;}

	.pagetop{
		font-size:x-small;
		text-align:right;
		margin:0 0 25px 0;
	}


	#links{
		width:230px;
		float:left;
		background:#f5f5f5;
		text-align:right;
		margin-left:0px;
		margin-top:0px;
		padding:10px;
	}

	.calendarhead{
		color:#666;
		font-size:x-small;
		font-weight:bold;
		letter-spacing:2px;
		padding:0px 0 5px 0;
		margin:0 0 10px 0px;
		width:80%;
		border-bottom:1px solid #ccc;
		text-align:left;
	}

	.calendartable{
		margin:0 auto 10px auto;
		width:80%;
		text-align:left;
	}
	
	.calendarweek{color:#fff;font-size:x-small;font-weight:bold;position:center;}
	.calendarwd{padding:2px;background:#ccc;}
	.calendard{empty-cells:show;}
	.calendardbg{}

	.calendar{
		font-size:x-small;
		padding:2px 2px;
		position:center;
	}

	.sidetitle{
		color:#666;
		font-size:x-small;
		font-weight:bold;
		letter-spacing:2px;
		padding:10px 0 5px 0;
		text-align:left;
		border-bottom:1px solid #ccc;
	}

	.side{
		font-size:x-small;
		line-height:135%;
		text-align:left;
		margin:0 0 10px 0;
		padding:5px;
	}

	a.aside{color:#666;text-decoration:underline;}
	a.aside:link{color:#666;text-decoration:underline;}
	a.aside:visited{color:#666;text-decoration:underline;}
	a.aside:hover{color:#666;text-decoration:none;}

	a.arss{color:#666;text-decoration:underline;}
	a.arss:link{color:#666;text-decoration:underline;}
	a.arss:visited{text-decoration:underline;}
	a.arss:active{}
	a.arss:hover{color:#666;text-decoration:none;}
	
	.photo{text-align:center;}
	.nickname{color:#2b5695;font-size:x-small;font-weight:bold;margin:10px 0;}
	.message{font-size:x-small;}

	.quotetable{}
	.quote{color:#666;font-size:x-small;padding:1px;}

	.blogtimes{margin:0 0 10px 0;text-align:center;}

	.powered{
		text-align:center;
		margin:0 0 10px 0;
	}

	.syndicate{
		font-size:x-small;
		text-align:center;
	}
	.checkers{
		font-size:x-small;
		margin-top:10px;
	}

	#footer{
		clear:both;
		background:#f5f5f5;
		color:#000;
		margin:0;
		padding:3px 0 20px;
		text-align:center;
		border-top:#999 1px solid;
	}

sarugane at 17:02 │Comments(13) │TrackBack(12) │Blogの使いかた

トラックバックURL

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

1. SEOから考えるブログのカスタマイズ [ 大学生社長ひろとの挑戦！－まだ限界だなんて認めちゃいないさっ ] 2004年12月15日 02:44

最近ブログのカスタマイズ（レイアウトを変えたり、機能を追加したりすること）にはまっています。結構凝り性なんです。最近、ブログのカスタマイズの仕方について質問を多くいただくので、今日は、そのやりかたを紹介します。といっても、私が参考にし.

2. ブログをカスタマイズしてみた。 [ Let it be.... ] 2005年02月26日 04:05

ライブドアブログの問題点。 1.ブログの検索から個別の記事にとんできたりとか、カテゴリー別のページにはいったとき、トップへの戻り方がわかりにくい。(実はサイトのタイトルがトップページのリンクになっているのだが普通知らない) 2.トップページ以外のページにはす.

3. パン屑リスト・直接編集画面・検索機能の追加 [ ブログでコツコツ儲けよう ] 2005年03月13日 19:40

前回のブログ３カラム化に続いて、今回もブログのカスタマイズに挑戦してみました！   今回の追加機能は   ・渡る世間は○○ダ！！様を参考にさせていただいたパン屑リストの追加   ・前回の３カラム化でもお世話になった小春日和の陽射しの中で様を参.

4. 個別ページにナビゲート [ 小春日和の陽射しの中で ] 2005年03月20日 11:24

「渡る世間は○○ダ！！」さんの記事を参考に個別ページにパン屑リストをつけました。パン屑リストって何？って感じですが、よくサイトページの上の方にあります。ここでは　「トップページ　＞　[カテゴリー名]　＞　[記事名]」としました。個別ページにしか来て.

5. 個別記事からトップ記事へ [ ワクワク♪しましょ！ ] 2005年03月28日 11:27

23日の記事で最後に、個別記事からトップ記事にもどる機能を付けたい！と書いていたのですが、今度はShihoさんのブログでこれに関する事が書かれていました。なんか思った事が回りに伝わっているみたいで、不思議ですね。これも感謝の気持ちを持ち続けたからかな～。

6. Blogカスタマイズの備忘記録 [ たりぃの好きなもの ] 2005年03月31日 21:33

　他のブログを見ているとかっこいい、あんなふうにしてみたいと思うブログをよく見かけます。どうやるのかいろいろ調べたら自分でカスタマイズしてるんですね。　という事で少しやってみました。「ＨＴＭＬやＣＣＳってなんだ？」ってレベルでもやってみればできるもので.

7. パンくずリスト [ カツオの練習実験ブログ ] 2005年05月03日 17:02

パンくずリストを追加してみました。ちなみに、この方のを参考にしています。

8. パン屑リスト [ ブログならできるもん！アフィリエイト裏技 ] 2005年05月10日 00:09

「パン屑リスト」って知ってますか？このブログのタイトル下にあるコレ↓ トップページ > アフィリエイトとは > ASPのメリットデメリットです。これって比較的インターネット上では新参者。ユーザーにとって「自分の居場所」が明確になってとっても便利

9. 個別ページにナビゲーション（パン屑リスト）を付加 [ 備忘録　ランダムウオーク ] 2005年06月16日 23:48

初心者にとって、大変解りやすく。　　思案していたことが解決できました。　　　　　ありがとうございました。

10. 個別ページにナビゲーション（パン屑リスト）を付加 [ 備忘録　ランダムウオーク ] 2005年06月16日 23:49

初心者にとって、大変解りやすく。　　思案していたことが解決できました。　　　　　ありがとうございました。

11. パン屑リストのすすめ [ Pet Lovers Only♪ ] 2006年02月01日 16:18

パン屑リストってはじめ聞いたときは、「パン屑」って言うぐらいだから、しょうもないカスタマイズなんだろうなと思ってた私が無知でした  HPを作成した事がある人は、閲覧している人自身がどこのページにいるのかわからなくならないように、ページの現在位置を知らせて...

12. カスタマイズ8～カテゴリ別と月別アーカイブにもパン屑リストを付ける～ [ Addicted to the Movie and Reading! ] 2006年03月25日 10:29

カスタマイズ3で個別記事にパン屑リストを付けましたが、カテゴリ別と月別アーカイブにも付けてしまいます。 saruganeさんの渡る世間は○○ダ！！の記事“Blogにパン屑リストをつけてみる”を参考にさせていただきました。

この記事へのコメント

1. Posted by kotatama 2004年11月26日 17:42

こんばんは、はじめまして。

現在位置の分かるようなナビをつけたいと思い、
検索でこちらに辿りつきました。
「パン屑リスト」と言うんですね。勉強になりました。

とても分かりやすい説明をして頂き、
早速活用させて頂きました。

ありがとうございました。

2. Posted by sarugane 2004年11月28日 00:21

>kotatamaさん

参考になってよかったです。

ナビゲーションがあると、訪問者だけでなく、

サイトの管理をするときも便利になりますね。

3. Posted by 姫子 2004年12月17日 21:59

ひろとさんのページ経由で知り、ためしにやってみました。

タグが良く分からず、いじりたくてもいじれないところばかりですが、
今後もっと勉強したいと思います

4. Posted by sarugane 2004年12月19日 23:32

>姫子さん

こんにちは。参考になってよかったです。
HTMLは少しずつタグを覚えていくと、いつの間にか
理解することができますね。

5. Posted by アオイ 2005年01月22日 21:53

こんばんは、はじめまして。
こちらの記事を見て、パン屑リストを
つけてみました！

すごくわかりやすくて、ほんとに
助かりました*
とても便利な機能で、しかも簡単に
つけられたのですごく嬉しいです！

ありがとうございましたm(_ _)m

6. Posted by citromacmo 2005年02月01日 18:21

初めまして。
早くナビを付けたい付けたいと前から思ってましたが、パン屑リストと言うんですね、知りませんでした(笑)。参考ページが色々ある中、こちらを参考にさせて頂き、できましたぁ!! ホント助かりました。ただカテゴリーページだけ表示できずで、同じようにやったつもりなのに。。。再構築の時間差攻撃でしょうか？(笑)

7. Posted by sarugane 2005年02月06日 13:33

>citromacmoさん

こんにちは。
livedoor Blogの場合、昔の記事なんかは再構築をしてもなかなか反映されないことがあります。

こういうのがあると混乱しますよね。

8. Posted by ﾌｨｰｶﾞ 2005年04月26日 09:48

初めまして。
「パン屑リスト」参考ページが色々ある中、こちらを参考にさせて頂きました。ありがとうございます。ただカテゴリーページ・月別とも全てには反映されていません。どこか間違っているのでしょうか？すみませんが、ど素人なものでよろしかったら教えていただけませんか？

9. Posted by ﾌｨｰｶﾞ 2005年04月27日 13:20

解決しました。過去の記事を更新したら表示できました。すみませんでした、くだらない質問で・・

10. Posted by sarugane 2005年05月08日 17:56

>フィーガさん

こんにちは。
livedoor Blogでは過去の記事が再構成できない現象がたまにあるようです。

おそらく、Blogの機能改善で仕組みがいろいろ変わっているのが原因だと思われます。

11. Posted by AI 2005年06月19日 22:02

はじめまして。
こちらも記事を参考にさせていただきました。
大きなサイトで見ていたナビのような表記を自分のブログでもつけられたらなぁ、と思っていたのですが、それが出来てとてもうれしいです。
有難うございました。

12. Posted by AQ 2006年02月01日 16:23

トラックバックしました、Pet Lovers Only♪のAQと申します。

ブログを一時休止。今回再開するに当たり、デザイン及び記事を再構築しなおしました。その為、記事のURLが変わってしまったため、トラックバックの貼り直しをさせて頂きました。お手数をおかけしますが、以前のトラックバックを削除していただけましたら助かります。宜しくお願い申し上げます。

13. Posted by りお 2006年03月25日 10:35

はじめまして。
個別記事にパン屑リストを付けるのはすぐに出来たのですが、
カテゴリ別と月別アーカイブにパン屑リストを付けるのに
どうしていいのか良く分からなかったので、
大変参考になりました。
ありがとうございました

この記事にコメントする

名前:
メール:
URL:
	情報を記憶:	評価:	顔星