ブログタイトルと説明文の移動方法

はじめに

ヘッダーに画像いれたりして、ブログのタイトルや説明文が見づらくなったりする場合があります。

そんな時に便利なブログのタイトルと説明文の移動の方法です。

簡単なので挑戦してみましょう。

※文字の大きさを変更したい場合は「ブログ文字のサイズ変更方法( ´▽｀)bここを読んでみよう！ 」をお読み下さい。

イメージ

①が移動前②が移動後です。
赤の→の分だけ移動させました。

　　　　　　　　　　　　　　　①

　　　　　　　　　　　　　　　　　　　　　②

ブログタイトルと説明文の移動方法

手順はコピーしてペーストするだけですので簡単です。

①下記CSSをコピーして下さい

margin:20px 0 0 100px;　/* 上、右、下、左の余白 */

※説明「margin」とは余白の意味です。
数字の「20、0、0、100」は左から「上、右、下、左」の余白をとるpx（距離）となります。

②CSS編集画面に次の場所を探します。

/* (1-2) ブログタイトル文字
--------------------------------------------*/


/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}

③この場所にコピーしたコードをペーストします。※赤字が追加した場所です。

/* (1-2) ブログタイトル文字
--------------------------------------------*/


/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
margin:20px 0 0 100px;
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
margin:20px 0 0 100px;
}

後日追記↓
設定場所により下記も可能
ＣＳＳ最下部に追記

/* skinTitle ブログタイトル文字 */
.skinTitleArea {
margin: 150px 0 0 0; /* 左から上右下左 */
}
/* skinDescription ブログの説明文字 */
.skinDescriptionArea {
margin: 0px 0 0 0; /* 左から上右下左 */
}

④保存をして確認して完了です。
表示を確認するなどをしながら好みの場所に移動するように調整して下さい。