ハミングバードのヘッダーロゴを大きくする方法

スポンサーリンク

新しく変更したWordPressのテンプレート「ハミングバード」ですが、デフォルトだとヘッダーのロゴが小さいです。

hummingtop_1

こんな感じで。

もっとロゴを大きく表示させたい。そんな時のカスタマイズ方法を載せておきます。

基本設定はどうなってるのか

「外観」→「テーマの編集」からハミングバードの親テーマのスタイルシートを見てみます。

そこで「#logo img」このタグを検索するとわかるんですが

ロゴの高さが36ピクセルに固定されているんですね。

そこで子テーマの方に表示させたい大きさのソースを追記して大きさを変更します。

ロゴを大きくする方法

それは先程のタグの数値を変更すれば良いだけで

私はこの様に記述しました。そうするとロゴが大きくなります。

しかしもう一つ問題点が出てきて、ロゴが大きくなった分高さの幅が広がるので、メニューの位置と合わない。

hummingtop_3

このメニューの位置を左のロゴと合わせたい場合のカスタマイズ方法も追記しておきます。

ナビゲーションの位置を変更する方法

子テーマの方にさらにタグを追加します。

#g_nav」っていうのがグローバルナビゲーションを示しているんですが、これに「margin-top」で余白を追加します。

私は15pxで設定してますが、この数値は大きくしたロゴのサイズに合わせて調整してください。

margin-top」は指定した場所に余白を入れてくださいという指示なので、今回はナビゲーションの上に余白を追加して、追加した分ナビゲーションの位置が下がる様にしています。

hummingtop_2

これでロゴとナビゲーションの位置が揃いました。

ロゴを大きく表示したい場合は、このコードを追記して高さの数値を変更すれば簡単に大きさは変えられます。サイトアピールにはロゴの大きさも大切になってきますので是非試してみてください。

スポンサーリンク