Twenty Seventeen：ナビゲーションメニューとスクロールボタンのカスタマイズ

今回も、WordPress公式テーマ「Twenty Seventeen」のカスタマイズです。

内容としては、ナビゲーションメニューの高さがちょっとありすぎるので、もう少しスリムにするのと、メニューの背景色を変更します。

また、メニューの高さ変更にともなって、スクロールボタンの位置とデザインもカスタマイズしていきます。

カスタマイズ内容の確認

まずは、カスタマイズする内容の確認です。以下のスクリーンショットをご覧ください。

グローバルナビゲーションの高さと背景色、スクロールボタンの位置とデザインを変更していきます。

サイトタイトルの位置変更は、以前の記事で解説しているので、そちらをご覧ください。今回は、その記事の続きといった感じです。

関連記事

Twenty Seventeenのタイトル位置を変更するカスタマイズ

完成イメージはこんな感じです。

公式テーマのTwenty Seventeenも、タイトルやスクロールボタンに手を加えるだけで、随分とイメージが変わりますね。

ちなみに、今回のカスタマイズは、パソコンで表示した場合のみ有効です。スマホやタブレットの場合は、デザインが異なるので別の方法でカスタマイズしてあげる必要があります。

style.cssでデザインを変更

まずは、スタイルシートに手を加えてデザインを変更していきましょう。

/*ナビゲーションメニューのデザイン*/
.site-branding {
	padding: 1.5em 0;
}
.main-navigation a {
	padding: 0 1.25em;
}
.navigation-top {
	background: #3261AB;	
}
.navigation-top a {
	color: #DCEEF7;
}
	
/*画面スクロールボタンのデザイン*/
.menu-scroll-down {
	border-radius: 50%;
	color: #fff;
	width: 47px;
	height: 47px;
	margin-right: 50px;
}
.menu-scroll-down >.icon-arrow-right {
	color: #fff;
}
	
/* 画面スクロールボタンの点滅アニメーション */
.menu-scroll-down {
	background-color: #e74c3c;
  	animation: bg-color 20s infinite;
  	-webkit-animation: bg-color 20s infinite;
}
	@-webkit-keyframes bg-color {
 		0% { background-color: #e74c3c; }
  		20% { background-color: #f1c40f; }
  		40% { background-color: #1abc9c; }
 	 	60% { background-color: #3498db; }
  		80% { background-color: #9b59b6; }
  		100% { background-color: #e74c3c; }
	}
	@keyframes bg-color {
  		0% { background-color: #e74c3c; }
  		20% { background-color: #f1c40f; }
  		40% { background-color: #1abc9c; }
  		60% { background-color: #3498db; }
  		80% { background-color: #9b59b6; }
  		100% { background-color: #e74c3c; }
	}

デザインやアニメーションについては、お好みで色々と変更してください。

次に、JavaScriptでスクロールボタンを動的に移動してあげます。ポイントは、画面のサイズを判定していつも同じ位置（画面中央）に表示する点です。レスポンシブ対応ですね。

これには、以前書いた記事「Twenty Seventeenのタイトル位置を変更するカスタマイズ」に一行追記する方法で対応します。

/****************************************
    ヘッダーの文字を中央に固定　　
*****************************************/

nowDistance = function(){
//alert("アイウエオ");
	// グローバルナビからwindow（画面）の上端までの距離を計測
    var naviUpper = $('.navigation-top').offset().top; 
   
   	// 動かしたいタイトル要素の高さを取得
    var titleBoxHeight = $('.site-branding-text').height();
    
    // 実際に移動させる距離を計算
    var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
    
    // CSSでタイトル要素にマージンを与えて移動させる
    $('.site-branding-text').css({'margin-bottom': movingDistance + "px"});
    $('.menu-scroll-down').css({'top': -naviUpper/2-30 + "px"});
};


// 【レスポンシブ対応】移動したい距離をリアルタイムで取得して反映させる
jQuery(function(){
    nowDistance();
    $(window).resize(nowDistance);
});

18行目が前回の記事に追記した部分になります。

ついでに、こちらも別の記事で紹介済みですが、スクロール時にヘッダーに影をつけるカスタマイズも加えると、こんな感じになります。

/****************************************
    ヘッダーの文字を中央に固定　　
*****************************************/

nowDistance = function(){
//alert("アイウエオ");
	// グローバルナビからwindow（画面）の上端までの距離を計測
    var naviUpper = $('.navigation-top').offset().top; 
   
   	// 動かしたいタイトル要素の高さを取得
    var titleBoxHeight = $('.site-branding-text').height();
    
    // 実際に移動させる距離を計算
    var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
    
    // CSSでタイトル要素にマージンを与えて移動させる
    $('.site-branding-text').css({'margin-bottom': movingDistance + "px"});
    $('.menu-scroll-down').css({'top': -naviUpper/2-30 + "px"});
};


// 【レスポンシブ対応】移動したい距離をリアルタイムで取得して反映させる
jQuery(function(){
    nowDistance();
    $(window).resize(nowDistance);
});

/****************************************
    スクロール時にヘッダーに影をつける
*****************************************/

$(window).scroll(function(){

	// カスタムヘッダーの高さを取得
	var masthead_Height = $('#masthead').height();

	// ナビゲーションメニューのセレクタ（.navigation-top）を変数に格納
	var naviTop = $('.navigation-top');

	// ナビゲーションメニューの高さを取得
	var naviTop_Height = naviTop.height();

	// 影をつけるタイミングを調整
	var shadowPoints = ( masthead_Height - naviTop_Height);

		// 影をつける条件分岐
		if($(window).scrollTop() >= shadowPoints ){
				naviTop.css( "box-shadow", "0px 3px 3px 1px rgba(51,48,0,0.4)" );
		}
		else{	naviTop.css( "box-shadow", "none" );
		}
});

JavaScriptのファイルの置き場所などがよく分からない方は、やはりこちらの記事で簡単に解説しているので参考になさってください。

質問等ある方は、コメント欄よりお気軽にどうぞ。

以上、「Twenty Seventeen：ナビゲーションメニューとスクロールボタンのカスタマイズ」でした。