/* Theme Name: 辻屋本店 Lightning Child Theme URI: https://getaya.jp/ Description: 辻屋本店 getaya.jp 専用の Lightning 子テーマです。 Author: TOMITA PRODUCE LTD. Author URI: https://tomitaproduce.jp/ Template: lightning Version: 2.8.15 Text Domain: lightning-child-tsujiya Requires at least: 6.0 Requires PHP: 7.4 */ /* * 実際のデザイン調整は assets/css/style.css に記述します。 * このファイルは主に WordPress のテーマ情報ヘッダーとして使用します。 */ /* * 変更履歴 * * v2.8.15 * - 【TOP検索UI仕上げ】検索範囲を選択した直後、タグ／価格帯／フリーワードの * 3検索方法見出しを約0.25秒・軽い時間差で表示する控えめなアニメーションを追加。 * 既存アコーディオン構造は変更せず、prefers-reduced-motionにも対応。 * - 【スマホUI仕上げ】商品カテゴリートップ／検索結果のカテゴリ説明を幅90%へ拡大し、 * 文字サイズを.92remへ微増。サイト全体のcontainer幅には影響させない。 * v2.8.14 * - 【不具合修正】TOP検索範囲を選ぶ前は「タグ／価格帯／フリーワード」の3検索方式見出しも含めて非表示にする。 * v2.8.13でJSロジックは実装済みだったが、非表示クラスのCSSがキャッシュされやすいルートstyle.css側にのみあり、 * assets/css/style.css側に無かったため環境によって見出しが残る問題を修正。 * - スマホの商品検索結果件数表示を中央揃えへ修正。 * - 「条件をクリア」ボタンを固定紫ではなくLightningカスタマイザーのキーカラー(--vk-color-primary)へ連動。 * v2.8.13 * - TOP検索を「範囲選択必須→検索方法表示」に変更。検索アコーディオンは排他的に開閉。 * - TOPタグ検索を複数チェック＋AND検索へ変更。 * - 商品結果画面のタグを複数チェック即時反映、条件クリア位置変更、スマホ検索バー強調。 * v2.8.12 * - 【不具合修正】TOPページの価格帯検索・フリーワード検索が、 * v2.5.0で記事専用に変更したWordPress標準検索(?s=)へ送信され、 * 商品ではなく記事検索結果を表示していた問題を修正。 * - TOPの商品検索フォーム送信時は、検索範囲(全商品/男物/女物)に応じて * item/mens/ladiesの商品カテゴリーURLへ直接遷移し、フリーワードはkw、 * 価格帯はmin_price/max_priceとして既存の商品絞り込み処理へ渡す。 * - カテゴリーURLはPHP側からmain.jsへ渡し、URL構造の直書きを避けた。 * * v2.8.11 * - getaya.jp Core v2.4.5の商品タグ一括追加機能に対応。 * 編集権限を持つログインユーザーだけ、商品カードに選択チェックを表示し、 * 表示中の商品を見ながら既存タグ／新規タグを複数商品へまとめて追加できる。 * - もっと見る／無限スクロールで後から読み込まれた商品も同じ選択UIに対応。 * - 一般閲覧者には管理UI・専用JavaScriptを読み込まない。 * * v2.8.10 * - getaya.jp Core v2.4.4の[getaya_product_tag_search]に対応。 * TOPの商品タグ検索で「全商品／男物／女物」の選択内容に応じ、 * item/mens/ladies各商品カテゴリーのtag_id絞り込みURLへ直接振り分ける。 * また、選択中の範囲に実在しないタグは非表示にして0件遷移を防ぐ。 * - Gutenbergショートコードブロック(.wp-block-shortcode)内にaccordion-panelが * 出力された場合も、ブロック直前の見出しをアコーディオンのトリガーとして * 認識できるようmain.jsを後方互換のまま拡張。 * * v2.8.9 * - getaya-mincho(WEB SHOPセクション見出し等の明朝体指定)の追加CSSが * 効かなくなっていた不具合に対応。 * 原因調査の過程で判明した点: このファイル(子テーマルート直下の * style.css)は親テーマLightning側の仕組みにより、親テーマ自体の * バージョン番号(例: ?ver=15.37.1、子テーマ自身のVersionではない)を * キャッシュ用のクエリ文字列として読み込まれている。そのため、この * ファイルの中身を更新しても親テーマのバージョンが変わらない限り * URLが変化せず、一度このURLをキャッシュしたブラウザでは * Cache-Control(最大7日間)により更新後の内容が反映されない * (通常のリロードでは変わらず、ハードリロードやキャッシュクリアが * 必要になる)。お客様に子テーマ側で.getaya-minchoルールを追加 * いただいたが、上記の理由により反映が確認できない状態だった。 * 対応: 同じルールをassets/css/style.css側に追加。こちらは * ファイル更新のたびにキャッシュ用の値が自動で変わる仕組みで * 読み込まれているため、デプロイ後は即座に確実に反映される * (assets/css/style.css参照)。ルート直下style.css側に追加された * 分はそのまま残しても実害はないため未変更。 * * v2.8.8 * - TOPページのヒーロースライダー(PC表示)で、写真左上に出るはずの * 「getaya.jp特集」アイコン(特集カテゴリーのリボン画像)が表示され * なくなっていた不具合を修正。 * 原因: このアイコンは.card-img-overlay要素の::before疑似要素 * (背景画像)として実装されており、その表示幅はCSS Grid * (grid-template-columns:max-content)によって「同じグリッド内に * 並ぶカテゴリーラベル要素の文字幅」から間接的に決まる作りになって * いた。一方、post-label-relocate.js(v2.5.0で追加、投稿一覧カードの * カテゴリーラベルを画像上からタイトル側へ移動する処理)がPC表示 * (768px以上)で対象を限定せず全カードのラベルを移動する仕様だった * ため、ヒーロースライダーのラベルもタイトル側へ移動されてしまい、 * 結果としてグリッドの中身が空になって幅が0になり、アイコンごと * 非表示になっていた(スマホ版はラベルを移動しない実装のため、 * この問題は発生していなかった)。 * 対応: post-label-relocate.jsのPC移動処理から.getaya-hero内の * カードを対象外にし、ヒーロー側ではラベルを常に画像上(.card-img- * overlay内)に残すよう変更(assets/js/post-label-relocate.js)。 * これによりPC表示でもアイコンが正しく表示されるようになり、 * あわせて文字情報エリアのタイトル上に特集カテゴリー名が重複して * 表示されていた副作用も解消される。他の投稿一覧カード(ヒーロー * 以外)の挙動には一切影響しない。 * * v2.8.7 * - v2.8.6で対応したはずの「カート・購入手続きページではフッター上部 * ウィジェットのフォールバック出力を対象外にする」処置が、実際の * カートページ(/usces-cart/)では効いていないことが判明(ライブページの * DOM確認により、このページではフォールバック経路ではなくLightning側の * 通常のfooter.php経路で普通に出力されていたため、フォールバック側の * 除外チェックに到達していなかった)。出力経路に関わらず確実に除外する * よう、WordPress標準のwidget_display_callbackフィルター(ウィジェット * 単位の表示制御用のコア機能)でfooter-before-widgetサイドバーの * ウィジェットをカート・購入手続きページでは表示しないよう修正 * (functions.php)。他のサイドバー・他のページには一切影響しない。 * * v2.8.6 * - ショッピングカートのスマホ版数量入力欄について、実機のDevTools * 確認で「width:64px !importantが勝っているにも関わらず、実際の * 描画幅は約10pxしかない(角丸だけは効いている)」という証拠が * 得られたため追加対応。原因として、同じにdisplay:grid / * display:flexを重ねているレイアウトで、flexアイテムの既定 * min-width:autoにより、指定したwidthより縮む余地が残っていた * 可能性が高いと判断。min-width・max-widthをともにwidthと同じ * 64pxへ固定し、flex-basisもauto任せではなく明示的に64pxを指定 * することで、縮む経路を塞いだ(assets/css/style.css)。 * ※本対応後も実機での見え方に改善が無い場合は、grid/flexを * table要素へ重ねる現行の実装自体を見直す必要がある。 * - カート・購入手続きページ(body.getaya-checkout)で、フッター上部 * ウィジェットのフォールバック出力がページ最下部(コピーライトの下) * に来てしまい見た目が不自然だった点について、フッターメニューの * 上へ移動することも検討したが、出力バッファリング等踏み込んだ * 変更がfunctions.php・footer.php双方の複雑な既存処理に影響する * リスクがあるため見送り、ご本人の安全優先の判断により * カート・購入手続きページではこのフォールバック自体を出さない * 仕様に変更(functions.php)。商品詳細ページなど他のページでは * 引き続き表示する。 * - フッター上部ウィジェットのPC表示時の文字サイズを、タイトル * .85rem→.8rem、リンク文字.72rem→.68remへわずかに縮小。 * スマホ表示(992px以下)は従来どおりの数値を明示的に維持する * ようメディアクエリを追加し、見た目が変わらないようにした * (ウィジェット本体のHTML/CSS側の対応、テーマ側の変更なし)。 * - フッター上部ウィジェットのリンク文字のシェブロン(›)を * .72em→1emへ拡大(色は変更なし)。また、狭いPCブラウザ幅で * タイトルの金文字が左端に寄りすぎて見える点を解消するため、 * コンテナの左パディングのみ1.25rem→1.65remへ増やした * (右側および上下は変更なし。ウィジェット本体のHTML/CSS側の * 対応、テーマ側の変更なし)。 * * v2.8.5 * - 「フッター上部」ウィジェットエリア(footer-before-widget、内部リンク集) * が商品詳細ページ(single-item)やカート／購入手続きの各STEPページには * 出力されない不具合を修正。原因はこれらのページがLightning本体の * footer.php内でfooter-before-widgetを出す経路を通っていないため * (フッターウィジェットエリア1〜3は別経路で出るので影響なし)。 * 商品詳細・カート・購入手続きという複雑な既存テンプレートを丸ごと * 置き換えるのは影響範囲が大きすぎるため避け、dynamic_sidebar_before * でこのエリアが実際に呼ばれたかを記録し、呼ばれていなければ * wp_footerの最後で1回だけ代わりに出力するフォールバックを追加した * (functions.php)。通常どおり出力されるページでは何もしないため * 二重表示は起きない。 * - フッター上部ウィジェットのタイトル文字(金色)がリンク文字と異なる * 明朝体のままだった点を、リンクと同じUDゴシック系フォントに統一 * (ウィジェット本体のHTML/CSS側の対応、テーマ側の変更なし)。 * - ショッピングカートのスマホ版数量入力欄について、同一セレクタに * 異なる値(40px)を指定していた古いブロック(v1.8.11)を削除して * カスケードの不確実性を解消。あわせて幅58px→64px、最小高さ * 34px→38pxへ拡大し、Welcart既定の薄いグレー枠(#cfcfcf)では * 暗所のスマホ画面で視認しづらいため、枠線・背景・角丸を明示して * より確実に「入力欄」と分かる見た目にした(assets/css/style.css)。 * * v2.8.4 * - フッター上部ウィジェット(カスタムHTML)向けに、内部リンク一覧の * 全幅背景ブレイクアウト(100vwブレイクアウト+内側コンテナはmax-width * 維持)・文字サイズ縮小・UDゴシック系フォント化・タイトル太字化・ * リンク文字色を白へ変更、という調整依頼に対応(HTMLファイル側のみの * 変更のため本テーマのバージョンには影響しないが記録として残す)。 * - 商品カテゴリートップ(サイドバー付き一覧、product-category-archive.php) * のヘッダー背景画像が、v2.8.3で特集アーカイブに起きていたのと同じ * 「ごく一部を異常に拡大した」ように見える不具合を起こしていたことが * 判明し修正。原因はv2.8.3の修正がスコープを.getaya-category-mainへ * 絞っただけで、その内側(本来のサイドバー付き一覧が使う300vw幅の * ::before)には手を付けていなかったため。300vw幅の箱へ * background-size:coverを使うとcoverの拡大率がその300vw幅を基準に * 計算されてしまう(実際に見える範囲は画面幅ぶんだけなのに)ことが * 根本原因のため、coverの代わりにbackground-size:100vw auto + * background-position:leftを使い、箱の見かけ上の幅に左右されない * 縮尺で表示するよう修正(assets/css/style.css)。 * - ショッピングカートのスマホ版STEP1で、数量入力欄がwidth:38px・ * padding:2pxと極端に狭く、入力欄に見えない不具合を修正。同じ行内の * 余白に十分な余裕があることを確認のうえ、width:58px・ * padding:6px 4px・min-height:34px・font-size:.92remへ拡大 * (assets/css/style.css)。 * * v2.8.3【v2.8.2フィードバック対応】 * - [getaya_category_search]ショートコードが、特集アーカイブページ設定 * (getaya-jp-core v2.4.3)の説明欄に貼っても表示されない不具合を修正 * (getaya-jp-core側の判定がWP_Term限定だったため。archive-feature.php側は * ?kwを自前のWP_Queryへ反映する処理を追加)。 * - 特集アーカイブページ設定に「ヘッダー最小高さ」「被せ色の濃さ」を追加 * (getaya-jp-core v2.4.3)。archive-feature.phpからCSSカスタムプロパティ * (--getaya-category-min-height / --getaya-category-overlay-opacity)として * 出力するよう対応。 * - 投稿カテゴリー・特集カテゴリーの各編集画面に「被せ色の濃さ」項目を追加 * (getaya-jp-core v2.4.3)。既定値も20%→35%に変更(inc/enqueue.php)。 * - 特集アーカイブページのヘッダー画像がPCで「ごく一部を異常に拡大した」 * ように見える不具合を実機調査の上で修正。原因は、サイドバー付き商品 * カテゴリー一覧専用のはずだった.getaya-category-hero::beforeの300vw幅 * 拡張ルール(v2.3.0追加)が、セレクタのスコープ漏れによりサイドバーの * 無い特集アーカイブページにも適用され、帯の実際の高さに対して画像が * 数倍に引き伸ばされていたため。.getaya-category-main配下だけに効く * よう修正(assets/css/style.css)。あわせて画像サイズを'large'から * 'full'へ変更し、解像度不足も解消(getaya-jp-core側)。 * - 特集(feature)記事詳細ページで、独自の前後記事ナビ・SNSシェアボタンが * 表示されずLightning/VK Blocks Pro標準のままだった不具合を修正 * (getaya-jp-core v2.4.3側の対応表示範囲拡張と対応。本ファイルでは * Lightning/VK Blocks Pro標準の当該要素を非表示にするCSSセレクタへ * body.single-feature/body.single-newsを追加)。 * - TOPページスマホのヒーロー写真上部に地色が細く出続けていた不具合、 * 今回ついに根本原因を特定し修正した。同一originのiframe(幅390px)を * 使って本物の狭幅ビューポートを作る手法に切り替えたことで、これまでの * ブラウザツール(resize_window)ではできなかった実際のスマホ相当の * メディアクエリ・レイアウトを検証できるようになった。 * 原因は本CSSの別の既存機能同士の意図しない衝突: v2.5.0で追加した * 「投稿一覧カードのカテゴリーラベル位置変更」機能が、スマホ幅で * .vk_post:has(.vk_post_imgOuter_singleTermLabel) .vk_post_imgOuter に * margin-top(ラベル高さぶん、実測8px)を!important付きで加えていたが、 * このセレクタがヒーロースライダー(.getaya-hero、VK Blocksの投稿一覧 * コンポーネントを流用しており同じクラス構造を持つ)の画像にも意図せず * マッチしてしまい、画像だけが8px下にずれ、その隙間にヒーローの地色が * 露出していた。.getaya-hero配下だけmargin-topを打ち消す、より詳細度の * 高いルールを追加して解決(実機相当の狭幅環境で修正前後とも数値・ * スクリーンショットで確認済み)。 * * v2.8.2【v2.8.1フィードバック対応】 * -
の露出対策を強化。旧assets/js/article-title-br.jsを * assets/js/title-br-fix.jsへ全面拡張し、記事詳細ページのH1は従来通り * 実際の改行に変換する一方、それ以外の場所は「ページ内の全テキストノードを * 走査して文字列としての
を半角スペースに変換する」処理を追加した。 * VK Blocksのカテゴリー一覧カード(.vk_post_title)がget_the_title()/ * the_titleフィルターを経由しない独自描画経路を使っており、 * getaya-jp-core側のthe_titleフィルターだけでは対応できないことが * 実機DOM調査で判明したための対応。 * - カテゴリー検索ボックス下の余白を、v2.8.1の34pxからさらに+30pxで64pxに変更。 * - カテゴリートップのページヘッダーの被せ色が、%を変更しても実機で * 変化して見えなかった件を調査。実際に見た目を支配していたのは * Lightning側が用意する別要素.page-header::before * (background-color:#14005e相当、opacity:.5固定)で、v2.8.0〜v2.8.1では * .page-header自体の背景画像にグラデーションで色を焼き込んでいたため、 * 常にこの::beforeが手前に重なって見た目にほぼ影響していなかった。 * 今回、この実際に効いている::before自体のopacityを直接20%に * 上書きする形に変更した(inc/enqueue.php)。 * - ヒーローエリア(.getaya-hero)スマホ表示で下地グレーが僅かに見える件、 * 引き続き対応。以前追加していた.vk_outer-background-areaへの * height:100%!important指定(v2.8.0の「保険」)を、逆効果になり得ると * 判断し撤去。代わりにOuter自体のmin-heightをスマホ幅で明示的に0へ * 上書きする指定を追加した。この環境のブラウザツールでは実際の * スマホ幅を再現する手段が無く、実機での見た目までは確認できていない * (最終確認を実機でお願いしたい)。 * - 「特集」投稿タイプ全体のアーカイブページ(/feature/)に、 * 管理画面(getaya-jp-core v2.4.2)から代表色・ヘッダー画像・説明文を * 設定できるようにした(archive-feature.php)。既存の * .getaya-category-heroデザイン・.getaya-category-description * デザインをそのまま流用しているため、新規CSSの追加はなし。 * - 特集・お知らせ一覧カード(template-parts/getaya/post-card.php)の * カテゴリーラベルバッジに、特集カテゴリーの「カテゴリーカラー」設定 * (feature-category term meta)を反映するようにした(未設定時は * 従来通りの既定色)。 * - 記事詳細ページの「前の記事」が記事自身へのリンクになる不具合を修正 * (getaya-jp-core v2.4.2側)。 * * v2.8.1【v2.8.0フィードバック対応】 * -
を含むタイトルが、TOPヒーロースライダーやカテゴリー一覧など * getaya-jp-core側のショートコードを経由しない場所でも文字列として * 露出していたため、getaya-jp-core v2.4.1側でthe_titleフィルターに *
→半角スペース変換を追加(記事詳細ページの、その記事自身の * タイトル(H1)だけは対象外)。子テーマ側の変更はなし。 * - カテゴリー検索ボックス(.getaya-category-search)を、PCでも中央寄せに * 変更。入力欄の縦幅を少し狭く(2.3rem→1.9rem)、ボックス下の余白を拡大。 * - カテゴリートップのページヘッダー背景に重ねる色を、#14005eの30%→20%に * 変更(inc/enqueue.php)。 * - ヒーローエリア(.getaya-hero)のスマホ表示で、写真が4:3クロップの * 縦長表示になってしまっていたのを、幅100%・縦は写真の自然な比率のまま * (height:auto)に戻した(style.css)。写真上部の隙間対策自体は維持。 * - 「特集(feature)」のラベルをv2.4.0以前の「特集」に戻す(getaya-jp-core * v2.4.1)一方、実際に一番目立つ一覧見出しはgetaya.jp 特集」表示のままにする * ため、archive-feature.phpのH1を直接書き換え、特集カテゴリートップ * (/feature-category/配下)のページヘッダー見出しは新規JS * (assets/js/feature-category-title.js)で個別に差し替える方式にした。 * - 特集・お知らせ一覧カード(template-parts/getaya/post-card.php)に、 * そのカードのカテゴリー名を左上に表示するラベルバッジを追加 * (.getaya-post-card__term-label)。 * * v2.8.0【スライダー微調整・カテゴリートップ機能・記事詳細ページ機能を追加】 * - 汎用記事スライダー(getaya-post-slider)の文字サイズを14px→15px * (スマホは13px→14px)に拡大し、Swiperのスライド間隔(spaceBetween)を * 16→12(576px以上は20→16)に詰めた(assets/js/getaya-sliders.js、 * assets/css/style.css)。あわせて、スマホでタイトルの3行目が * 中途半端に切れて見えていた不具合対策として、スマホ表示時のみ * -webkit-line-clamp を2→3に変更し、縦幅に余裕を持たせた。 * - ヒーローエリア(.getaya-hero)で、実機で写真上部と下地グレー背景の * 間に隙間が見える不具合への応急対応(①)として、画像コンテナの * display:block化・line-height:0化などの防御的CSSを追加した * (assets/css/style.css)。VK Blocks側の内部構造に起因する現象の * ため、完全解消しない場合はスライダー本体の作り直し(②)を * 別途検討する前提。 * - getaya-jp-core v2.4.0で追加した[getaya_category_search] * ショートコード(カテゴリー説明欄に貼るだけで使える、そのカテゴリー内 * 限定の記事検索フォーム)の見た目を追加(.getaya-category-search、 * PC横一列/スマホ二段中央揃え)。 * - getaya-jp-core v2.4.0で追加した、記事詳細ページの同カテゴリー内 * 限定「前の記事／次の記事」ナビ(.getaya-article-nav)の見た目を追加。 * あわせて、Lightning / VK Blocks Pro / VK All in One Expansion Unit * 標準の前後記事ナビ(.vk_posts.next-prev)・SNSシェアボタン * (.veu_socialSet等)を記事詳細ページ(商品詳細を除く)だけ非表示にし、 * getaya-jp-core側が追加する自前のナビ・商品詳細ページと同デザインの * シェアボタンに差し替えた(シェアボタン自体のCSSは既存の * .getaya-product-share/.getaya-share-buttonをそのまま流用)。 * - カテゴリー編集画面の画像が設定されている場合、投稿カテゴリー・特集 * カテゴリーのトップページヘッダー(.page-header)背景をその画像に * 差し替える機能を追加(inc/enqueue.phpでwp_add_inline_style、 * getaya-jp-core側のgetaya_jp_core_get_current_category_top_header_image_url()を * 利用)。#14005eを30%の濃さで重ねる(Welcart商品カテゴリー独自の * カスタマイザー連動オーバーレイとは別仕様として、あえて簡易にした)。 * - 記事詳細ページのH1(.page-header-title)で、タイトルに含まれる
が * 文字列のまま表示されてしまう不具合を、新規JS * (assets/js/article-title-br.js)で実際の改行として機能するよう修正した * (一覧・スライダー側はgetaya-jp-core側で半角スペースに変換済みのため対象外)。 * * v2.7.6【TOPページ用スライダーの見た目・動きを追加】 * - VK Blocks Proの投稿リストスライダーがサイト固有の干渉でカテゴリー * 絞り込みを無視する不具合(実機診断で確認済み)を回避するため、 * getaya-jp-core v2.3.0で追加した2つのショートコード([getaya_item_carousel] * [getaya_post_slider])に対応する見た目とSwiper初期化を追加した。 * - assets/css/style.css末尾に「商品カルーセル」「汎用記事スライダー」の * スタイルを追加。商品カルーセルは現行デザイン(止まらない連続スクロール、 * 商品名は非表示、価格は白文字中央揃え)を再現。記事スライダーは * タイトル文字を黒から白に変更し、カードの角丸・ホバー演出、 * ブランドカラー(金 #d8ce63)の円形ナビゲーション矢印を新規に追加した。 * - 新規ファイル assets/js/getaya-sliders.js を追加し、inc/enqueue.php * (tsujiya_child_enqueue_assets())で読み込むようにした。VK Blocks Proが * 読み込み済みのSwiper.js(window.Swiper)を再利用し、読み込み完了を * ポーリングで待ってから初期化する。既存のJS読み込み群と同じく、 * 対象要素が存在しないページではJS側で即座に何もしないため、 * 全ページで読み込んでも害はない。 * * v2.7.5【方針転換・実機のマウスホイールスクロールで確認】 * - 【症状の取り違えを訂正】v2.7.2〜v2.7.4は「商品写真をヘッダーの * 下に正しく固定表示させる」方向でtopのオフセット計算を繰り返し * 修正していたが、実際の問題は逆で、「固定表示された写真が、 * スクロールにつれて左カラムの次の行(購入エリア)に覆いかぶさる」 * ことだった。 * - v1.9.8とv2.7.3の実ファイル比較(第三者によるレビュー)を受けて、 * 商品写真をposition:static !important(固定表示を廃止)にした * 状態を実機に一時適用し、マウスホイールで実際にスクロールして * (1)写真が通常通り上へ消える (2)購入エリアに重ならない * (3)右の商品情報カラムに影響しない、の3点を確認した * (4点目のスマホは元々このsticky指定自体が及んでいない * ため対象外)。 * - 商品写真をわざわざ固定表示させる必要性自体が無かったと判断し、 * sticky化・そのための位置補正(v2.7.2〜v2.7.4で追加した * ヘッダー高さぶんのtopオフセットや、購入エリア接近検知による * IntersectionObserver解除処理)を全て撤去し、通常のドキュメント * フローに戻した。商品カテゴリー一覧のサイドバーやスマホ検索バー等、 * 他の用途のsticky/--getaya-sticky-offsetには一切手を入れていない。 * * v2.7.3【実機確認済み(DOM実測、複数のスクロール量で重なりが * 無いことを確認)】 * - 【不具合修正・根本対応】商品詳細ページ(PC)で商品写真がヘッダーの * 裏に隠れる不具合が、v2.7.2の修正(JS変数--getaya-sticky-offsetを * 使う方式)でも直っていないとの報告を受け、v1.9.8(問題が * 発生していなかった版)と現行版を突き合わせて差分を調査した。 * v1.9.8には独自ヘッダー実装(assets/css/getaya-header.css、 * inc/getaya-header-functions.php)自体が存在せず、ヘッダーは * Lightning標準のままだった。後から追加された独自ヘッダーは * @media (min-width: 992px)の範囲だけ position:sticky になる * 設計になっており、これが商品写真のsticky計算とかみ合って * いなかったことが直接の原因と確定した。 * v2.7.2のJS方式(main.jsのsetStickyOffsetがscroll/resize時に * ブラウザの再描画タイミングで再計算する仕組み)は、実行タイミングに * 依存するため確実性を欠くと判断し、JSに一切依存しないCSSだけの * 方式に変更した。独自ヘッダーがstickyになるのと同じ * @media (min-width: 992px)の範囲でだけ、ヘッダーの実測高さ * (80px)ぶんのオフセットを固定値で持たせる(WordPress標準の * body.admin-barクラスで管理バー表示時はさらに32pxぶん追加)。 * このCSSだけの値はDOM実測で128px(80+32+16)を正しく持つことを * 確認し、複数のスクロール量(300px・800px)でヘッダーとの重なりが * 発生しない(隙間がマイナスにならない)ことを確認済み。 * ※ヘッダーのデザインを変えて高さが変わった場合は、この80pxという * 固定値も合わせて更新する必要がある。 * * v2.7.2【実機確認済み(DOM実測)】 * - 【調整】新規入会フォームの文字サイズが、v2.7.0(小さすぎ)と * v2.7.1(大きすぎ)のちょうど中間になるよう.85remに調整。 * - 【不具合修正】商品詳細ページ(PC)で、スクロール時に商品写真が * サイトヘッダーの裏に隠れる不具合を修正。写真のスティッキー位置 * (top)が、ヘッダーの実際の高さ(80px)ではなく管理バーの高さ * (32px)だけを見て計算されていたのが原因。他の場所で確立済みの * --getaya-sticky-offset(ヘッダーの実際の高さを正しく測る仕組み) * に統一した。あわせて、そのassets/js/main.jsの計算タイミングが * 早すぎてヘッダーのレイアウト確定前に誤った値のまま固定される * ケースが実機で見つかったため、読み込み直後に少し遅らせた * 再計算を保険として追加した(手動での再実行で32px→80pxに * 正しく直ることを実機で確認済み)。 * * v2.7.1【実機確認済み(DOM実測。スクリーンショット機能がこの * セッションで断続的に失敗したため、getBoundingClientRect/ * getComputedStyleによる数値確認で担保)】 * - 【不具合修正】ログイン・新パスワード取得ページの入力欄・箱に、 * HTMLのsize="20"属性(Welcart側が付与)がブラウザの初期サイジング * として働き、通常のCSS指定だけでは負けて幅が200px前後に固定され、 * 結果として入力欄が箱からはみ出して見えていた。!importantで * 確実に上書きし解消(箱420px・入力欄340pxで実測確認)。 * - 【不具合修正】新規入会フォームのラジオボタン(メルマガ確認等) * 自体の幅が、原因不明の他ルールにより120px相当まで広がっており、 * 丸印とラベル文字の間に不自然な余白ができていた。!importantで * 本来の大きさ(13px前後)へ戻した。 * - 【不具合修正】フォーム内の文字が12px相当まで縮んでいて読みにくかった。 * th/td/labelにfont-size:1rem(サイト共通の基準フォントサイズに * 連動)を!importantで明示し解消。 * - 【変更】PC幅にもう少しゆとりが欲しいとの要望で、新規入会フォーム * (.customer_form)を640px→820pxへ拡大。親要素(#memberpages)の * 上限も合わせて広げないと実際には広がらないことが実機で判明した * ため、両方修正。 * * v2.7.0【実機確認済み(PC幅、3ページとも)】 * - 【新規】会員ページ(ログイン・新パスワード取得・新規入会)の * フォームデザインを刷新。Welcartが出力するHTMLは、新規入会 * フォームだけを使い(STEP1-4の * チェックアウトフォームと全く同じクラス構成)、ログイン・ * 新パスワード取得は