しおりビルヂング

趣味ブログ。本を紹介したり、ガジェット紹介したり。マーケティング、投資、ビジネス、統計、数学についても解説したりもします。

モバイル版でも左上にHatena Blogと表示させなくする方法

f:id:Hikari_22:20180813205203j:image

 

はてなブログって、初期設定だとPC版でもモバイル版でもヘッダにHatena Blogって表示されます。

 

▼PC版

f:id:Hikari_22:20180813190915p:image

 

▼モバイル版

f:id:Hikari_22:20180813190920p:image


左上にHatena Blogって出るじゃないですか
この消し方についてやっとわかりました。


ここにHatena Blogってあると、良くも悪くもこのブログ、はてな使ってるんだなーってわかりますよね。
別にわかっても良いのですが、デザイン的にダサいし消したいなぁって思ってました。

 

▼PC版はここのヘッダーの削除(PROのみ)にチェックを入れると消えます。

f:id:Hikari_22:20180813190951p:image

 

▼消えた!

f:id:Hikari_22:20180813191118j:image

 

でもモバイル版は消えない。
しかも調べても、モバイル版の消し方出てこない。。

それでいろいろHTMLとかCSSとか勉強して、いじれるようになれば消せるようになると思ったのですが、勉強しました。

 

www.shioring.com

 
でもはてなブログって直接的にヘッダーのHTML編集できないんですよね?
いろいろHTMLやCSSの追加はできるけど、今あるHTMLは修正できない。
(で、認識あってますよね?)

 

モバイル版で左上のHatena Blogを消す方法

 

モバイル版で左上のHatena Blogを消す方法は以下の通りです。

  1. レスポンシブデザイン対応のデザインにする
  2. レスポンシブデザインにチェックを入れる
  3. ヘッダを表示しないにチェックを入れる


▼はい、これで消えました!

f:id:Hikari_22:20180813193728j:image

 

一つ一つ解説していきます。


レスポンシブデザイン対応のデザインにする

そもそもレスポンシブデザインとは

 

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

 Wikipediaより

 

わかりにくいですけど、ざっくりいうとPCでもタブレットでもスマホでも、画面サイズに合わせて見やすいように同じデザインで自動的に切り替えようぜってことですね。

イメージは以下の図のように、自動的にPCとスマホで切り替えて見やすくなる感じ。

 

f:id:Hikari_22:20180813193057p:image

 

レスポンシブデザインにすることで、ユーザーは小さな画面のスマホでも見やすい。

管理者も、デザインの管理が一つになり管理しやすい。

双方にメリットあるわけです。

 

ただはてなブログは初期設定だとレスポンシブデザインでなく、モバイル版は勝手にはてなのモバイル用オリジナルデザインになるんですね。
だからPC版のみのヘッダを表示しないにしてもPC版とモバイル版でデザインがリンクしていないのでヘッダーのはてなブログが消えない。

 

 

  1. レスポンシブデザイン対応のデザインにする
  2. レスポンシブデザインにチェックを入れる
  3. ヘッダを表示しないにチェックを入れる

 

▼レスポンシブデザインにチェック

f:id:Hikari_22:20180813194347p:image

 

なので、この手順を踏むことで

 

  1. PC版とモバイル版でデザインが共通になる
  2. ヘッダを表示しないをPC版に適応すると自動的にモバイル版のデザインにも適応される

 

こういうわけでモバイル版でもヘッダのHatena Blogが消えるようになったわけです!

 

まとめ

以上の手順で簡単に、モバイル版でもヘッダからHatena Blogの文字を消すことができました。

ついでにフッターも消すとはてなブログ感は一切消えます!

 

はてなの設定の「ヘッダを表示しない」が(PC版)となっているのでとてもわかりにくいですよね。

 

はてなブログのテーマストアで、デザインを選ぶときは、レスポンシブデザイン対応かどうかも気にしてデザインを選ぶと良いと思います!