賢威のヘッダーカスタマイズ!上下の高さのサイズを調整する

Pocket

4324373384_a4c0d68189
ヘッダー画像を変更することは、サイトを個性的にする重要な箇所だと思います。

基本的には自分が貼りたいヘッダー画像のサイズを決めて作成することで、求めるデザインを作ることになります。


しかし、いくらヘッダー画像が好みの形に仕上がったとしても、ほんの小さなズレが気になることがあります。

今回はヘッダーを作成する人が気になるポイント、上下の幅やヘッダー画像 を中央寄りにする方法をまとめてみたいと思います。


上下の高さを調整


まずはヘッダー画像の上下にある隙間を埋めることにしましょう。

賢威のヘッダーは上下に隙間が空くように設定されています。ヘッダーを目立たせるにはいいかもしれませんが、このほんの小さな隙間が気になったりするんですよね。

092bbadd4d59cf63ba53922b5aa3f4eb

この隙間を埋めるためには、以下の1emを削除するだけで、隙間が埋まります。

ffa291a7a206012aaf6d4a77b57a8f75                   

801d13509c5db68502a251abe0c87e50

逆に、広げたい場合は、1emを2や3と設定してください。



左よりを中央よりに


先ほどのような比較的大きな画像(横幅950px)はわかりませんが、小さな画像の場合だと左寄りに設置されてしまいます。

b3fa5e3d21fc5ceaee368fdf2f166e62

小さな画像でもヘッダーの真ん中に寄らせたい場合、text-align: center;を追加し、以下を削除します。

458e03d663c4ae0b09ed80b904a70206                   

そうすると、このように真ん中になりましたね。

8f84ca46f23848b66d3d22073211c88c


しかし、小さな画像をヘッダーに使用している方はほとんどの人は左寄りにしていますよね。

少なくとも真ん中寄りにしている人と比べると圧倒的に少ないような気がします。

このあたりは好みの問題なので何とも言えませんが、ご自分のサイトデザインを考えた上で決めるのが良いかと思います。

コメントを残す

サブコンテンツ