Snow Monkeyのヘッダー2行目のグローバルメニューをカスタマイズしてみた

当サイトのWordPressテーマはSWELLですが受託案件では自分好みにカスタマイズできるSnow Monkeyを活用する機会も多いです。 そのSnow Monkeyでヘッダーをコーポレートサイト風にカスタマイズ する方法について備忘録として残しておきます。ヘッダーの2行目のグローバルナビを横いっぱいに伸ばして背景色をつけるカスタマイズですね。

こんな感じのやつです。

デフォルトでは2行表示できますが、2行目を画面いっぱいに背景色をつくれないので、カスタマイズが必要になります。あまりコーディングは得意ではないのですが、サポートフォーラムなどを参考にして何とか実装ができました。

基本的な考え方については下記の記事を参考にさせていただきました。ありがとうございます。

https://masatoshihanai.com/snow-monkey-child/

カスタマイズするファイルは、下記の2row.phpです。

STEP
下記サポートフォーラムの回答を参考にMy Snow Monkeyプラグインの中にファイルを作成する

「4. 3」まで進めればOKです。

WordPress テーマ Snow Monkey
ヘッダー上にデザインがある電話を載せたいPCとスマホ共に このトピックには10件の返信、2人の参加者があり、最後にsnssenyou21@gmail.comにより1年、…
STEP
2row.phpの最下部エリアをカスタマイズする

この箇所です。

		<?php if ( $has_global_nav ) : ?>
			<div class=l-<?php echo esc_attr( $header_type ); ?>__row u-invisible-md-down">
				 <?php
					Helper::get_template_part(
						'template-parts/nav/global',
						null,
						[
							'_vertical'            => false,
							'_gnav-hover-effect'   => get_theme_mod( 'gnav-hover-effect' ),
							'_gnav-current-effect' => get_theme_mod( 'gnav-current-effect' ),
						]
					);
					?>
			</div>
		<?php endif; ?>

ここに.c-containerクラスのdivで囲ってあげるだけです。

	<?php if ( $has_global_nav ) : ?>
			<div class="p-global-nav-bg l-<?php echo esc_attr( $header_type ); ?>__row u-invisible-md-down">
				<div class="c-container">
					<?php
					Helper::get_template_part(
						'template-parts/nav/global',
						null,
						[
							'_vertical'            => false,
							'_gnav-hover-effect'   => get_theme_mod( 'gnav-hover-effect' ),
							'_gnav-current-effect' => get_theme_mod( 'gnav-current-effect' ),
						]
					);
					?>
			   </div>
			</div>
		<?php endif; ?>

ヘッダー2行目のグローバルナビに背景色をつけるためのclass「p-global-nav-bg」を新たに追加しておきましょう。他のclass名で追加しないように注意してください。

STEP
CSSを追加する
/* 要素を中央にもってくる記述 */
.p-global-nav-bg {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
/* グロナビメニューの横幅を均等にする記述 */
.p-global-nav-bg .c-navbar__item{
  width: 100%;
}

後はこの2つの記述をするだけでOKだと思います。 お好みで「.p-global-nav-bg」にborderの記述や背景色を記述してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

2016年1月に株式会社eiaを設立。成果報酬型広告で事業を拡大し、オウンドメディア・ホームページ制作・広告運用代行・LP制作など、中小企業のWebマーケティング支援を中心に活動しています。

コメント

コメントする

目次