【スマホ版】はてなブログリンクのヘッダーとフッターを全て消してみた

 ※読んでいただく前にご確認ください

・ヘッダーとフッターを消去するには有料版はてなProに登録する必要があります。

・レスポンシブデザイン設定ではCSSコードが変更できないので、設定を解除します。

全くの初心者の方でも簡単に編集していただけるような内容にしています。

ヘッダーとフッターを消した時の比較

今回あっぷるるが消去したヘッダーとフッター諸々がこちら☆

↑どこまでも追尾してくるはてなブログのヘッダー

↑この範囲全てを一括消去。

・はてなブログ開発ブログ

・週刊はてなブログ

・はてなブログトップ

・ブログ名、Powered by Hatene Blog.

☆消した後のスマホページ全画面

２記事しか上げていないので殺風景なブログｗ

 はてなブログさんには申し訳ないけど・・すっきり！！

消去して気付いた１番のメリット

ページを開くまでの時間の短縮

体感的にかなり早く軽くなりました。素晴らしい！

実際にヘッダーとフッターを抹消していきましょう

はてなブログ→デザイン設定→スマートフォンページ→ヘッダを選択

↑スマートフォン用にHTMLを設定するを選択

以下の文をコピーしてそのままペーストする

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

#footer-menu {display:none;}

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

<style>

.footer-action-wrapper{display:none;}

/*はてなブログを始めようを非表示にする*/

.touch-item-list{display:none;}

/*はてなブログ開発ブログなどのリンクを非表示にする*/

.hatena-module.profile {display: none;}

/*プロフィールを非表示にする*/

/* フッターを非表示*/
#footer {display: none;}

</style>

[変更を保存する]を押下して完了です☆

その他の編集例

 ・プロフィールは残したい！という方は先ほどのコピーした中からこの部分を消してください。

.hatena-module.profile {display: none;}

/*プロフィールを非表示にする*/

・ヘッダーは残したい！という方は先ほどのコピーした中からこの部分を消してください。

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

#footer-menu {display:none;}

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

ちなみにこの部分を消すとタイトルの上に余白ができます。

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

デザイン次第では余白を開けるのもありかも？！

ブログ運営って楽しいですね(∩´∀｀)∩

お疲れさまでした☆