AFFINGER

アフィンガーでメニューバーの背景を透明にする方法(おすすめヘッダー設定も)※グローバルナビのカスタマイズ


パソコンを見てほほ笑む女性

メニューの背景を透明にして後ろの画像を表示しているサイトを見かけます。サイトが一気にクールに見えますね。

WordPress のテーマ「アフィンガー(AFFINGER)」 のサイトで、メニューの背景を透過する方法と、透過した場合のおすすめのヘッダーの作り方や設定を紹介します。

背景透明のヘッダーメニュー

背景透明のヘッダーメニューとは、後ろのヘッダー画像の上にメニューが乗っているデザインです。

メニューを透明にするヘッダーのサンプル

メニューがサイトに自然に溶け込んでいますので見た目がクールです。

AFFINGER のヘッダーの構成

ヘッダーメニューを背景透過する場合、AFFINGER のヘッダーの構成を理解しておくとわかりやすいです。

AFFINGER のヘッダーの構成イメージ

ベースとなる「header 部分」が下地にあり、その上に、各パーツが乗っています。各パーツの背景色を「透明」にすることで、headre 部分に配置した背景画像を上面に表示します。

ポイント

初期設定では、「ヘッダー画像(下)」エリアが下層(header 部分)の背景画像の影響を受けません。

WordPress の管理画面から「外観」→「カスタマイズ」→基本エリア設定」→「header エリア」にて、「背景画像の範囲」の指定により適用範囲が変わります。

選択できる項目

  • ディフォルト
  • ヘッダー画像エリア下
  • ヘッダーカードエリア

実際に各パーツを利用した場合は次のイメージのように分割されます。

各ヘッダー要素の例

背景透明メニューの作り方と、おすすめヘッダー設定

■ Step.1 「header 部分」に背景画像を設定する

「header 部分」の設定画面

WordPress の管理画面から「外観」→「カスタマイズ」→「基本エリア設定」→「header エリア」を表示します。

背景色を「クリア」して透明にします

