ブログタイトルのヘッダーの背景に写真を設定してみました。
入れた直後、スマホではこんなふうに見えていました。
ブログタイトルとその説明文がどちらも少し右寄りになっている!
さらに、ウーパールーパーの顔の上に文字が重なっている!!!
という問題点がありました。これを直したくて悪戦苦闘しました。
ブログタイトルの位置を微調整する方法
多くのブログを拝見すると、
デザイン>カスタマイズ>デザイン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」で上からどのくらい移動するかを指定し、ウーパールーパーの顔に文字が重ならないようにしました!
変更後
こんな感じになりました。(スマホ画面)
背景写真の設定方法
ちなみにヘッダーの写真の設定方法は、
デザイン>カスタマイズ>ヘッダー>タイトル画像
で「ファイルを選択」し、自分の写真をアップロードします。
位置設定などが出てくるので設定します。↓