【邪魔】はてなブログのデフォルトヘッダー&フッターを消す方法

この記事はPRを含むよ〜!

サムネイル画像

モナリザの画像

はてなブログにデフォルトで設定されてるヘッダーとフッターが邪魔すぎる・・・!!

今回ははてなユーザー向けの記事です。

はてなブログを開設すると、無料版・pro版に関わらずはてな製のヘッダーとフッターが設定されます。

ヘッダー
デフォルトのヘッダー


フッター
ブログを報告って・・・

こういうやつです。画像の赤枠部分ですね。

普通に邪魔だし、良い意味でも悪い意味でも「はてなブログ感」が前面に出すぎです。

かっこ悪いので、消しちゃいましょう。

PC版もモバイル版も消せます。消し方は2つあります。

①display: none ;で見えなくする
②レスポンシブ化してPC版設定を引き継ぐ(proのみ)

方法1,ヘッダー、フッターをdisplay: none;する

display: none ;で消してしまう力技。

display: none ;は簡単に言うと要素をフル無視できるCSSで、ヘッダーフッターに適用することで、これらは存在しないものとして扱われます。

はてなブログのヘッダーとフッターにはそれぞれglobalheader-containerとfooterというidが付けられているので、

デザイン→カスタマイズ→デザインCSS

デザインCSSに

#globalheader-container{
display:none;
}
#footer{
display:none;
}


を追加します。これで目障りなヘッダーフッターは消えます。
ヘッダーを消した
ヘッダーが消えてスッキリしました


フッターも消した



だいぶスッキリしましたね。

方法2,レスポンシブにしてPC版設定をモバイルにも適用する

pro版の方は設定をいじるだけで簡単に消せます。

まず、設定→ヘッダーを表示しない、フッターを表示しないに☑️を入れます。これだけでPC版のブログからはヘッダーフッターが消えます。しかし、まだモバイル版ブログからは消えていないので、もう少し設定をいじります。


デザイン→モバイル設定→詳細設定→レスポンシブにするに☑️



これでPC版ブログがレスポンシブ化され、モバイル版の設定がPC版と共通になります。

先ほど設定したPC用の設定「ヘッダーフッターを表示しない」がモバイルにも適用されるため、ヘッダーフッターが消えます。

ただし、レスポンシブに対応したブログテーマを使っていることが前提条件となるためレスポンシブじゃないテーマを使ってた方は設定する前にブログテーマを変えておきましょう。

ま、今どきレスポンシブ化に対応してないテーマのほうが珍しいのでそこは心配ないと思います。

f:id:supplementgym:20200624154142j:plain

↑これです


以上、はてなのデフォルトヘッダー&フッターを消す方法についてでした!

余談になりますが、今無料版を使っている方は、本格的にブログに取り組む気があるならこれを機にproにアップグレードしてみるのもアリなんじゃないかと思います。

ヘッダーフッターはなんとかなりましたが、無料はてなブログには他にも単語に勝手にリンクを付けられたり(キーワードリンク)、変な広告が勝手に出されたり(自動広告)してしまうといった問題があり、これに関してはアップグレードするしか解決策がありませんからね。

せっかくどこかから名も知らぬ自分の記事を読みにきてくれたのに、無料版を使ってるせいで不便な思いをさせるのは申し訳ないってもんです。

自分のために、そして何より読みにきてくれる人のために、年8500円のコストをかけて快適なブログ環境を用意するのは選択肢として悪くないと思います。