背景色で「クリア」ボタンを押して「透明」に設定します。AFFINGER の場合、色設定(例:#ffffff)を「空(空白)」にして保存することで透明設定になります。

ポイント

画像(イメージ)で上書きするので背景色は設定したままでも構いませんが、透明にしておいたほうが何かと便利です。

背景画像を設定します

背景画像を設定します。サイズは大きめ(サイトをカバーできる横幅の画像:例 1200×400、1200×675)の画像を設定しましょう。

画像を設定しても上位層のエリアで透過設定していない場合、この時点では画像を表示できない場合もありますが、この後各エリアの透明設定をすることで全体で表示するようになります。

その他の設定

その他のおすすめの設定です。好みに応じて変更してください。

おすすめの設定

  • 背景画像の範囲を「ディフォルト」にする
  • 背景画像の横位置を「真ん中」にする
  • 背景画像の縦位置を「上」にする
  • 「背景画像を繰り返さない」をチェックしない
  • 「背景画像を幅100%のレスポンシブにする」をチェックする
  • 「背景画像を暗くする」をチェックしない

■ Step.2 「ヘッダー 部分」を設定する

背景透過にする

WordPress の管理画面から「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」を表示します。

  • 「背景色」を削除する(※)
  • 「ヘッダーエリア背景画像」は設定しない

(※)「クリア」ボタンが無いので、色設定(例:#ffffff)の文字列を手動で delete または BS (Back Space)キーなどで消してください。

「ヘッダー右(フッター)ウィジェット」を利用している場合
ヘッダー右(フッター)ウィジェットの背景色の設定画面

「ヘッダー右(フッター)ウィジェット」を利用しており、背景画像を表示したい場合は、「ヘッダー右(フッター)ウィジェット背景色」を削除します(※)

(※)「クリア」ボタンが無いので、色設定(例:#ffffff)の文字列を手動で delete または BS (Back Space)キーなどで消してください。

ヘッダー部分を表示しない場合

ヘッダー部分を非表示にして、メニュー(グローバルナビ)を画面上部に表示することも可能です。

■ ヘッダー部分を非表示にした例

ヘッダー部分を非表示にした例

ヘッダー部分を非表示にすると、サイトタイトルやキャッチフレーズの表示を行いません。

スマホの場合は、メニュー用のアイコン(ハンバーガーアイコン)を表示するため、最小約 100px の高さで表示します。

設定する場合は、WordPress の管理画面から、「AFFINGER 管理」→「ヘッダー」を表示します。

■ スマホ(タブレット含む)のみ

  • 「スマホヘッダーの高さ(px)」は最小が 100px のため 100 に設定
  • 「ヘッダーにサイト名(またはロゴ)を表示しない」をチェック
  • 「ヘッダーにキャッチフレーズを表示しない」をチェック

■ PCのみ

  • 「PCヘッダーの高さ(px)」は「空(空白)」に設定
  • 「ヘッダーにサイト名(またはロゴ)を表示しない」をチェック
  • 「ヘッダーにキャッチフレーズを表示しない」をチェック

■ Step.3 「ヘッダーエリア(上)」、「ヘッダーエリア(下)」を設定する

「ヘッダーエリア(上)」、「ヘッダーエリア(下)」はそれぞれウィジェットを配置した場合に表示されます。AFFINGER の初期状態では表示されないため、利用しない場合は設定不要です。

「ヘッダーエリア(上)」の背景透過設定

「ヘッダーエリア(上)」にウィジェットを配置しており、背景画像を表示したい場合は次の設定を行います。

ウィジェットを配置していない場合は「ヘッダーエリア(上)」は表示されないため、設定不要です。

ヘッダーエリア(上)の背景設定イメージ

WordPress の管理画面から「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダー画像エリア」を表示します。

「ヘッダーエリア上の背景色」および「ヘッダーエリア上の背景色(右)」をクリアします。

「ヘッダーエリア(下)」の設定

「ヘッダーエリア(下)」は「header 部分」の上位層ではないため、透過設定しても背景画像は表示ません。

利用する場合は、背景色を工夫すると見栄えがよくなります。「ヘッダーエリア(下)」の背景色を設定する場合は次の設定を行います。

ウィジェットを配置していない場合は「ヘッダーエリア(下)」は表示されないため、設定不要です。

ヘッダーエリア(下)の背景色の設定

■ Step.4 「メニューエリア」を設定する

メニューエリア(グローバルナビ)の背景色(透明)や、文字色を設定します。文字色は、背景画像の明暗に合わせて見やすい配色にしましょう。

メニューエリアの背景色などの設定画面

WordPress の管理画面から「外観」→「カスタマイズ」→「各メニュー設定」→「PC ヘッダーメニュー」を表示します。

「背景色」「背景色(グラデーション上部)」を削除します(※)

(※)「クリア」ボタンが無いので、色設定(例:#ffffff)の文字列を手動で delete または BS (Back Space)キーなどで消してください。

メニューの「ボーダー色」(縦・横の区切り線)や、文字色を設定して見やすい配色にしてください。

その他の設定

その他のおすすめの設定です。好みに応じて変更してください。

おすすめの設定

  • 「第一階層メニューを太字にする(サイドメニュー連動)」をチェックする
  • 「メニューをセンター寄せにする」をチェックする
  • 「メニューの横幅を100%にする」をチェックする
  • 「メニューの幅(px)」をメニュー表示の単語に合わせて適切なサイズに調整
  • 「メニューの上下に隙間を作る」に「上に10pxの隙間」を設定

ポイント

ヘッダーメニューの背景色を透過する場合、メニューは第一階層のみの実装(クリックですぐにページが変わる)とし、「下層ドロップダウンメニュー」を表示させないほうがクールなデザインになります。

■ Step.5 「ヘッダー画像エリア」を設定する

ヘッダー画像エリアの高さを変更したり、ロゴを表示したりします。

高さを設定する

ヘッダー画像エリアの高さ(最小)を設定します。

ヘッダー画像エリアの高さの設定画面

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー画像」を表示します。

「ヘッダー画像エリア最低の高さ(px)」で任意の高さを指定します。

背景を透過にする

背景は初期設定で透明です。透明ではない(または何らかの画像や文字が表示されている)場合は以下の設定を確認して削除します。

  • 「AFFINGER管理」→「ヘッダー」の「記事スライドショー設定」の設定
  • 「AFFINGER管理」→「ヘッダー」の「ヘッダーコンテンツ設定」の設定
  • 「外観」→「ウィジェット」の「ヘッダー画像エリアウィジェット」の設定
  • 「外観」→「カスタマイズ」→「ヘッダー画像」の「現在のヘッダー」の画像設定
  • 「外観」→「カスタマイズ」→「ヘッダー画像」の「ヘッダー画像エリア」の「ヘッダー画像の後ろに配置する背景画像」の設定

サイトタイトル(文字)やロゴを表示する方法

「ヘッダー画像エリア」の背景画像の上に文字列やロゴ画像を表示する場合は、2つの方法があります。

※方法1,2を両方設定した場合は、方法1の「ヘッダーコンテンツ設定」が有効になります。

(方法.1)「ヘッダーコンテンツ設定」で設定する
ヘッダー画像エリアに文字やロゴを表示する方法1

WordPress の管理画面から「AFFINGER管理」→「ヘッダー」の「ヘッダーコンテンツ設定」で表示するコンテンツを設定します。

(方法.2)「ヘッダー画像エリアウィジェット」で設定する
ヘッダー画像エリアに文字やロゴを表示する方法2

WordPress の管理画面から「外観」→「ウィジェット」の「ヘッダー画像エリアウィジェット」でコンテンツを設定します。

■ 完成

設定完了です。表示、見直して微調整してください。

■ パソコンで表示

ヘッダーの完成イメージ(パソコン)

■ スマホで表示

ヘッダーの完成イメージ(スマホ)

文字の書体を変えたり、ロゴ画像を表示してもよいデザインになりますね。

まとめ

WordPress のテーマ「アフィンガー(AFFINGER)」 のサイトで、メニューの背景を透過する方法と、透過した場合のおすすめのヘッダーの作り方や設定です。

  1. 「header 部分」に背景画像を設定する
  2. 「ヘッダー 部分」を設定する
  3. 「ヘッダーエリア(上)」、「ヘッダーエリア(下)」を設定する
  4. 「メニューエリア」を設定する
  5. 「ヘッダー画像エリア」を設定する

メニューの背景を透過して背景画像と一体化すると、サイトのデザインがまた一段とオシャレにクールになりますね。

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com