仙台を食べつくそう!

40代女子の体験レポ

はてなブログを使っている私がスマホ用ヘッダーを非表示にしてみました。

スマホ用ヘッダーとフッターを非表示にするのはpro限定ですので、そうでない方はスルーしてください。

はてなブログを使っている私が
スマホ用ヘッダーとフッターを非表示にしてみた!

参考にしたサイトはこちら!

moneyreport.hatenablog.com

 

うーん、私のサイトだとできない・・・。

ということで独自の方法を試して、非表示にしてみました。

困ってる人いるかしら?と覚書程度ですが、手順を作ってみました。

 

上記のリンクを参考にしたのにできなかった場合の対処として参考にしてみてねー。 

まずは

参考サイト通りに以下の手順を実施

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

/* フッター表示有無 */
#footer-menu {
display:none;
}

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

 

「デザイン」→「スマートフォン」→「ヘッダ」→「タイトル下」でコードをコピペ。
「スマートフォン用にHTMLを設定する」を選択・・・。

 

やってみたわけなんんですが、

 

f:id:machaomix:20190410195440j:plain

・・・。うまくいかないよー。

 

できなかったので、

以下のコードをCSSに記載

<style>

@media screen and (max-width: 480px){

#globalheader-container {

   display:none; }

}

</style>

 

「デザイン」→「設定」→「{}デザインCSS」でコードをコピペ。
で「変更を保存する」ボタンをクリック!

※すでにスタイルタグを追加している場合は、スタイルタグの中に 赤文字の部分だけをいれてくださいね。

 

うまくいきました!

f:id:machaomix:20190410195213j:plain

 

 

どうして私のサイトはうまくいかないのか・・・。

テンプレートの問題なのでしょうか。

 

とりあえず、覚書。

問題がでたら、そのつど、こちらの記事を更新しますねー。

では!