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:ナビゲーションメニューとスクロールボタンのカスタマイズ」でした。

“Twenty Seventeen:ナビゲーションメニューとスクロールボタンのカスタマイズ” への4件の返信

  1. こんばんは。
    また教えてください。
    ナビゲーションメニューだけを変更したい場合、子テーマのstyle.cssに下記をコピーすればいいのでしょうか?
    なんの変かも起きませんでした^^;
    よろしくお願いします。
    —–
    /*ナビゲーションメニューのデザイン*/
    .site-branding {
    padding: 1.5em 0;
    }
    .main-navigation a {
    padding: 0 1.25em;
    }
    .navigation-top {
    background: #3261AB;
    }
    .navigation-top a {
    color: #DCEEF7;
    }
    —–

    1. konohanaさん
      コメントありがとうございます。

      コード自体は問題ありません。
      まず、子テーマのstyle.cssが、きちんと読み込まれているか確認してみてください。
      問題なければ、このコードの後にそれを打ち消すような記述(上書き)がある可能性もあります。
      と、すぐに思いつくのはこんなとこですがいかがでしょう?

  2. できました!
    とりあえず、ほかのコードを消したら反映されたので、打ち消すものか何かあったのだと思います。
    消した分はゆっくり確認しながら付け足していきたいと思います。
    いつもいつも、ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です