カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:TECH


FC2のテンプレートを使ってるんですが、ブログ記事表示の際の
タイトルの表示は「ブログの記事タイトル:ブログ名」の表示にしてます。

他にも文字サイズやら色々とCSSを修正してるんですが、
ふと気づくと、ブログの記事タイトルが長くなって改行された際に、
文字が重なってしまっていました;;

blog-css00.png

というわけで、対処を実施したので覚書として。

とりあえず、タイトル部分のHTMLとCSSを確認


このケースで良くあるのが、「text-indent」を設定していたので、
「padding」に設定しなおしましょ、ってケース・・・なんですが、
そういうわけではなさそう。

HTML

<div id="banner">
<h1><a href="http://babyp.blog55.fc2.com/">
iPhoneのFacebookアプリで何人かの友達のプロフィール写真が入れ替わって表示される:なんとなしの日記
</a></h1>
<h2>日記&覚書感覚で継続中・・・(^^)</h2>
</div>


CSS

h1{
padding : 10px 0 0 20px;
color:#555555;
width:900px;
height:50px;
font-weight:normal;
font-size: 24px;
}
h1 a:link,h1 a:visited,h1 a:active{
font-size :24px;
color:#555555;
text-decoration:none;
font-weight:normal;
padding : 0px 0px 0px 20px;
}



まずは、aタグのpaddingがダメだね。


aタグでpaddingをすると、text-indentみたいな動作になってしまうみたいですね。
改行が行われた後の開始場所がh1タグ内の頭から始まってしまうみたいです。

というわけで、aタグ内のpadding部分を修正。

h1 a:link,h1 a:visited,h1 a:active{
font-size :24px;
color:#555555;
text-decoration:none;
font-weight:normal;
padding : 0px 0px 0px 0px;
}


ま、全部0なら消しちゃえよ、って話はありますが、
とりあえず、わかりやすいように書きました。

で、結果がこれ。
blog-css02.png
とりあえず、変なインデントはなくなりました。
が、まだ文字は微妙に重なってる。

文字が重なる時は、line-heightで調整する


h1 a:link,h1 a:visited,h1 a:active{
font-size :24px;
color:#555555;
text-decoration:none;
font-weight:normal;
line-height:1.4em;
padding : 0px 0px 0px 0px;
}


line-heightである程度高さを調整することで、
改行が行われても、正しく表示されるようになりました。
その他も少し微調整しつつ、気持ち良いタイトルに修正出来ました。
blog-css01.png

結果、不満のないタイトル表示にはなったんですが、少し疑問点も。

CSSのbodyタグに「line-height:1.4em;」は設定してあるんですよね。
なんでここの設定が効かないんやろう。。。

タグ : WEB BLOG CSS FC2

Comment

助かりました。

ありがとう。

助かりました^^

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...