のんびりよりみちきっぷ

考えた事や実施したことをのんびりと。

はてなブログ スマホ表示のシンプル化(プロフィール、検索BOX、注目記事などの非表示)

SPONSORED

スマホで自分のブログにアクセスすると、記事下にプロフィールなどの項目がずらっと表示されます。

 

現在スマホでのアクセスが7割を超える状態ですが、不必要な項目は除きシンプルに表示させたいと思い、デザインを変更することにしました。

 

またアドセンスの広告は記事下に載せていますが、様々な情報が表示されると埋もれてしまって目につかなくなりますからね。

 

  

変更点と前後比較

f:id:yorimichi_ticket:20170708214452p:plain

f:id:yorimichi_ticket:20170708215057p:plain

 

非表示にしたのは以下の5つ。

  • ヘッダー
  • パンくずリスト
  • プロフィール
  • 検索BOX
  • 注目記事

こちらの記事を参考にさせていただきました。

www.ksmemo.com

 

 

やり方

「ダッシュボード」→「デザイン」→「スマホ」→「ヘッダ」の「スマートフォン用にHTMLを設定する」に記述していきます。

f:id:yorimichi_ticket:20170708215502p:plain

 

以下に紹介していくコードを

 

<style type="text/css"> </style>

内に記述していきます。

 

ヘッダー

#globalheader-container{display:none;}

 

パンくずリスト

#top-box{display:none;}

 

プロフィール

.hatena-module-entries-access-ranking{display:none;}

 

検索BOX

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

 

注目記事

.hatena-module.search-box{display: none;}

 

無駄なスペース除去

上記のコードを書くと記事一覧の下に不要なスペースが残ってしまいました。

なので以下のコードを追加しました。

f:id:yorimichi_ticket:20170708220230p:plain

.entry{
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-bottom-width: 0px;
}

 

 

これで見た目がかなりすっきりしました。