*kitto*

  

さて、後編です。
前回、画像をアップして設定したはいいものの、高さがおかしくなっていました。
こんな感じ。

一見普通に見えますが、現在のブログの状態と比べると、画像の高さが小さいことがわかります。
なので、後編ではその高さを調整していきます。


調整するのは、ずばり「文字の位置」です。
そこにたどり着くまでに散々迷ったんですけどね
どこにもheightって記述はないしー、どうしたらいいの！？
・・・ふと、ひらめきました。文字を変えてみよう！と。
で、実験は見事成功したわけです。

（ほんとはもっと簡単なやり方があったりして？）

では変更の仕方です。
またまたスタイルシートを編集します。
下のような部分を探してください。

.blogtitle{
font-size:30px;
font-weight:bold;
padding:20px 0px 0px 10px;
text-align:left;
letter-spacing:2px;
}

.description{
color:#fff;
font-size:12px;
padding:4px 0px 0px 35px;
text-align:left;
letter-spacing:2px;
}

blogtitleはそのまま、ブログのタイトル部分です。
このブログで言うなら、「*kitto*」の部分。
descriptionは、ブログの説明部分です。
「ショップkittoの商品紹介と、・・・」の部分。

この文字の位置を指定しているのが、paddingです。
blogtitleの例では
padding:20px 0px 0px 10px;
となっているので、
上から20ｐｘ、右から0ｐｘ、下から0ｐｘ、左から10ｐｘの位置にあるみたいです。
正確に言うと、文字の位置ではなくて、文字が入る領域を示しているみたいですけど。
詳しくはこちらへどうぞ
スタイルシートリファレンス


これを、下のように書き換えました。

.blogtitle{
font-size:30px;
font-weight:bold;
padding:215px 0px 0px 10px;
text-align:left;
letter-spacing:2px;
}

.description{
color:#fff;
font-size:12px;
padding:4px 0px 50px 35px;
text-align:left;
letter-spacing:2px;
}

blogtitleの上の余白を20→215にし、descriptionの下の余白を0→50にしました。
これで、今のようなタイトルになりました
この数値は、試行錯誤の結果です。
スタイルシートの数値を変更したら、その下のトップページのところにプレビューボタンがあります。
変更をすぐ確認することができますので、試行錯誤しながらここぞという場所を探してみてください



＊今までのカスタマイズ記事＊
ブログカスタマイズ１．背景画像
ブログカスタマイズ２．タイトル画像（準備）
ブログカスタマイズ２．タイトル画像～前編～
ブログカスタマイズ２．タイトル画像～後編～（このページ）
ブログカスタマイズ３．サイドバー