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

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

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

スマホデザイン上段スマホデザイン中段スマホデザイン下段

スポンサーリンク



編集方法

コードの入力箇所

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

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

コード入力場所

 

入力コード

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

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

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

 

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

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

編集後スマホデザイン上段編集後スマホデザイン下段

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

追加でご紹介

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

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

“【はてなブログ】スマートフォンデザインの不要な要素を非表示に” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です