kdcsライブラリー

レスポンシブデザインで、swiperのサムネイル連動スライドを設置するとfirefoxでサムネイルが画面幅変更時にちらつく。

これを防止する方法

swiperのサムネ要素（divタグに.swiper-slideのクラスが付いている）にcssを足す
※強制的に指定するので、!importantが必要
※複数個所ある場合、「#hogehoge」の部分を合わせる

#hogehoge-thumbnail .swiper-slide {
    transform: none !important;
}

スマートフォンでページの途中でモーダルメニューを開閉したときにページ内での位置を保持して再表示させる方法。

※コード内でスクロール位置を先に取得して保存させないと、cssのスタイルが先に実行されて「top: 0px」になってしまい、メニューの開閉でページトップに戻されてしまう。

動作OKのコード（scrollアニメ表示版があります）

const trigger = document.querySelector('.globalMenu');
const body = document.body;
const modal = document.getElementById('globalNavArea');
let scrollPosition = 0;

const toggleNav = () => {
  const isOpening = !trigger.classList.contains('is-active'); // 開くかどうかを事前に判定

  if (isOpening) {
    scrollPosition = window.scrollY; // スクロール位置を先に取得
    console.log('保存する scrollPosition:', scrollPosition);
  }

  const isActive = trigger.classList.toggle('is-active');
  body.classList.toggle('is-nav-opened', isActive);
  body.classList.toggle('is-nav-close', !isActive);

  if (isActive) {
    body.style.top = `-${scrollPosition}px`;
    modal.scrollTop = 0;
  } else {
    body.style.top = '';
    window.scrollTo(0, scrollPosition);
  }
};

trigger.addEventListener('click', toggleNav);

こちらはモーダルウィンドウメニューを開いたときにscrollアニメを5秒間表示させるスクリプト
※メニュー開閉時のページ位置保持も修正されています

// 読み込み完了するまでグローバルメニューを非表示にする
// style.cssで「#globalNav」をdisplay: none;にしておく
window.onload = function () {
  document.getElementById('globalNav').style.display = 'block';

// スマホ グローバルメニュー（メニューを開くと5秒間scrollアニメを表示する） ----
const trigger = document.querySelector('.globalMenu');
const body = document.body;
const modal = document.getElementById('globalNavArea');
const scrollNotice = document.querySelector('.sp_block.gnScroll');
let scrollPosition = 0;

let fadeOutTimer = null;
let hideTimer = null;

const toggleNav = () => {
  const isOpening = !trigger.classList.contains('is-active');

  if (isOpening) {
    scrollPosition = window.scrollY;
    console.log('保存する scrollPosition:', scrollPosition);
  }

  const isActive = trigger.classList.toggle('is-active');
  body.classList.toggle('is-nav-opened', isActive);
  body.classList.toggle('is-nav-close', !isActive);

  if (isActive) {
    // スクロールを止める
    body.style.position = 'fixed';
    body.style.top = `-${scrollPosition}px`;
    body.style.left = '0';
    body.style.right = '0';
    modal.scrollTop = 0;

    clearTimeout(fadeOutTimer);
    clearTimeout(hideTimer);

    if (scrollNotice) {
      scrollNotice.style.display = 'block';
      scrollNotice.classList.remove('fade-out');

      fadeOutTimer = setTimeout(() => {
        scrollNotice.classList.add('fade-out');
      }, 5000);

      hideTimer = setTimeout(() => {
        scrollNotice.style.display = 'none';
        scrollNotice.classList.remove('fade-out');
      }, 5500);
    }
  } else {
    // スクロールを戻す
    body.style.position = '';
    body.style.top = '';
    body.style.left = '';
    body.style.right = '';
    window.scrollTo(0, scrollPosition);

    clearTimeout(fadeOutTimer);
    clearTimeout(hideTimer);

    if (scrollNotice) {
      scrollNotice.style.display = 'none';
      scrollNotice.classList.remove('fade-out');
    }
  }
};

trigger.addEventListener('click', toggleNav);

ページトップへのスクロールをスムーズに移動させるためにjQuery＋smoothscroll.jsを使用していたが、以下のようにjavascriptだけで動作するようにした。

common.js

const topButton = document.querySelector('#page-top-js');

topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

これでは古いiosのsafariでは「behavior: ‘smooth’」がサポートされていないので、「smoothscroll.polyfill」を使う。

footer.php
※common.js内の記述より先に読み込む必要があるのでfooter.phpに記述する。

<script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
<script>
  // ポリフィルを初期化
  smoothscroll.polyfill();
</script>

但し、2022年4月時点で最新のSafari15.4にて、scroll-behaviorが使用できるようになっているので最近のブラウザだけに対応すればよければ以下のcssでOK。

html {
  scroll-behavior: smooth;
}

数字で入力した金額にカンマを付けたり、前に～や後ろに～を付けるだけでなく4000～10000など範囲のある金額を表示させる方法。

～が3種類（チルダmac・波ダッシュwindows・半角チルダ）あるため、～に絞らず数字だけ抽出して半角とカンマ処理させることにした。最終的に金額の後ろに円を付ける。

※例は宴会プラン用（banquet_price・banquet_tilde_position）

<?php
$price_raw = get_field('banquet_price'); // 例: "４０００～１００００" や "4000"
$tilde = get_field('banquet_tilde_position'); // 「before」「after」「none」

if ($price_raw) {
    // 全角数字を半角に変換
    $price_raw = mb_convert_kana($price_raw, 'n');

    // 数字部分だけ抽出してカンマを付ける
    $price_text = preg_replace_callback('/\d+/', function($matches) {
        return number_format($matches[0]);
    }, $price_raw);

    // 「円」を最後に追加
    $price_text .= '円'
;
    // 「～」の位置を制御
    if ($tilde === 'before') {
        $formatted_banquet_price = '～' . $price_text;
    } elseif ($tilde === 'after') {
        $formatted_banquet_price = $price_text . '～';
    } else {
        $formatted_banquet_price = $price_text;
    }
}
?>

今までは「Better Delete Revision Manager」を利用していたが、プラグインの更新が止まっているので別のプラグインに変える必要が出てきた。

リビジョンを使用しない場合や数を制限する方法はwp-configに直接記述する手段もある。

wp-config.php
リビジョン無効化

define('WP_POST_REVISIONS', false); 
//ここより上に追記
require_once(ABSPATH . 'wp-settings.php');

リビジョン数制限

define('WP_POST_REVISIONS', リビジョンの数);

代替プラグインとして「WP-Optimize – Cache」検討中（2025.9.27）