今日の午後１時予約のシャンプー＆カット、いつもの様に涙目で赤く染まった目の周り、伸びてる爪のことを含めたサマーカットで約３時間ほど、その間退屈だったが迎えにいくと。。。ウァ～真っ白＆スッキリ！

これから夏の期間は猛暑日が続くだろうから、サマーカットも悪くないね。

台風6号が去った後から本格的に梅雨入り、朝・夕の散歩は嫌になるけど、昼間の束の間の雨上がりに「マル」ちゃん路地でオシッコだ～

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 に変換する作業は意外とスムーズだった。
画面をスクロールするとボタンが消えるとか、ボタンの色の修正なども試した。

眩しいくらいのお日様を浴びながらの散歩だけど、冷たい風が時々吹き荒れる中を「まる」と散歩だ。

みよし通り途中で、祐天寺界隈では見られない「鯉のぼり」を見ながら「今日は5月5日は子供の日」なんだ。。。と昔を懐かしく思いながら帰宅。

フロントパージのヘッダーは画像と動画（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 機能でホームページ紹介文を作成した。

商店街入口が十字路になっていて、その一角が空き地になってる。その空き地で「テラ通り」と「みよし通り」商店街のイベント？らしく「のど自慢大会」が行われていた。散歩の途中に歌声が聞こえてきたので何事かと見に行くとなんと大勢の人だかり、即席の舞台も立派で民謡や演歌で盛り上がっていた。

両商店街では、夏になるとフラダンスの発表会？や、各神社祭で神輿が出て賑わいを見せるけど、飛び入り参加の「のど自慢大会」を見たのは初めてだね。。

昨日はバスで学芸大学駅方面の薬屋で買い物予定でバス停まで行ったけど、良いお☀なので、予定を変えて山手通りのペットショップ・コジマへ「まる」のオヤツを買うために歩きで行くことにした。

とにかく「コジマ」までは30分以上かけての歩きなので、「コジマ」に着いてから目黒川の桜を観る予定だったけど、まぁ、少し疲れたので買い物だけ済ませて又、テクテクと歩きで帰ってきた。

午後の散歩は祐天寺へ「まる」と出かけた。境内は桜満開で休憩できる一角では、国際色豊かなグループがいて大賑わいと言っても目黒川の混雑のような感じと違うけど。。。可愛いワンちゃんとも会えて、「まる」は嬉しさいっぱい。そんなこんなで家に戻るとグッタリ！だ。

昨日相当歩いたので両足がパンパン、今日は午後から雨が降るらしいのでゆっくり休もうかな？、と言ってもママが言うには「孫の翔太がひい孫を見せに我が家に来る」との事らしい。

明日は全国的に春の嵐だと言う事なので、結構遠出になるけど世田谷公園へ行く途中の遊歩道で満開の桜を観るために出かけた。

人出は目黒川沿いの混乱よりましで、可愛い子犬を連れた人達と出会って「まる」ちゃん大喜びだ。暖かい日差しの中を約二時間ほどの散歩なので家に戻るとグッタリ！