こんにちは、QUATRE（キャトル）です。
今日は、はてなブログのスマホ画面のヘッダ部分の使わない機能を表示しないように設定してみました。
私でも簡単にできたので、まだの方は、よかったらやってみてくださいね！
はてなブログのスマホ表示ヘッダ
はてなブログのスマホの表示は、ヘッダ部分に何も設定していない場合は、通常このようなヘッダが表示されています。
これをデザインから非表示に設定します。
スマホ表示イメージ ビフォーアフター
まずは、今回、変更したところのイメージ図です。
左が変更前で、右が変更後です。
私がいま使っているスマホは i-phone SE。
画面が小さいので、このほうがすっきりして見やすくなったような気がします。
では、さっそく設定の仕方をみてみましょう！
はてなブログのスマホ表示ヘッダを非表示に設定する
デザイン設定
『ダッシュボード』の中ほどにある『デザイン』を開きます。
スマホ表示の設定 ヘッダ
スマホのアイコンをクリックして、『ヘッダ』を開きます。
スマホ表示の設定 タイトル下
ヘッダの中の一番下にある『タイトル下』をクリックします。
下のCSSコード
<style>から</style>までをコピーして貼り付けます。
<style>
/* ヘッダー表示有無 */
#globalheader-container {
display:none;
}
/* 余白調整 */
#container {
padding-top:0px;
}
</style>
変更を保存するを押して確定します。
カスタマイズがなかなか進まないまま半年経過ですが、
次は、みなさんのような、見やすいページになるよう、
テーマの変更を考え中です。
今月中にはなんとか設定しようと思いますが、
途中、レイアウト崩れて読みづらいかもしれませんが、
よろしくお願いします！
