だーしゃのCSS講座　ブログタイトルの位置を変更してみよう！

2005年07月21日 23:57

だーしゃのCSS講座　

第５回ブログタイトルの位置を変更してみよう！

さっそくですが、今日は前回の続きと言う事で、
ヘッダーにあるブログタイトルの位置の変更を変更をレクチャーいたします。
これも特に難しくはありませんよ～（＾＾）

まずはスタイルシート内の下記記述を探して下さい。
それがブログタイトルの設定を行うスタイルシートのクラスです。

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

■text-align

まず赤文字のtext-align:left;に注目！
これでタイトル文字が左寄せなのか右寄せなのかを最初に判断します。
これはもちろんleftなので左寄せですよ。

←左寄せ

■padding

そしてお次はpadding:20px 0px 0px 10px;に注目。
これが位置指定のスタイルシートなのですよ。
padding、これは余白を空けるという意味があります。

そして数字につきましては、
padding:20px 0px 0px 10px;
padding:　上　　右　　下　　左　　;
と言うように対応しております。

図に表すとこんな感じ。

そう用はこのpaddingの数字をいじればタイトルの位置を変更する事ができます。たとえば↓
padding:20px 0px 0px 100px;
と入力すると。。。

左の余白が１００pxあきました！

さらに上の余白を80ｐｘにしてみると。。。
padding:80px 0px 0px　100ｐｘ；

と言う風な感じなのです！これなら誰でも簡単にタイトルの位置を変更する事ができますね！
こちら正しい認識といたしましては、こうなっています↓

こうやって場所を変えていくんですね（＾＾）！

■説明文について
上記とまったく同じ方法でブログの説明文も移動できます。

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

これで自由にブログタイトルや説明文を入れることができますので是非ご活用ください。

今回はちょっと長かったかな（＾＾；

でわでわわからない所があれば聞いてくださいね~。

▼CSS講座

2006-04-11 だーしゃのCSS講座　写真に自動で白縁をつけたい！

2005-12-29 だーしゃのCSS講座　引用文に色を付けてみよう！

2005-09-02 だーしゃのCSS講座　線のカスタマイズしよう！

2005-07-28 だーしゃのCSS講座　背景画像及び背景色を変更してみよう！

2005-07-21 だーしゃのCSS講座　ブログタイトルの位置を変更してみよう！