ヘッダー

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

4324373384_a4c0d68189

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

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

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

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

上下の高さを調整


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

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

092bbadd4d59cf63ba53922b5aa3f4eb

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

ffa291a7a206012aaf6d4a77b57a8f75
                  

801d13509c5db68502a251abe0c87e50

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

左よりを中央よりに


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

b3fa5e3d21fc5ceaee368fdf2f166e62

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

458e03d663c4ae0b09ed80b904a70206
                  

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

8f84ca46f23848b66d3d22073211c88c

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

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

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

『無料PDF配布』&『無料メール講座』

5年以上ブログで稼ぎ続けている経験を元に、「月収1万円を稼ぐことに特化したブログノウハウ」を作ってみました。お気軽にダウンロードしてみてください。
ダウンロードしてみる
月収10万円以上稼ぎたい人への「メール講座」もやってます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です