（こちらの記事は2021年8月27日に追記しています。）
こんにちは！takabonblog.comのたかぼんです。
「はてなブログ」を開設して11日連続の投稿になります。
今日は、「はてなブログPro」を利用している、あなたに向けて記事を書きます。
ブログを書いていると元からついている広告などがあると見にくいので、ない方がスッキリしますよね。
自分のアフィリエイト広告やGoogle AdSenseだったらともかく、まったく自分に関係のない広告はやっぱり非表示にしたいものです。
それの方が自分だけの、オリジナルのブログ感が出ますもんねぇ～。
というわけで今回は『【はてなブログPro】スマホ版でヘッダー＆フッターの非表示方法（初心者向け）』について解説させていただきたいと思います。
【目 次】
広告を非表示にする方法
まずは、せっかく有料版の「はてなブログPro」を使うのですから、表示したくない広告を非表示にしてしまいましょう。
はてなブログのダッシュボードから、「設定」を選択します。
最初は「基本設定」が表示されていますが、「詳細設定」をクリックします。
画面をずっと下の方ににスクロールして、「広告を非表示」の右の、「はてなによる公告を表示しない」にチェックを入れます。
そして画面を一番下までスクロールして、「変更する」という青いボタンをクリックします。
これではてなによる広告が非表示になりました。
PC版のヘッダーとフッターを非表示にする方法
続いて、PC版のヘッダーとフッターを、非表示にする方法です。
はてなによる広告の非表示の仕方と、ほぼ同じやり方になります。
広告を非表示にするときに、お気付きになられた方もいると思いますが、
先ほどの「設定」の画面の中の、「詳細設定」画面から、同じく下方向に画面をスクロールします。
「広告を非表示」の下に、「ヘッダとフッタ（PC版）」という項目があります。
その右横の「ブログにヘッダを表示しない」と、「ブログにフッタを表示しない」の両方に、チェックを入れます。
後は先ほどと同じく、画面を一番下までスクロールして、「変更する」という青いボタンをクリックします。
これでPC版のヘッダーとフッターは、非表示になりました。
しかし、本題は次の項目です。
スマホ版のヘッダーとフッターを非表示にする方法
実は、はてなブログProでは、スマホ版のヘッダーとフッターの非表示にする設定は、準備されていません。
なんやねん！それを先に言わんけ～！
ごめんなさい<m(__)m>
しかし、がっかりしないでください！
設定操作にはなくても、有料版のProでは、HTMLやCSSのコードを多少触ることができるので、やり方があるのです。
HTMLやCSSのコードといわれると、さっぱりわからな～い！
と言う方もいるとは思います。
でも大丈夫です。
簡単です！
CSSのコードを、コピーして貼り付けるだけでできます。
貼り付けるコードは、下の赤い文字で書かれたコードです。
<style>
/* ヘッダー表示有無 */
#globalheader-container {
display:none;
}
/* フッター表示有無 */
#footer-menu {
display:none;
}
/* 余白調整 */
#container {
padding-top:0px;
}
</style>
これを所定の位置に、貼り付けるだけでできあがりです。
貼り付ける場所は、「ダッシュボード」から、「デザイン」をクリックします。
左上に、「デザインテーマ」と、「カスタマイズ」と、「スマートフォン」の選択ができるマークがあります。
その中の「スマートフォン」をクリックして下さい。
するとスマホのデザイン設定の画面に、切り替わります。
次に、「ヘッダ」をクリックします。
左のメニューを下方向にスクロールさせると、「タイトル下」というところがあります。
- PCと同じHTMLを表示する
- スマートフォン用にHTMLを表示する
２つありますが、「スートフォン用にHTMLを表示する」にチェックを入れます。
すぐ下のボックスの中に、先ほど赤い文字で記載されたコードを、コピーして貼り付けます。
下記の画像を参考にしていただければ、わかりやすいと思います。
最後に上の方の「変更を保存する」という、青いボタンをクリックしてください。
これでスマホ版のヘッダーとフッターが、非表示になったと思うのでご確認ください。
いかがでしょうか？
画面がすっきりして、本当に自分のオリジナルブログになった気がしませんか？
まとめ
この記事では『【はてなブログPro】スマホ版でヘッダー＆フッターの非表示方法（初心者向け）』について解説させていただきました。
無料の「はてなブログ」から、有料の「はてなブログPro」にすると、「はてなによる公告」を非表示にすることができます。
さらにPC版の、ヘッダーとフッターの非表示にする設定もできます。
スマホ版では、設定画面からはヘッダーとフッターを非表示にはできませんでした。
しかし、「デザイン」→「スマートフォン」→「タイトル下」→「スマートフォン用にHTMLを設定する」にチェックを入れます。
その下のボックスの中にCSSのコードを貼り付けます。
最後に「変更を保存する」という、青いボタンをクリックすることでスマホ版の画面のヘッダーとフッターが非表示にされます。
筆者はこの設定ができた時すごくうれしかったです。
ブログを毎日書いていると結構楽しいことにも巡り合えて、本当によかったと思えるようになってきました。うれしい限りです。
『【必見！】ブログで収益を得るためにはアフィリエイトのASPに登録することをおすすめする３つの理由』についてはこちらからどうぞ。
最後までお読みいただきありがとうございました。
感謝いたします。
少しでもあなたのお役に立てたらうれしいです。
ではまた！
はてなブログの方は
読者登録をお願いします(^_-)-☆
▼今すぐTwitterのフォローをする▼
▼ブログランキングに参加しました▼
▼この記事を今すぐSNSにシェアする▼
