はてなブログ使い方ーモバイル表示のヘッダー、フッターを非表示にする件

　モバイル版でブログを表示しようとしたときにヘッダーとフッターが一番最後の方に表示されるため、なかなか画面がアクティブにならず閲覧性が悪いなあ、と以前から考えていました。今回はモバイル表示でのヘッダー、フッターを非表示にしてみましたた、という件です。

 　実ははてなブログをpro（通称はてブロpro）にすることで受けることが出来るサービスのひとつとして、ヘッダーとフッターを非表示にすることができますが、これはPC版での表示に限定されています。ですから、モバイル版はたとえはてブロproにして設定を変更したとしてもそれが反映されず、ヘッダーとフッターは表示されたままです。

　↓のような感じ

　そこでなんとかモバイル版の表示でヘッダーとフッターを消してブログ閲覧性を高めたいと思い、いろいろとやってみました。

　先に言っておきますと同じようなことを過去にやったことがある人は結構いるみたいで、関連するいくつかのブログを参考にさせていただきました。末尾にまとめてリストアップしています。

　ではまいりましょう。

１．モバイル版でどのように表示されるのかをパソコンで確かめる方法

　まずこれを押さえておくと作業上、なにかと便利だと思います。Google Chromeをウェブブラウザとして使用している前提にはなりますが、右上の設定(①)、その他のツール(②)、デベロッパーツール(③)を順にクリックします。

　すると次のような画面になります。表示画面そのまま表示された左の部分、右上や右下にはコンピュータ言語っぽい文字が羅列された部分が表示された画面に変わります。画面割りは特に今は気にせず、ここで右上部分の上枠のスマホ形をした部分をクリックします。

　そうするとスマホと同様の縦横サイズの表示に変換されるので、一度画面を再読み込みしリフレッシュします（F5を押せばOK）。すると、　

左の表示がモバイル版っぽく変化しました。ちなみにこの表示はスマホと必ず全く一緒になるとは限らないようです。細かく合わせこむためにスマホの型番など詳細を設定する方法もありますが、ひとまずはこれでOKです。

２．はてブロproにてヘッダーやフッターの表示を書き換えるやり方

　ここからは、はてブロに移って操作をしていきます。まずダッシュボードでデザインをクリックします。

画面左部のメニューがデザインに変わります。ここでスマホマークをクリックします。

左側のメニューがアクセントカラー、ヘッダ、記事、フッタ、詳細設定、という風になっています。ここでヘッダをクリックするとメニューが展開しますので適当にスクロールしていくと、、

タイトル下という項目がありました。ここで「スマートフォン用にHTMLを設定する」にチェックを入れて空欄部分に次の文章を入力します。

<style>
#globalheader-container{display:none;}

#container{padding-top:0px;}

</style>

　ちなみにスタイルで挟まれた2行の言語の意味は、1行目がヘッターを非表示にする、という意味で、2行目が余白を0にする、という意味（だそう）です。コンピュータ音痴の私にとってはあまりよく分かりませんがとにかくやってみることにしました。

　入力を終えたらメニューバーのさらに上、「変更を保存する」をクリックして変更を適用させます。

これで基本的な作業は完了です。フッターもほぼ同様で、先ほどのデザインメニューでフッターをクリックすると、詳細な項目が展開しますので下にスクロールしフッタ「スマートフォン用にHTMLを設定する」にチェックを入れ、ボックスに

<style>

    #footer-menu{display:none;}

</style>

と入力し、「変更を保存する」をクリックすれば完了です。

３．ヘッダーとフッターを非表示にしてみた結果を確認。

　確認方法は何でも良いのですが、折角なので先ほど１．で紹介したツールを使って確認してみることとします。ブラウザを再読み込みすると、、

　ヘッダーとフッターが消えていました！ちなみにスマホでも確認してみましたがやはり消えていました。

４．各ブログパーツとスクリプトの対応

　ちなみに他サイトをいろいろと参考にしながらモバイル版でのページ下部のブログパーツとスクリプトの対応を私なりに確認してみた結果が次です。

　表示を消したい場合は先ほどの入力ボックスに各パーツ名を入力しその後に

{display:none;}

と記述すれば消すことが出来ます。

５．インタラクティブになるまでの時間がどれだけ短縮できたか

　結局のところページ表示をスッキリさせたいという目的のためにヘッダーとフッターの非表示に試行錯誤してきたので、最後にPageSpeed Insightsを使ってインタラクティブになるまでの時間を調べてみました。

developers.google.com

結果は

非表示にする前　インタラクティブになるまでの時間は５０．９秒

非表示にした後　インタラクティブになるまでの時間は５０．６秒

　ということで、ほんのわずかに短くなりました。ちなみに実際に自分のブログを自分のスマホで見た場合は、表示の内容も速さもかなりスッキリと改善した感じがしたのですが。。。気のせいなのかそれともチェックする指標がズレているのか、いずれにせよ表示の高速化は今後のカスタマイズの課題のひとつということで今はとらえておきたいと思います。

６．参考サイト（大変参考になりました。ありがとうございます。） 

はてなブログのスマホ用ヘッダーとフッターを消す方法！(Pro限定) - マネー報道 MoneyReport

Google Chromeでスマートフォンサイトをチェックする：Google Chrome完全ガイド - ＠IT

はてなブログ：スマホ版のヘッダー／フッター等を削除する非表示CSSコード - ADHDなIT屋さん、何かまとめる。

はてなブログのスマホ版でヘッダー・フッターを消すCSS(Proのみ) - littlewing

今日はこんなところで終わります。

ではでは。