【はてなブログ カスタマイズ】スマホ表示をカスタマイズ！ヘッダーのあれ、消してみました

はてなブログユーザーのみなさん、こんな設定ができるなら…と思ったことはありませんか？

筆者もはてなブログを初めて、ここのバーの表示が気になる…といったちょっとした設定にモヤモヤしていました。

今回は、はてなブログでのトップページのカスタマイズについて誰かのお役に立てればと思い備忘録も兼ねてお伝えしていきたいと思います。

 基本のカスタマイズ設定として、レスポンシブデザインというものがあります。

管理画面の「デザイン」から

右のスマホマークをクリックし、詳細設定の「レスポンシブデザイン」の箇所にチェックが入っていない事を確認します。

チェックが入っている場合、PC表示と同じ設定になるので反映されません。

今回、設定したい箇所はブログの一番上に表示される「Htena Blog」の文字。

はてなでブログを書いていることが丸わかりな表示は、気にならない方も多いかと思いますが、見栄え的に無いほうが良いと思う方もいらっしゃると思います。

この表示を消したいと思ったなら、コードを挿入しましょう！

 Hatena Blog バーの消し方

まず、基本の設定と同様管理画面「デザイン」より

真ん中スパナのマークを選択し、設定します。

「ヘッダ」の「タイトル下」を選び、HTMLが記述できる箇所にコードを貼り付けます。

<!–はてなヘッダ―を消す–!>
<style>
#globalheader-container {
display:none;
}
</style>
<!–代わりの余白調整–!>
<style>
#container {
padding-top:5px;
}
</style>

 

 貼り付けができたら、変更を保存して確認してみて下さい。

「Htena Blog」のバーが消えていると思います。

 

 

 

 ついでのお話になりますが、トップページのヘッダー画像についても、好みの画像を表示させたいと思った時に、どんなサイズでどんな設定をしたらいいのか…と悩みますね。

はてなブログでのヘッダー画像は、1000px × 200px　のサイズが推奨されているようです。

好みの画像やオリジナルで制作する場合はサイズに気をつけると綺麗に表示されます。

「デザイン」「スパナマーク」→「ヘッダ」「タイトル画像」からアップロードし設定できます。

 

表示設定で、「画像だけ表示」と「画像とテキストを表示」がありますので、もしオリジナル画像でブログタイトルも入ったものなら、「画像だけ表示」を選択し、画像上にタイトルテキストが被らないようにしておきましょう。

逆にシンプルな画像を設定してタイトルテキストを表示させたい場合は「画像とテキストを表示」を選択。

 

このヘッダーを変える事で一気にオリジナルブログがグレードアップするように思います。

PC・スマホ両方で綺麗に表示されるかは、お使いのテーマからも影響されるようですが、きちんとサイズが反映され表示されるか確認しながら設定していって下さい。