はてなブログのスマートフォン表示では、カスタマイズをしないと、不要な要素が表示されてしまいます。
少し邪魔だなーと感じたので、非表示にしてみました。
なお、スマートフォン表示をカスタマイズするには、無料だとカスタマイズできる箇所が限られますので、はてなブログPro(有料会員)に移行しておく必要があります。
カスタマイズをする前のスマートフォン表示は、以下のイメージのとおりです。
赤枠で囲んだ要素を非表示にしていきます。
- ヘッダーを非表示
- ヘッダーのアイコンを非表示
- プロフィールを非表示
- 記事を書く・記事の管理等を非表示
- はてなブログ開発ブログ等を非表示
- フッタ―の「Powered by Hatena Blog」等を非表示
- フッダーのダッシュボード等を非表示



スポンサーリンク
編集方法
コードの入力箇所
管理画面から、「デザイン」ー「スマートフォン」と画面遷移し、「ヘッダ」の「タイトル下」にコードを記述していきます。
入力欄が表示されていない場合は、「スマートフォン用にHTMLを設定する」にチェックを入れます。

入力コード
コードは以下のとおりです。
なお、入力するコードは <style type=”text/css”> </style> を記述して、その中に入力するようにします。
コードのコメントにある番号は、上記のカスタマイズする前の画面イメージにある番号に対応しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* 1.ヘッダーを非表示 */ #globalheader-container { display:none; } /* 2.ヘッダーのアイコンを非表示 */ .header-blog-icon { display: none; } /* 3.プロフィールを非表示 */ .hatena-module.profile { display: none; } /* 4.記事を書く・記事の管理を非表示*/ .footer-action-wrapper { display: none; } /* 5.はてなブログ開発ブログ等を非表示 */ .touch-item-list{ display:none; } /* 6.フッタ―の「Powered by Hatena Blog」等を非表示 */ .footer { display: none; } /* 7.フッダーのダッシュボード等を非表示 */ #footer-menu { display:none; } |
カスタマイズ後の画面イメージ
コードを全て入力すると、以下の画面イメージになります。


とてもすっきりしました。
追加でご紹介
以下のコードを入力すると、「ブログタイトル下の説明文」、「注目記事」を非表示にすることができます。
ただ、ブログタイトル下の説明文は、そもそも管理画面の「設定」ー「基本設定」ー「ブログの説明」を空欄にしておけば表示されませんし、注目記事は読者にとってもためになる情報だと思いましたので、私は導入していません。
1 2 3 4 5 6 7 8 9 |
/* a.ブログタイトル下の説明文を非表示 */ #blog-description { display: none; } /* b.注目記事削除 */ .hatena-module-entries-access-ranking { display: none; } |
以上、参考になれば幸いです。
スポンサーリンク
スポンサーリンク