デバイス別設定が反映されない時の確認 – ZenBlocks buttonBasic
結論
デバイス別設定が反映されない原因は、**CSSキャッシュの残存・ブレークポイント値の不一致・テーマCSSとの競合**のいずれかです。特にブレークポイントの変更直後はCSSキャッシュのクリアが必要です。
—
原因
- **CSSキャッシュが古い**: レスポンシブCSSはキャッシュとして生成されるため、設定変更後にキャッシュが更新されないと古い値が適用されます
- **ブレークポイント値の変更後にCSSが再生成されていない**: ブレークポイントの値を変更した場合、CSSファイルの再生成が必要です
- **テーマCSSとの詳細度の競合**: テーマのCSSセレクタがZenBlocksのレスポンシブCSSより詳細度が高い場合、テーマ側の値が優先されます
- **エディタのプレビューで確認している**: エディタのレスポンシブプレビューはiframeをリサイズする仕組みのため、フロントエンドと差異が生じることがあります
- **デバイスごとの値が未設定**: 特定デバイスの値が空の場合、PC（デフォルト）の値がフォールバックとして適用されます
解決手順
- エディタのプレビューではなく、**実際のフロントエンドページ**を開く
- ブラウザの開発者ツール（F12）を開く
- レスポンシブモード（デバイスツールバー）で対象の画面幅に変更
- ボタンの computed styles で意図した値が適用されているか確認
- ZenBlocksのCSSキャッシュディレクトリ `/wp-content/uploads/zenblocks/` を確認
- ブラウザキャッシュをクリア（Ctrl+Shift+R / Cmd+Shift+R）
- CDNを使用している場合はCDNのキャッシュもパージする
- サーバーサイドキャッシュプラグイン（WP Super Cache, W3 Total Cache 等）がある場合はそちらもクリア
- エディタのサイドバー（グローバル設定）でブレークポイント値を確認
- ZenBlocksのブレークポイントは以下の初期値:
- **MD（タブレット）**: 1024px
- **TB（小タブレット）**: 768px
- **SP（スマートフォン）**: 480px
- テーマのブレークポイントとの整合性を確認
- ブレークポイント値を変更した場合、レスポンシブCSSファイルが自動再生成されることを確認
- ブラウザの開発者ツールで対象ボタンのCSSを確認
- ZenBlocksのスタイルが取り消し線で消されていないか確認
- テーマCSSが優先されている場合、ZenBlocksの設定が上書きされています
- テーマ側のCSS調整が必要な場合があります
- エディタでデバイスプレビューを切り替えながら、各設定パネルの値を確認
- タブレットやスマホで空白（未設定）の項目は、PC値がフォールバックされます
- 意図的にデバイス別の値を変更したい場合は、明示的に値を入力してください
注意点
レスポンシブ関連の不具合は、SCSSベーススタイルとPHP動的CSSのセレクタ詳細度の不一致が原因であることが多いです。
エディタのレスポンシブプレビューはiframeをリサイズして実現しています。テーマのCSS影響で多少の差異が出る場合があるため、正確な確認は必ずフロントエンドで行ってください。
ブレークポイントの変更はサイト全体のレスポンシブ動作に影響します。変更は慎重に行ってください。