QUATRE(キャトル)の庭

アシュタンガヨガをしているヨギーニのQUATRE(キャトル)です。生活のヒントになるような情報を発信しています。

はてなブログのスマホ表示見やすくヘッダをカスタマイズしてみる〜ヘッダ編

こんにちは、QUATRE(キャトル)です。

 

今日は、はてなブログのスマホ画面のヘッダ部分の使わない機能を表示しないように設定してみました。

 

私でも簡単にできたので、まだの方は、よかったらやってみてくださいね!

 

はてなブログのスマホ表示ヘッダ

はてなブログのスマホの表示は、ヘッダ部分に何も設定していない場合は、通常このようなヘッダが表示されています。

f:id:QUATRE:20200301151834j:image

これをデザインから非表示に設定します。

スマホ表示イメージ ビフォーアフター

まずは、今回、変更したところのイメージ図です。

が変更で、が変更です。

 

私がいま使っているスマホは i-phone SE。 

画面が小さいので、このほうがすっきりして見やすくなったような気がします。


f:id:QUATRE:20200301150208j:image   f:id:QUATRE:20200301150205j:image

 

では、さっそく設定の仕方をみてみましょう!

 

はてなブログのスマホ表示ヘッダを非表示に設定する

デザイン設定

『ダッシュボード』の中ほどにある『デザイン』を開きます。

f:id:QUATRE:20200301153117p:plain

スマホ表示の設定 ヘッダ

スマホのアイコンをクリックして、『ヘッダ』を開きます。

f:id:QUATRE:20200301153718p:plain

スマホ表示の設定 タイトル下

ヘッダの中の一番下にある『タイトル下』をクリックします。

f:id:QUATRE:20200301153842p:plain

下のCSSコード

<style>から</style>までをコピーして貼り付けます。 

<style>
/* ヘッダー表示有無 */
#globalheader-container {
display:none;
}

 

/* 余白調整 */
#container {
padding-top:0px;
}
</style>

 

f:id:QUATRE:20200227073147p:plain 

『変更を保存する』を押して、確定するのを忘れないように!

 

カスタマイズがなかなか進まないまま半年経過ですが、

次は、みなさんのような、見やすいページになるよう、

テーマの変更を考え中です。

今月中にはなんとか設定しようと思いますが、

途中、レイアウト崩れて読みづらいかもしれませんが、

よろしくお願いします!

 

 

f:id:QUATRE:20200107083010j:plain