このブログははてな公式テーマ「Blooklyn」を使っています。
以前、サイドメニューの余白調整をする記事を書きました。
今回は、スマホで見た時に以前から気になっていた、ヘッダー部分の余白調整をやってみました。
わずかな調整ですが、きゅっとコンパクトな表示になって、スマホ表示がいい感じになった気がします!
同じ事でお困りの方の参考になればと思います。
はてなヘッダー部分の余白を小さくしたい
まずbefore・afterはこちら。
調整した部分は、
- ブログタイトルの上下余白
- パンくずリストの上下余白
- パンくずリストの文字サイズを少し小さく
- 記事タイトル下カテゴリの上下余白
余白をぎゅっと縮め、スマホでよりコンパクトに見せたかったのです。
カスタマイズコード(コピペOK)
私のブログテーマは「Blooklyn」なので、その例としてコードを記載します。
また、私と同じようにグローバルメニュー
をつけている人とか、
パンくずリスト
をカスタマイズで追加している人は、下記私のコードを同じように使えると思います。
/*====ヘッダー余白調整====*/
/*ブログタイトル上下余白*/
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」の状態で、少しずつ気になる所に手を入れてみたいと思います。