【「BusinessPress」カスタマイズ①】ヘッダー部分の幅や色の変更や透明化などのカスタマイズ方法

ワードプレスには、数多くの無料・有料のテーマがあり、そのテーマ・テンプレートをインストールすることによって、簡単にホームページ全体のデザインやレイアウトを変えることができます。

そのなかでも無料テーマ「BusinessPress」がシンプルで使いやすいと以前紹介させていただきました。

Contents

無料テーマ「BusinessPress」について

お勧めのWordPress無料テーマ「BusinessPress」の使い方とカスタマイズ

Business Pressの公式サイト

BusinessPress WordPressテーマ

今回は、その無料テーマ「BusinessPress」のヘッダー部分のカスタマイズ方法のご案内です。

「BusinessPress」のヘッダー部分は、オーソドックスな左側にロゴ、右側にグローバルメニューが並ぶスタイルで、ある程度画面幅が狭くなると、グローバルメニューの代わりに、よくある三本線のハンバーガーメニューが表示されます。

ヘッダー部分の基本設定

「BusinessPress」でロゴを変更するには、「外観」＞「カスタマイズ」＞「サイト基本情報」で、ロゴの変更をクリックし、ロゴ画像を指定・アップロードしてください。

その際にテキストのサイトタイトルやキャッチフレーズを非表示にする機能やロゴの幅を指定する機能があります。

グローバルメニューの設定は、「外観」＞「メニュー」から、メニューを新規作成、固定ページなどを選択して、メニューに位置、メインナビゲーションにチェックを入れて「メニューを保存」してください。

ここまでは基本設定で、ここからがカスタマイズになります。

ヘッダー部分の高さをスリムにする

好みの問題かもしれませんが、もう少しメニュー部分の高さをスリムにしたいというときもあると思います。

↓

その場合、以下の追加CSSを「外観」＞「カスタマイズ」＞「追加CSS」に記述してください。

.main-header{
 	padding-top:15px;
	padding-bottom:15px;
}

padding-topでロゴ部分より上のスペース、padding-bottomでロゴ部分より下のスペースをpixelで指定しています。

ヘッダー部分の背景色を変える

ヘッダー部分の背景色を変えたい場合は、先ほどの追加CSSにbackground-colorを追加します。

.main-header{
  background-color:#f00;
	padding-top:15px;
	padding-bottom:15px;
}

ついでに、メニューの文字色を変更したい場合は以下になります。

.main-navigation a{
	color: #fff !important;
}

ヘッダー部分の背景色を半透明にする

今度は、ヘッダー部分が透けるように半透明に変えてみたいと思います。

.main-header-original{
	top:0;
  left:0;
	position: absolute;
	z-index:1;
	width: 100%;
}
.main-header{
  background-color: rgba(255,255,255,0.5);
	padding-top:15px;
	padding-bottom:15px;
}

position:absoluteで、ヘッダー部分が浮いたような状態になるため、下の背景部分が詰められて、重なった状態になります。

「BusinessPress」では、画面をスクロールさせたときに、少し遅れて固定のヘッダーが表示される仕様になっております。

ですので、

最初に表示されるページトップのヘッダー・・・.main-header-original
画面をスクロールしたときに表示されるヘッダー・・・.main-header-clone

を編集すれば良いです。

まとめ

WordPressでテーマを選ぶ際に、ヘッダー部分のデザインやレイアウトって重要だと思いますが、なかなか思うようなものが見つからなかったりします。

「BusinessPress」では、もともとがシンプルでスタンダードなヘッダーだけに、少しのカスタマイズで理想のものにアレンジしやすいので、大変お勧めです。