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;
}
＊好みの色に変更する。

※ 思っていた以上に簡単に設定・修正ができたのでビックリ！

先日 WordPress 7.0 へのメジャーアップデートがあったけど、「Twenty Seventeen」の画像処理（切り抜き、クリップパスなどの多角形変形、サムネイル拡大）に不具合が発生していたのでビックリ！

WordPress 7.0 の画像ブロック仕様（object-fit やアスペクト比の制御など）やエディタの CSS構造が大きく最適化さたので、Twenty Seventeen が独自に持っていたサムネイルの拡大・縮小ロジックや、CSS で実装していた多角形変形（clip-path など）の表示が崩れてしまうと言ったケースが報告されている。

【解決方法】

1）WordPress 7.0 の共通 CSS（object-fit 関連）が干渉している場合

* 7.0の自動アスペクト比による画像の歪みをリセット */
.wp-block-image img,
.thumbnail img,
.entry-content img {
    height: auto !important; /* 縦横比の強制歪みを防ぐ */
    max-width: 100%;
}
/* 多角形変形（clip-path等）を適用している画像のコンテナ崩れ対策 */
.your-polygon-class img { /* 「your-polygon-class」はご自身で設定したクラス名に変えてください */
    object-fit: cover !important; /* または fill / contain 状況に合わせて変更 */
    width: 100% !important;
    height: 100% !important;
}

2）サムネイルの再生成（切り抜き設定のズレ）

Regenerate Thumbnails などのプラグインをインストール
「ツール」 ＞ 「Thumbnailの再生成」で実行

3）メディア設定のアスペクト比切り抜きを再確認
アップデートにより、デフォルトの切り抜きロジックが変更されている場合がある。

【Simple CSS に記述されている場合】

/* 例：今までの古い書き方 */
.my-polygon-image {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* 7.0 対応：画像自体を確実に変形させ、サイズを固定する */
.my-polygon-image img {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 画像が歪むのを防ぎ、枠内に収める */
}
/* 親要素（ブロック全体）の余計なアスペクト比固定を解除 */
.my-polygon-image {
    aspect-ratio: auto !important; 
}

「追加するための対策 CSS」

Simple CSS の最下部に、以下のリセットコードを追加する。

/* サムネイル画像が異常に拡大するのを防ぐ */
.wp-block-image img, 
.entry-content img,
.thumbnail img {
    max-width: 100% !important;
    height: auto !important; /* 縦横比を維持したまま拡大縮小させる */
}

※ ホームページを開いたときは驚きで TwentySeventeen テーマは終わった？と思ったが、なんとか修正できて今まで通りの状態になった感じだ。

バックグランドを透明にしたフロントページのヘッダー画像を動画に替えてみたところ、フロントページが斬新なページに生れ変わった感じだ。

【動画（MP4）に替えてスマホと PC 用に準備】

1）iPhone で撮った動画（mov）を　MP4 に変換
　1．Adobe Express のオンラインツールで MP4 に変換した動画を「外観→ヘッダー」で動画変更
　2．自動再生（Autoplay）を最初は停止に、再生ボタンで動かすため、header.php の最下部（ の直前など）に、以下の1行をそのまま貼り付けて保存

　　<script>jQuery(document).on('wp-custom-header-video-loaded', function() { jQuery('#wp-custom-header-video').attr('autoplay', false).get(0).pause(); });</script>　

２）Adobe Expressのオンラインツールで 変換した MP4 を GIF アニメーションに変換
　1．変換したGIF アニメーションを外観→ヘッダー」に画像追加欄へ追加
　　※ iPhoneや他スマートフォンでは MP4 は不可なので、静止画像の代わりに GIG アニメーションを追加する。但し、自動再生のみで停止できない。

2．管理画面の「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードを入力。

@media screen and (max-width: 767px) {
    /* PC用の動画や画像を非表示にする場合 */
    .custom-header-media video {
        display: none !important;
    }
    /* スマホ用の代替画像を表示する場合の記述例 */
    .custom-header-media {
        background-image: url('スマホ用画像のURL');
        background-size: cover;
    }
}

フロントページが透明色に変えてからバックグランドを動画にしようと試みた。大変な作業と思ったけど、iPhoneの動画（mov)をmp4に変換、変換したmp4をgif animation に変換する作業は意外とスムーズだった。
画面をスクロールするとボタンが消えるとか、ボタンの色の修正なども試した。

フロントパージのヘッダーは画像と動画（mp4）だけだったので、今まで当たり前のように気に入った画像を載せていた。動画については1～2度試したけど思い通りにいかないので音声だけを入れたいと思っていたところで、「Google AI」に聞くと簡単明瞭な回答を得られたので早速試した。

1）ファイルパス: wp-content/themes/twentyseventeen/template-parts/header/header-image.php修正の手順header-image.php を開き、ファイル内にある以下の記述を探す：
　<div class="custom-header-media">
    <?php the_custom_header_markup(); ?>
</div>

2）div の中に音声用のタグを挿入する：
　<div class="custom-header-media">
    <?php the_custom_header_markup(); ?>
    <!-- 音声タグの追加例 -->
    <audio src="音声タグ.mp3" controls autoplay loop style="position: absolute; bottom: 10px; right: 10px; z-index: 99;"></audio>
　</div>

3）「外観 > カスタマイズ > 追加CSS」で微調整PHP側のコードが正しくても、テーマ全体のスタイルに干渉されている場合があります。管理画面の「追加CSS」に以下を貼り付けてみてください。
/* ヘッダー内のオーディオプレイヤーを強制表示 */
.custom-header-media audio {
    display: block !important;
    width: 100px; /* 見やすいサイズに固定 */
    opacity: 1 !important;
}

4）現在の <audio> タグをボタン表示にするには、プレイヤー本体を display: none; で隠す。
<div class="custom-header-media">
    <?php the_custom_header_markup(); ?>
    <!-- 音声本体（画面には出さない） -->
    <audio id="header-audio" src="音声タグ.mp3" loop></audio>
    <!-- 操作用ボタン -->
    <button id="audio-toggle-btn" class="audio-button">
        <span id="audio-icon">♪ ON</span>
    </button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var audio = document.getElementById('header-audio');
    var btn = document.getElementById('audio-toggle-btn');
    var icon = document.getElementById('audio-icon');
    btn.addEventListener('click', function() {
        if (audio.paused) {
            audio.play();
            icon.innerText = '♪ OFF'; // 再生中の表示
            btn.classList.add('playing');
        } else {
            audio.pause();
            icon.innerText = '♪ ON'; // 停止中の表示
            btn.classList.remove('playing');
        }
    });
});
</script>
 見た目を整える（追加CSS）「外観」＞「カスタマイズ」＞「追加CSS」に以下を貼り付けて、ボタンのデザインを調整します。
.audio-button {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.audio-button:hover {
    background: #fff;
    color: #000;
}
.audio-button.playing {
    background: #ff0000; /* 再生中に色を変える場合 */
    border-color: #ff0000;
}

気に入いるように微調整したけど、Google AI の回答が完璧でビックリ！
※ 音声は「音声読み上げソフト 音読くん」の Google AI 機能でホームページ紹介文を作成した。