リンクルデザイン変えてみよう

今回は、TOP画像と文字の配置について変更してみましょう。

ＴＯＰ画像の変更の仕方は、リンクルさんのヘルプにも載っているので
割愛させていただきます。

しかし、選ぶ写真によっては、文字と重なってしまい、タイトルが見えにくく
なってしまします。そこで、ブログのタイトルを自分で好きな位置に配置
できたら・・・という思いで紹介しますね。




今回のポイントは　パディング　です。


そして、触っていただくＣＳＳは

/* ブログタイトル */
.blogtitle{
 font-size: 150%;
 line-height: 110%;
 width: 738px;
 display: block;
 margin: 0px;
 padding-top: 5px;/*内部余白上の位置*/
 padding-left: 300px;/*内部余白左の位置*/
 color:#000000;
}

上の余白を少なくしたい場合は、topのあとの余白の数値を小さく
逆に上との間を空けたい場合は、数値を大きめに設定てください。
なるべく右の方に起きたい場合は、leftの数値を大きく。
しかし、大きいと言っても限度がありますかｒ、上記数値は、このブログの
設定になりますので、イメージを見て数値の調整をしてください。


.blogtitle a{color:#000000;text-decoration:none;font-weight:bold}
.blogtitle a:link{}
.blogtitle a:visited{}
.blogtitle a:active{}
.blogtitle a:hover{text-decoration:underline}


ここは、ブログタイトルの色を設定します。
本来は、.blogtitle　のcolorで設定するのですが、このブログ
タイトルには、リンクがつけられているため、上記の　color:#000000;
だけ変更しても変わりません。なので、こちらでも色の変更をしておいて
ください。

/* ブログ詳細 */
.description{/*ブログタイトル下説明文*/
 color: #FFFFFF;
font-weight:bold;/*追加太字の設定です*/
 width: 738px;
padding-left: 400px;
font-weight:bold;/*追加太字の設定です*/

}

ブログタイトル下の説明文です。
こちらも、左からの距離を開けたい場合・・leftのところの数値を変更してください。
そして、今回は、変更するだけでなく、新たに自分でデザイン記述を追加してみました。
といっても、　【太字】の設定なんですけどね。　font-weight（フォント－ウエィト）
少し　字を太くすることで、文字が見やすくなるということもありますしね。＾＾


文字の色などは、colorのところのコードを変更してください。



本当は、画像の作成方法もご説明できれば、いいんですが、
ソフトがペイントでは、役不足なので・・・
自分でＴＯＰ画像作れたらもっと、楽しくなるのにね。

写真加工が出来たら、もっと、もっとブログをキレイにカスタマイズできますよ。



次回は、BODYの背景に画像の指定をしてみましょう！


(〟-_・)ン?どういうこと？って方は、私の本館ブログのスクロールしても
動かない猫の画像のような設定をしてみましょう！