ウーパールーパーの智慧

ウーパールーパー、子供、学習、生活お役立ち情報など

はてなブログのブログタイトルの位置の微調整と背景写真の設定

ブログタイトルのヘッダーの背景に写真を設定してみました。

f:id:MisaTamaki:20190316220008p:plain

入れた直後、スマホではこんなふうに見えていました。

 

ブログタイトルとその説明文がどちらも少し右寄りになっている!

 

さらに、ウーパールーパーの顔の上に文字が重なっている!!!

 

という問題点がありました。これを直したくて悪戦苦闘しました。

ブログタイトルの位置を微調整する方法

 

多くのブログを拝見すると、

デザイン>カスタマイズ>デザインCSS欄の下に

 

#title,
#blog-description {
text-align: center;/* 中央寄せ */

}

 

 

を入れれば真ん中になると書いてあったのですが、これを入れても変わらず、

スマホから見ると上の写真の様に少し右寄りになっていました。

 

そこで、

 


/* タイトルの位置 */
.header-image-enable #title {
padding-top: 100px;
padding-right: 22px;

 }

#title,
#blog-description {
font-size: 13px!important;
padding-right: 22px;
}

 

この2つのコードをいれることで微調整することができました。

「padding-right」の部分が右からどのくらい移動するかを指定するみたいです。

 

さらに、

「padding-top: 100px」で上からどのくらい移動するかを指定し、ウーパールーパーの顔に文字が重ならないようにしました!

 

 

 

変更後

f:id:MisaTamaki:20190318235502p:plain 

こんな感じになりました。(スマホ画面)

背景写真の設定方法

 

ちなみにヘッダーの写真の設定方法は、

デザイン>カスタマイズ>ヘッダー>タイトル画像

で「ファイルを選択」し、自分の写真をアップロードします。

位置設定などが出てくるので設定します。↓

 

f:id:MisaTamaki:20190318233652p:plain