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

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

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

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

変更点と前後比較

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

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

やり方

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

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

<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;}

無駄なスペース除去

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

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

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

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