トラブルシューティング

結論

ZenBlocks の問題の多くは、CSSキャッシュのクリア・プラグインの再有効化・ブラウザキャッシュのクリアで解決します。以下のトラブル別に具体的な手順を案内します。

ブロックが挿入パネルに表示されない

確認手順

  1. プラグインが有効化されているか確認
  • WordPress管理画面 > プラグイン を開く
  • ZenBlocks が一覧にあり、「有効」と表示されているか確認
  • 「無効」の場合は 有効化 をクリック
  1. WordPress のバージョンを確認
  • ダッシュボード > 更新 で WordPress バージョンを確認
  • ZenBlocks は WordPress 6.0 以上が必要
  1. クラシックエディタが有効になっていないか確認
  • Classic Editor プラグインが有効な場合、ブロックエディタが無効化されている可能性がある
  • 設定 > 投稿設定 でデフォルトのエディタが「ブロックエディタ」になっているか確認
  1. 他のプラグインとの競合を確認
  • 他のプラグインを一時的にすべて無効化し、ZenBlocks のみ有効にして確認
  • 表示された場合は、他のプラグインを1つずつ有効化して競合原因を特定

設定パネルが開かない・表示されない

確認手順

  1. ブロックが選択されているか確認
  • ブロックをクリックして選択状態にする
  • ブロックの周囲に選択枠（青い枠線）が表示されているか確認
  1. サイドバーが表示されているか確認
  • エディタ右上の 設定アイコン（歯車マーク）をクリックしてサイドバーを表示
  • サイドバー上部の ブロック タブが選択されているか確認
  1. ブラウザの開発者ツールでエラーを確認
  • ブラウザの開発者ツール（F12）を開く
  • Console タブにJavaScriptエラーが出ていないか確認
  • エラーがある場合はスクリーンショットと共にサポートフォーラムに報告

フロントエンドでスタイルが適用されない

確認手順

  1. CSSキャッシュをクリアする
  • WordPress管理画面 > 設定 > ZenBlocks を開く
  • Clear CSS Cache ボタンをクリック
  • 対象のページを再保存（更新ボタンを押す）
  1. ブラウザキャッシュをクリアする
  • ブラウザのキャッシュをクリア
  • または強制リロード（Ctrl+Shift+R / Cmd+Shift+R）
  1. ページを再保存する
  • エディタで対象ページを開く
  • 更新 ボタンをクリックしてページを再保存
  • CSSファイルが再生成される
  1. サーバーサイドキャッシュを確認
  • キャッシュプラグイン（WP Super Cache、W3 Total Cache、LiteSpeed Cache など）を使用している場合は、そのキャッシュもクリアする
  • CDN（Cloudflare 等）を使用している場合は CDN キャッシュもパージする

ポイント: ZenBlocks のCSSキャッシュは /wp-content/uploads/zenblocks/ に保存されます。このディレクトリが書き込み可能であることを確認してください。

レスポンシブ設定が反映されない

確認手順

  1. デバイス別の値が設定されているか確認
  • サイドバーの各設定パネルで、デバイスアイコン（PC / MD / TB / SP）をクリックして確認
  • 特定のデバイスで値が空の場合、PC の値がフォールバックとして使われる
  1. ブレークポイント設定を確認する
  • 設定 > ZenBlocks でブレークポイントの値を確認
  • カスタマイズした値が意図通りか確認
  1. CSSキャッシュをクリアする
  • レスポンシブCSSはキャッシュされるため、設定変更後はキャッシュクリアが必要
  • 設定 > ZenBlocks > Clear CSS Cache をクリック
  1. ブラウザのレスポンシブモードで確認する
  • ブラウザの開発者ツール（F12）を開く
  • デバイスツールバー（レスポンシブモード）でブレークポイントに合った幅に変更
  • 各ブレークポイントでの表示を確認

アニメーションが動かない

確認手順

  1. Pro機能が有効か確認（アニメーションはPro機能）
  • 設定 > ZenBlocks でライセンスが「Active」か確認
  • ZenBlocks Pro プラグインが有効化されているか確認
  1. アニメーション設定を確認
  • サイドバーの アニメーション設定 パネルを開く
  • アニメーションの種類が「なし」以外に設定されているか確認
  • Duration（再生時間）が 0 になっていないか確認
  1. フロントエンドで確認する
  • アニメーションはエディタ内でもプレビュー可能だが、最終確認はフロントエンドで行う
  • ページをリロードしてアニメーションの再生を確認
  1. トランジション設定との競合を確認
  • アニメーションとトランジションの設定が同時に有効な場合、意図しない動作になることがある
  • トランジション設定パネルに注意表示が出ていないか確認

ホバーエフェクトが効かない

確認手順

  1. Hoverタブに値が入っているか確認
  • サイドバーの設定パネルで Hover タブを選択
  • 変化させたいプロパティ（背景色、文字色など）に値が入っているか確認
  1. トランジション設定を確認
  • トランジション設定パネルの Duration が 0ms でないか確認
  • 推奨値: 200〜400ms
  1. CSSキャッシュをクリアして再確認

詳しくは buttonBasic FAQ: ホバー時のスタイルが反映されない を参照してください。

ブロックバリデーションエラーが表示される

確認手順

  1. プラグインを最新版に更新する
  • WordPress管理画面 > プラグイン > 更新 から ZenBlocks を最新版に更新
  1. ブロックを復旧する
  • エラーメッセージの ブロックの復旧を試みる をクリック
  • 復旧後、設定値が意図通りか確認してページを再保存
  1. それでも解決しない場合
  • ブロックを一度削除して新しく作り直す
  • カスタムデザインとして保存してあれば、新しいブロックにプリセットを適用して復元

注釈: バリデーションエラーは、プラグインのアップデートでHTMLの出力形式が変更された場合に発生することがあります。ブロックの復旧で自動的に新しい形式に更新されます。

問題が解決しない場合

上記の手順で解決しない場合は、WordPress.org サポートフォーラム に投稿してください。

投稿の際は、以下の情報をご記載ください：

  • WordPress のバージョン
  • PHP のバージョン
  • 使用中のテーマ名
  • ZenBlocks / ZenBlocks Pro のバージョン
  • 問題の再現手順
  • スクリーンショットまたは画面録画
  • ブラウザの開発者ツール Console に表示されているエラーメッセージ