ヘッダーの行間・行の高さを調整する;FC2ブログ・プチカスタマイズ   

ヘッダーの行間・行の高さを調整する|FC2ブログ・プチカスタマイズ

  このページはFC2ブログ・プチカスタマイズの ・FC2ブログのテンプレートカスタマイズ | ヘッダー部分のカスタマイズ| ヘッダーの行間・行の高さを調整する に関する情報を紹介しています。
  FC2ブログ・プチカスタマイズは、FC2ブログをちょっとだけ改造して、使い易くします。  FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。 このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。  FC2ブログを楽しみましょう。

 


 
 
Top Page > スポンサー広告 > ヘッダーの行間・行の高さを調整する・FC2ブログのテンプレートカスタマイズ > ヘッダー部分のカスタマイズ > ヘッダーの行間・行の高さを調整する


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking

このエントリーをはてなブックマークに追加

 今日は、ブログのヘッダー部分の文字の行間のカスタマイズ。

 以前の『FC2ブログ・プチカスタマイズ』ブログのヘッダーは、h1に指定された文字数が多くなると、行間がうまく設定されていなかったので、ヘッダー部分の行間設定をしてみた。

 

以前のヘッダーのスタイルシート

ヘッダーの行間調整前⇒以前のヘッダー。

 文字数が多くなると、H1に設定した文字の行間が詰まったように見える。

/*head要素              */
#headBlock {
  width: 888px;
 margin: 5px 0px 0px 0px; padding-top: 0px;
 text-align: left;
 border: 1px solid #ff8899;
 background-color: #FFCCCC;
}
html>#headBlock {
 width:888px;margin-top:5px;padding-top:0px;
 
}
html>h1 {
     font-size: 135%; margin: 15px 10px 10px 10px; padding: 10px;
}

 

行間設定後のヘッダー部分のスタイルシート

  ヘッダーの行間調整済み⇒ヘッダー部分の行間を調整してみた。

 文字数が多くなっても、ちゃんと行間が確保される。

/*head要素              */
#headBlock {
  width: 888px;
 margin: 5px 0px 0px 0px; padding-top: 0px;
 text-align: left;line-height: 1;
 border: 1px solid #ff8899;
 background-color: #FFCCCC;
}
html>#headBlock {
 width:888px;margin-top:5px;padding-top:0px;
 
}
html>h1 {
     font-size: 135%; margin: 15px 10px 10px 10px; padding: 10px;
}

 

行間設定の方法

 行間設定は『line-height:』で設定する。

 『line-height:』は行の高さを設定する。

・line-height: 1; ⇒文字サイズの1倍の行間

・line-height: 1em; ⇒文字サイズの1倍の行間

・line-height: 100%; ⇒文字サイズの1倍の行間

 数字が大きくなるほど行の高さが高くなるので、行間が開くことになる。



サイト内の同タグへのリンク: FC2  ブログ  テンプレート  カスタマイズ  ヘッダー  行間  行の高さ 
他のサイトへのタグリンク : FC2 ブログ テンプレート カスタマイズ ヘッダー 行間 行の高さ

web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking
このエントリーをはてなブックマークに追加
関連記事リスト
  カテゴリ名:[ヘッダー部分のカスタマイズ]
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://tadameru2.blog91.fc2.com/tb.php/136-400410e0
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。