takabonblog.com

こんにちは!takabonblog.comのたかぼんです。たかぼんが経験してきたことをあなたに少しでもお伝えして少しでもあなたのお役にたてたなら、うれしい限りです。よろしくお願いいたします。

はてなブログ:スマホ版でヘッダー&フッターの非表示方法(Proのみ)

f:id:takabonyade:20191208075946j:plain

こんにちは!takabonblog.comのたかぼんです。

 

はてなブログを開設して11日連続の投稿になります。

 

今日は、はてなブログProを利用している、あなたに向けて記事を書きます。

 

ブログを書いていると、あてがわれた広告などは、ない方がすっきりしますよね。

 

自分のアフィリエイト広告やGoogle AdSenseだったらともかく、まったく自分に関係のない広告はやっぱり非表示にしたいものです。

 

それの方が自分だけの、オリジナルのブログ感がでますもんねぇ~。

 

そこで今回は、せっかく有料のはてなブログProを使うのなら、余分な広告やヘッダー・フッターの非表示の方法を、解説いたします。

 

 

 

 広告を非表示にする方法

 

 まずは、有料版のProを使うのですから、表示したくない広告を非表示にしてしまいましょう。

 

はてなブログのダッシュボードから、「設定」を選択します。

 

最初は「基本設定」が表示されていますが、「詳細設定」をクリックします。

 

画面をずっと下にスクロールして、「広告を非表示」の右の、「はてなによる公告を表示しない」にチェックを入れます。

 

そして画面を一番下までスクロールして、「変更する」という青いボタンをクリックします。

 

これではてなによる広告が非表示になりました。

 

 

PC版のヘッダーとフッターを非表示にする方法

 

 続いて、PC版のヘッダーとフッターを、非表示にする方法です。

 

はてなによる広告の非表示の仕方と、ほぼ同じやり方になります。

 

広告を非表示にするときに、お気付きになられた方もいると思いますが、

 

先ほどの「設定」の画面の中の、「詳細設定」画面から、同じく下方向に画面をスクロールします。

 

「広告を非表示」の下に、「ヘッダとフッタ(PC版)」という項目があります。

 

その右横の「ブログにヘッダを表示しない」と、「ブログにフッタを表示しない」の両方に、チェックを入れます。

 

後は先ほどと同じく、画面を一番下までスクロールして、「変更する」という青いボタンをクリックします。

 

これでPC版のヘッダーとフッターは、非表示になりました。

 

しかし、本題は次の項目です。

 

 

スマホ版のヘッダーとフッターを非表示にする方法

f:id:takabonyade:20191208103910p:plain

 

 実は、はてなブログ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を表示する

 

2つありますが、「スートフォン用にHTMLを表示する」にチェックを入れます。

 

すぐ下のボックスの中に、先ほど赤い文字で記載されたコードを、コピーして貼り付けます。

 

下記の画像を参考にしていただければ、わかりやすいと思います。

 

f:id:takabonyade:20191208104417p:plain

 

最後に上の方の「変更を保存する」という、青いボタンをクリックしてください。

 

これでスマホ版のヘッダーとフッターが、非表示になったと思います。

 

いかがでしょうか?

 

画面がすっきりして、本当に自分のオリジナルブログになった気がしませんか?

 

 

 

まとめ

 

無料のはてなブログから、有料のはてなブログProにすると、「はてなによる公告」を非表示にすることができます。

 

さらにPC版の、ヘッダーとフッターの非表示にする設定もできます。

 

スマホ版では、設定画面からはヘッダーとフッターを非表示にはできませんでした。

 

しかし、「デザイン」→「スマートフォン」→「タイトル下」→「スマートフォン用にHTMLを設定する」にチェックを入れます。

 

その下のボックスの中にCSSのコードを貼り付けます。

 

最後に「変更を保存する」という、青いボタンをクリックして完了しました。

 

僕はこの設定ができたとき、すごくうれしかったです。

 

ブログを毎日書いていると、結構楽しいことにも巡り合えて、本当によかったと思えるようになってきました。

 

うれしい限りです。

 

以上で、

「はてなブログ:スマホ版でヘッダー&フッターの非表示方法(Proのみ)」

を終了致します。

 

最後まで読んで頂きまして、本当にありがとうございます。

 

少しでも、あなたのお役にたてたなら、うれしい限りです。

 

ではまた!さようなら(@^^)/~~~

 

 

www.takabonblog.com

はてなブログの方は

読者登録をお願いします(^_-)-☆

ブログを始めるなら【はてなブログPro】

ドメイン取るなら【お名前.com】

レンタルサーバーなら【ロリポップ】

▼今すぐTwitterをフォローする▼

▼この記事を今すぐSNSにシェアする▼