主婦、時々フリーランス

2児の子育て中のワーママが、育児、節約、仕事について記録。

【はてなカスタマイズ】ヘッダー余白を小さくしてスマホ表示をよりコンパクトにしよう

このブログははてな公式テーマ「Blooklyn」を使っています。

以前、サイドメニューの余白調整をする記事を書きました。

 

今回は、スマホで見た時に以前から気になっていた、ヘッダー部分の余白調整をやってみました。

わずかな調整ですが、きゅっとコンパクトな表示になって、スマホ表示がいい感じになった気がします!

同じ事でお困りの方の参考になればと思います。

 

はてなヘッダー部分の余白を小さくしたい

まずbefore・afterはこちら。

 

f:id:yumekuro789:20181013120620j:plain

調整した部分は、

  • ブログタイトルの上下余白
  • パンくずリストの上下余白
  • パンくずリストの文字サイズを少し小さく
  • 記事タイトル下カテゴリの上下余白

余白をぎゅっと縮め、スマホでよりコンパクトに見せたかったのです。

 

カスタマイズコード(コピペOK)

私のブログテーマは「Blooklyn」なので、その例としてコードを記載します。

また、私と同じようにグローバルメニュー

f:id:yumekuro789:20181012234650j:plain

 

をつけている人とか、

 

パンくずリスト

f:id:yumekuro789:20181012234718j:plain

 

をカスタマイズで追加している人は、下記私のコードを同じように使えると思います。 

 

/*====ヘッダー余白調整====*/

/*ブログタイトル上下余白*/

header#blog-title {
padding-top: 20px;
padding-bottom: 20px;
}

/*グローバルメニュー下余白*/

#global-menu {
  margin-bottom: 20px;
}

/*パンくずリスト上下余白と文字サイズ*/

#top-box {
margin: 5px auto 10px;
font-size: 75%;
}

/*カテゴリ上下余白*/

div.entry-categories.categories {
margin: 5px 0;
}

/*記事タイトルボックス上下余白*/

header.entry-header {
padding-bottom: 0px;
margin-bottom: 5px;
)

 

追加する場所は、デザイン>カスタマイズ>デザインCSS です。

 

でもちょっと待って!

コピペする前に、変更しても問題ないか、Chromeのディベロッパーツールを使って確認してみてください。

 

「header#blog-title 」や「#global-menu 」などの「id」や「class」がそのテーマによって違うかもしれませんからね。

 

それに、不安な人は必ずバックアップをとってください。

また、どのくらいの余白にしたいかは、ひとつずつ貼り付けて表示確認をしながら進めてください。

ヘッダを狭めた理由

最初考えていたのは、ヘッダ部分に広告を貼ろうとしたから。

こちらは試しに貼り付けてみましたが、イマイチどのサイズがいいか、広告だらけで訪問者が不快に思わないかが気になりひとまず保留。

 

次に、プロブロガーの方は、最初に表示した時に見えるファーストビューの部分がカッコいい!!と思ったことがきっかけでした。

会社HPなどでもそうですが、トップページ上部部分に「伝えたいこよ」「見てほしいこと」を入れるといいそうです。

 

だって、ページに訪れた瞬間、離脱されるかもしれませんからね。

 

いつかWordPressへ移行してみたいと思っていますがまだまだ先になりそうです。

ですので、このはてな「Blooklyn」の状態で、少しずつ気になる所に手を入れてみたいと思います。