【はてなブログ】スマートフォンデザインの不要な要素を非表示に

はてなブログのスマートフォン表示では、カスタマイズをしないと、不要な要素が表示されてしまいます。
少し邪魔だなーと感じたので、非表示にしてみました。
なお、スマートフォン表示をカスタマイズするには、無料だとカスタマイズできる箇所が限られますので、はてなブログPro（有料会員）に移行しておく必要があります。

カスタマイズをする前のスマートフォン表示は、以下のイメージのとおりです。
赤枠で囲んだ要素を非表示にしていきます。

1. ヘッダーを非表示
2. ヘッダーのアイコンを非表示
3. プロフィールを非表示
4. 記事を書く・記事の管理等を非表示
5. はてなブログ開発ブログ等を非表示
6. フッタ―の「Powered by Hatena Blog」等を非表示
7. フッダーのダッシュボード等を非表示

編集方法

コードの入力箇所

管理画面から、「デザイン」ー「スマートフォン」と画面遷移し、「ヘッダ」の「タイトル下」にコードを記述していきます。

入力欄が表示されていない場合は、「スマートフォン用にHTMLを設定する」にチェックを入れます。

 

入力コード

コードは以下のとおりです。

なお、入力するコードは <style type=”text/css”>  </style> を記述して、その中に入力するようにします。

コードのコメントにある番号は、上記のカスタマイズする前の画面イメージにある番号に対応しています。

 

カスタマイズ後の画面イメージ

コードを全て入力すると、以下の画面イメージになります。

とてもすっきりしました。

追加でご紹介

以下のコードを入力すると、「ブログタイトル下の説明文」、「注目記事」を非表示にすることができます。
ただ、ブログタイトル下の説明文は、そもそも管理画面の「設定」ー「基本設定」ー「ブログの説明」を空欄にしておけば表示されませんし、注目記事は読者にとってもためになる情報だと思いましたので、私は導入していません。

以上、参考になれば幸いです。