前回、ご紹介したアメブロのブログタイトルをCSSで位置と大きさなどを変更する方法より自由度が高く、おそらく間違いのない方法です(笑)
カスタマイズの方法は簡単です
下記のコードをコピーしてアメブロのCCS編集画面でCSSの一番したへ
貼り付け、各数値を変更しプレビューボタンを押して調整
OKだったら「保存」をクリックして完了という流れです。
今回のCSS
/*タイトルの部分*/
#header h1 a{
color:#ffffff; /*文字の色*/
font-size:18px; /*文字のサイズ*/
font-weight:bold; /*文字の太さ*/
line-height:1.15; /*行間*/
margin:0px 0px 0px 0px; /*文字の太さ*/
padding:0px 0px 0px 0px; /*文字の太さ*/
position:relative;
top:105px; /*上からの距離*/
left:490px; /*左端からの距離*/
}
/*タイトルの下の紹介文*/
#header h2 {
color:#ffffff; /*文字の色*/
font-size:14px; /*文字のサイズ*/
font-weight:normal; /*文字の太さ*/
line-height:1.15; /*行間*/
margin:0px 0px 0px 0px; /*文字の太さ*/
padding:0px 0px 0px 0px; /*文字の太さ*/
position:relative;
top:85px; /*上からの距離*/
left:30px; /*左端からの距離*/
}
CSSの説明
#header h1 a (タイトル )と header h2 (タイトル下の説明文)は
数値が違だけの違いです。
marginとpadding ともにすべて0とし、表示位置をリセットしています。
ここでリセットしないとへんな事になる可能性があります。
position:relative;を使って元々の表示位置からどれだけずらして表示するかを
topとleftで指定しています。
ちなみに、上記のCSSに書いてある内容は現在のこのブログのCSSです。
アメブロCSS画面への移動方法

CSS編集画面の一番下に移動した所、
一番下にコピーしたCSSを貼り付けて各数値を変更してそのつど「プレビュー」で確認します。
いい感じになったら「保存」をクリック