【WordPress】テーマ「Hueman」のカスタマイズ ヘッダーを微調整する

当サイトで使用しているテーマ「Hueman」の、記事単体ページのカスタマイズについての記事です。
Wordpressのカスタマイズにあたり、子テーマを使用している前提となっています。

今回は、ヘッダーをカスタマイズした内容をご紹介します。
テーマ「Hueman」のカスタマイズを行いたい人の参考になれば幸いです。
※テーマの編集は、必ずバックアップを取ってから行いましょう！

Huemanのバージョン: 3.2.12

ヘッダーとは？

Huemanで言うヘッダーとは、管理画面の「外観→カスタマイズ」でコントロールすることのできる「ヘッダー」内の領域のこと。
ヘッダーメニューまでがヘッダーとして扱われており、idで見るとid=”header”内が該当します。

カスタマイズ前のヘッダー

初期状態のヘッダーは、画像の通りヘッダーの背景よりもヘッダーメニューが上部にせり出した形になっており、
デザインのアクセントになっています。

また、ヘッダーはブラウザのウインドウとの隙間が無い状態で配置されています。
そのため、私のようにヘッダーバナー画像を使用している場合には画像とブラウザとの境界が無く圧迫感を感じます。

どのようにカスタマイズしたいのか

ヘッダーについては、以下のように調整したいと考えました。

• デザインのアクセントになっている、ヘッダーの背景位置をヘッダーメニューと同じ高さにしたい
• ヘッダーバナー画像をブラウザ上部から離し、空間を設けたい
• ヘッダーバナー画像の上部、左右を角丸にしたい

カスタマイズ内容

デザインのアクセントになっている、ヘッダーの背景位置をヘッダーメニューと同じ高さにしたい

ヘッダーの背景は、cssのid=”header”とid=”page”で制御されています。
そこで、子テーマのCSSに以下の記述を追加します。

#header{padding-bottom:0;}
#page{margin-top:0;}

これで、背景の高さがヘッダーメニューと同じ高さになりました。

ヘッダーバナー画像をブラウザ上部から離し、空間を設けたい

ヘッダーの上部については、class=”container”で制御されているのですが、このクラスは他のブロックでも使用されており、
そのままCSSを上書きすると他の場所にも影響が出てしまいます。
そこで、id=”header”内のclass=”container”にのみ適用するように、セレクタを使って指定します。

#header > div.container{padding:20px 20px 0 20px;}

ヘッダーバナー画像の上部、左右を角丸にしたい

画像に対して角丸を指定するのは、CSS3からCSSで指定できるようになっています。
ヘッダーバナーはclass=”site-image”で制御されているので、CSSに以下の記述を追加します。

img.site-image{border-top-left-radius:10px;border-top-right-radius:10px;}

これで、ヘッダーバナー画像の上部左右が角丸になりました。

カスタマイズ後のヘッダー

それぞれのカスタマイズを行うと、ヘッダーが画像のようになります。

これで、ヘッダーの微調整ができました。

＜スポンサードリンク＞