渡る世間は○○ダ！！:Blogで記事のタイトルに個別記事へのリンクを貼ってみる

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

2004年08月08日

Blogで記事のタイトルに個別記事へのリンクを貼ってみる

Blogを使っていて、何気なく記事タイトルの上にマウスを乗せている自分に気が付きました。

そかそか、｢わざわざ記事本文を表示させるために投稿時間のリンクをクリックするのは面倒だな～。｣というのが無意識にそうさせたんでしょうか。

というわけで、記事のタイトル部分に個別記事を表示させるリンクを貼り付けてみたいと思います。

やり方はHTMLのタイトル部分を表示させる箇所で、個別記事へのリンクを自動生成させるだけです。

まず、新しくリンクさせる部分のデザインをCSSに記述します。名前は適当に｢a.atitile｣としました。

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;}

で、HTMLで記事のタイトルを作成するタグの前後に<a>タグを追加します。

<div class="blogbody">
<a name="<$ArticleId$>"></a>
<h3 class="title">
<a class="atitle" href="<$ArticlePermalink$>">
<$ArticleTitle ESCAPE$>
</a>
</h3>
太字の部分を追加します。

これだけでタイトルにリンクが貼れます。トップページだけでなく、カテゴリ別アーカイブや月別アーカイブにも同じように設定することが可能です。

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

・トップページのHTML_v002

<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">

            <!-- Blog Body  -->
              <div class="blog">

                <!-- Loop Start -->
                  <IndexArticlesLoop>

                    <$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>
                        <IfArticleCategory>│<a class="aposted" href="<$ArticleCategoryUrl$>"><$ArticleCategory ESCAPE$></a></IfArticleCategory>
                      </div>
                    </div>

                  </IndexArticlesLoop>
                <!-- Loop End -->

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


          <!-- Sidebar Space -->
            <div id="links">
              <$PluginList$>

              <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="" border="0" align="center" class="checkers">
                  <tr>
                    <td><img src="http://blog.livedoor.com/img/usr/cmn/icon_cks.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをチェッカーズに追加"></td>
                    <td><a href="<$AddCheckers$>" target="_blank">このBlogを<br>チェッカーズに追加</a></td></tr>
                </table>
            </div>

          <!-- Footer Space -->
            <div id="footer"></div>
      </div>
  </body>
</html>

・月別アーカイブのHTML_v003

<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">

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

              </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="" border="0" align="center" class="checkers">
                  <tr>
                    <td><img src="http://blog.livedoor.com/img/usr/cmn/icon_cks.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをチェッカーズに追加"></td>
                    <td><a href="<$AddCheckers$>" target="_blank">このBlogを<br>チェッカーズに追加</a></td></tr>
                </table>
            </div>

        <!-- Footer Space -->
          <div id="footer"></div>
      </div>
  </body>
</html>

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

<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">

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

        <!-- Footer Space -->
          <div id="footer"></div>
      </div>
  </body>
</html>

・スタイルシート_v002

@charset "EUC-JP";

	body{
		color:#666;
		margin:0;
		text-align:left;
		width:100%;
		height:100%;
		background:#fff url('http://blog.livedoor.jp/･ｿ･､･ﾈ･・霖・) 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/･ｿ･､･ﾈ･・霖・ﾎﾇﾘｷﾊ') 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;
	}

	#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{
		position:absolute;
		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;
		border-bottom:1px solid #ccc;
		text-align:left;
/*		background:url('/_img/orchestra/orchestra_i.gif') no-repeat scroll 0% 10px;*/
	}

	.calendartable{
		margin:0 auto 10px auto;
		width:100%;
		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:xx-small;font-weight:bold;margin:10px 0;}
	.message{font-size:xx-small;}

	.quotetable{}
	.quote{color:#666;font-size:xx-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;
	}

sarugane at 23:13 │Comments(10) │TrackBack(3) │Blogの使いかた

トラックバックURL

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

1. 本日の変更点9/21・・・見てもらいやすく [ なんとか続ける ] 2004年09月22日 09:48

また参考にさせていただきました。

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

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

3. プチカスタマイズを一度にたくさん part1 [ Trial and Error ] 2005年02月12日 20:47

【備忘録その７】細かなところをいろいろ前編トップページ以外へのサイドバー表示（個別記事へのサイドバーの表示方法参照）と３カラム化（３カラム化のしかた参照）が終わって、とりあえず全体の見栄えはガラっと変わった。で、次にしたのは細かなところ。細かいと言

この記事へのコメント

1. Posted by keyboard 2004年08月11日 01:45

参考に（というかそのまま利用）させて頂きました。
ありがとうございます。

2. Posted by sarugane 2004年08月11日 09:55

使っていただいてありがたいです。
これからもいろいろ実験して、紹介していきたいと思います。

3. Posted by takoashi 2004年08月28日 12:03

こんにちは、takoashiです。
トラックバックどうもです。

そっくりな記事ですね。
ちょっとびっくり。
みんな考えることは同じですね。

4. Posted by sarugane 2004年08月28日 12:16

こんにちは、takoashiさん。
コメントありがとうございます。

実際にやってみるとこれがなかなか便利なんですよ！
もう元には戻せません･･･。

5. Posted by takoashi 2004年08月28日 13:32

どれだけ、もともとに近づけてリンクだということが
わかるようにするところがむずかしいですね。
うちのブログもなんとかうまく設定できました。

h3タグをaタグで囲むと簡単にうまくいくんです。
発想の転換が必要･･･

6. Posted by sarugane 2004年08月29日 01:57

確かにデフォルトはリンクされていないので、どう見せるか難しいですね。
ただ、タイトル上にマウスオーバーするのは無意識で皆さんされているはずですので、個人的にはマウスオーバーでアンカーを付けたり色を変えたりするだけでOKかと思っています。

7. Posted by citromacmo 2005年02月02日 19:24

こんにちは。
パン屑リストに続いて、こちらも参考にさせて頂きました。ほんと、重ね重ねありがとうございます。勢い余って？個別記事にも設定しまい、とても無意味なことしてしまいましたが(笑)。。。

8. Posted by sarugane 2005年02月06日 13:39

>citromacmoさん

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

このカスタマイズをして慣れてしまうと、実装していない他のサイトが、ちょっと不便に感じてしまいますね。

9. Posted by ハニー 2005年05月26日 13:48

こんにちわ。
参考にさせていただきました。
難しそうだな～と思ってしばらく様子見してたんですが
とてもわかりやすく書いてあったので
私にもできました！よかった！

10. Posted by sarugane 2005年05月28日 15:42

>ハニーさん

こんにちわ。
HTMLは慣れるまでよくわからない記号の集まりに見えますが、そのうちなんとかなるもんです！

この記事にコメントする

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