だてＢＬＯＧ編集長「だておとこ」のブログ

どうも月に1回のペースになりつつある「ブログ活用テクニック」。
参考になっているのだろうか？？？
と思いつつも頑張って更新しますので興味のある方はお付き合い下さい m( __ __ )m



前回が「ブログタイトルのカラーを変えてみよう」というテーマだったので
その流れで今日は「テンプレートのタイトルの位置を移動してみよう！」
です。では早速説明しましょう


まずはスタイルシート内から下記記述を探します。
（スタイルシートまでの辿り着き方はこちらの（3）を参照）
それがブログタイトルの設定を行うスタイルシートです


―――――――――――――――――――――――――――――――――――――

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

―――――――――――――――――――――――――――――――――――――

◆チェックその1　text-align:left;

赤文字のtext-align:left;に注目ー。
まずはこれでタイトル文字が左寄せなのか右寄せなのかを確認します。
これはleftなので左寄せということですね。

↑このように左に寄せている設定です。



◆チェックその2　padding

そしてpadding:20px 0px 0px 10px; 。
コレスゴク大事。これが位置指定のスタイルシートとなるわけです。
「padding」とは「余白を空ける」という意味です。

そしてそのあとの数字ですが
padding:20px 0px 0px 10px;
padding:　上　　右　　下　　左　　

という感じで意味を表しています。
図で表すとこんな感じ。

このpaddingの数字をいじればタイトルの位置を変更する事ができます。
例えば　　　padding:20px 0px 0px 200px;　　　と変えてみると・・・

左の余白が2００px分空きます。



同じように上に余白を空けたい場合は、
padding:●●px 0px 0px　100ｐｘ；

●●の部分に数字を入力するとタイトルが下に下がります。
（だいたい100ｐｘくらいで真ん中あたりにきます）


これで誰でも簡単にタイトルの位置を変更する事ができますね！


◆チェックその3　説明文について

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

―――――――――――――――――――――――――――――――――――――――

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

――――――――――――――――――――――――――――――――――――――――

今回、気分転換もかねて真ん中に説明文を移動します。
両サイドを180ｐｘずつで入力すると・・・

こんな感じです！


ちなみに「初めの状態に戻そうー」となった時に、元の数字を
覚えていないと微妙に面倒くさくなるのでそこは注意です。。。


いかがでしたでしょうか？
案外簡単にできますのでトライしてみてください