記事タイトルの下に下線が表示されているのでこれを消します。
 ついでに左が空き過ぎているのでこれも修正。

 スタイルシートも不思議な記述になっていました。
h2 {
margin:10px 0px 5px 0px;
padding: 0px 0px 5px 20px;
text-align:left;
}
.title{
clear:left;
font-size:14px;
border-bottom:solid 1px #9d8e87;
}
.title a{
border:none;
}

 ツッコミどころが多過ぎて途方に暮れます。

 このテンプレートではH2は記事タイトルでしか使っていないので
 クラスを指定する意味はないのです。
 ついでに前回と同様の理由でHタグも排除したい。

 排除したいがまあ待てその前にこれ何とかしろ。
margin:10px 0px 5px 0px;
padding: 0px 0px 5px 20px;

 白背景で画像も凝った装飾もないのに
 なぜマージンとパディングを分けるのだ。
 微妙に空き過ぎな部分があるので調整しつつまずはH2のダイエット。
padding: 10px 0px 5px 10px;
text-align:left;

 どうでもいいけどクラス名がtitleだと
 ブログタイトルなのか記事タイトルなのか自分で混乱するので
 記事タイトルクラス名をptitleに変更してH2と合体。
.ptitle{
padding: 10px 0px 5px 10px;
text-align:left;
clear:left;
font-size:14px;
border-bottom:solid 1px #9d8e87;
}
.ptitle a{
border:none;
}

 待て待て待て!
 ベースで指定しているのでtext-align:left;は不要!
 ついでにそのclear:left;はどこから出てきた!?削除。
 H2でなくなったのでフォントを太字に。
 それよりなにより

 aタグの下線を消すのにborder:none;ってネタですか!?

 text-decoration: none;に書き直し。
 今まで使えていたのがすごい。神様ありがとう。
 修正してみた↓
.ptitle{
padding: 10px 0px 5px 10px;
font-size:14px;
border-bottom:dotted 1px #9d8e87;
font-weight: bolder;
}
.ptitle a{
text-decoration: none;
}

 サイトデザインにあわせて下線は点線に。
 忘れてはいけないのがHTMLの修正。
<h2 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>

<div class="ptitle"><a href="<% article.page_url %>" class="title"><% article.subject %></a></div>

 やましいことしていないサイトならH2に全て入れ込むのが理想。
 私はいかがわしい女なのでこのような記述になった次第。

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

この広告は180日以上新しい記事の投稿がないブログに表示されております。