【 スクロールボタン＆ボタンの色 】
テーマ： TwentySeventeen
1．画面がスクロールされた時にボタンを消すための CSS コードを「追加CSS」に貼る。
/* ヘッダーより下にスクロールした時にボタンを非表示にするクラス */
.video-button-hide {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.3s ease, visibility 0.3s ease; /* 滑らかに消す演出 */
}
2．functions.php に以下の JavaScript（jQuery）を記述する。
function custom_video_button_scroll_script() {
?>
<script type="text/javascript">
jQuery(window).on('load', function() { // ページ全体の読み込み完了を待つ
var $ = jQuery;
// 動画ボタンは後から生成されることがあるため、少し遅らせてチェック
setTimeout(function() {
var $videoBtn = $('.wp-custom-header-video-button');
var $header = $('.custom-header');
if ($videoBtn.length && $header.length) {
// スクロール時の処理を関数化
function checkScroll() {
var headerBottom = $header.offset().top + $header.outerHeight();
var scrollTop = $(window).scrollTop();
if (scrollTop >= headerBottom) {
$videoBtn.css({
'opacity': '0',
'visibility': 'hidden',
'transition': 'opacity 0.3s, visibility 0.3s',
'pointer-events': 'none'
});
} else {
$videoBtn.css({
'opacity': '1',
'visibility': 'visible',
'pointer-events': 'auto'
});
}
}
// スクロール時と、ページ読み込み直後の両方で実行
$(window).on('scroll', checkScroll);
checkScroll();
}
}, 500); // 0.5秒待ってからボタンを探す
});
</script>
<?php
}
add_action('wp_footer', 'custom_video_button_scroll_script', 999); // 優先度を下げて最後に読み込む
3．画面が下にスクロールされた時にボタンを消すための「追加CSS」にコードを貼る。
.navigation-top-fixed ~ .custom-header-media .wp-custom-header-video-button,
.site-navigation-fixed ~ .custom-header-media .wp-custom-header-video-button {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
4．ビデオボタンの色を変えるため「Style CSS 又は追加CSS」にコードを貼る。
.wp-custom-header .wp-custom-header-video-button{
background-color: rgba(34, 34, 0.5);
border: 1px solid rgba(255,255,255,0.6);
color: rgba (222, 255, 255,0.6);
hight: 45px;
overflow: hidden;
position: fixed;
right: 30px;
width: 45px;
}
.wp-custom-header .wp-custom-header-video-button:hover, .wp-custom-header .wp-custom-header-video-button:focus{
border-color:rgba(255,255,255,0.8);
color: #fff;
}
＊好みの色に変更する。
※ 思っていた以上に簡単に設定・修正ができたのでビックリ！
