			カンタン！ブログをはじめよう

HOME > Blog カスタマイズ > タイトルに個別ページへのリンク

タイトルに個別ページへのリンク

2005年03月09日 AQ

Pet Lovers Only♪の毎日出している記事のタイトルにカーソルを持っていくと、個別記事にリンクが張られている事にお気づきでしょうか？『各投稿記事のタイトルをクリックすると、個別記事にジャンプするなり～』でございます

"別にこの部分（タイトル）をクリックして個別記事に飛ばなくても、時間のところやコメントのところのリンクなどをクリックすれば、個別記事の本文に飛ぶじゃん"っておっしゃいますが、あぁ恐ろしやネット習性！しらずうちに、タイトルのところにカーソルを合わせている自分がいる・・・ということで、この非常に便利なチップスをご利用させていただく事になりました。

提供元は、「弱小エンジニアの小言」のtakoashiさん。いつもお世話になっております。文章に性格の優しさが滲み出ています。非常にわかりやすい説明をなさっておられるのですが、今回は基本的な文章をお借りして、このブログサイトに設置した方法を掲載させていただきます。

■ 提供元：
「弱小エンジニアの小言」 > タイトルに個別ページへのリンクをつける

トップページ、カテゴリー別アーカイブ、月別アーカイブのHTMLテンプレートをそれぞれ編集し、その後CSSに新たなスタイルを追記します。

各HTMLページ（個別記事のページは当然除きます）の
<$ArticleTitle ESCAPE$> の部分を、

のように変更します。これだけで個別記事に飛べるようにはなるのですが、このままではタイトルに追加で貼られたリンクタグ（ <a> タグ）へのスタイル指定がなされていないので、見栄えが悪くなります。

そこで、CSS（スタイルシート）にそのリンクタグに対しての新たなスタイルを追記することで、この現象を解消します。下記に記載してある例題の方法を参考に、それぞれの設置をおこなって下さい。

例：それぞれのHTMLテンプレートの変更点

※ これと同じものを、それぞれのHTMLページに記述して下さい。（個別記事のページは設定しなくても良いですよ・・・どちらでも良いですけど^^; ）
※ 実際には改行しないで一行で記述して下さい。このブログの横幅がせまくて改行されてるだけですから

例：スタイルシート（CSS）に、以下の指定を追記します。

.title a{}
.title a:link{color:#FFFFFF; text-decoration:none;}
.title a:visited{color:#FFFFFF; text-decoration:none;}
.title a:active{color:#FFFFFF; text-decoration:none;}
.title a:hover{color:#FC4128; text-decoration:none;}

※ 上記スタイル指定のフォントのカラーや下線などの設定は、自分の好みの設定に変更してください。
※ 実際には改行しないで一行で記述して下さい。

すべての設定が終わったあと、Blogの再構築が必要となります。手軽なカスタマイズの割には、すごく便利なこのチップス！おすすめです。頑張って下さい。

	：Name
	：Mail
	：URL
	情報を記憶：書き込みのリセット：

	ご利用のブラウザ、設定ではご利用になれません。