前略、omochi さん

Google ChromeよりFirefoxの方がわかりやすいようなので、Firefoxでのやり方を書きこんでみます。

Firefoxでサイトを表示して、ヘッダー部分で右クリックし、「要素を調査」を選択するとデベロッパーツールが表示されます。

デベロッパーツールのインスペクターで header タグを選択します。

次にCSSのセレクタの「.header」を探して以下のプロパティと値を入力するか、テキストエディター等で記述したものをコピー＆ペーストします。

background-image: url( http://demo.local/wp-content/uploads/2020/12/photo-name.png );

url部分には、ダッシュボードのメディアにアップロードした背景画像用の画像のurlを指定してください。

omochi さん

上記の方法で、Cocoon設定のヘッダータブから設定した場合とほぼ同様に表示されるような気がしますので、シュミレーションができそうです。

Firefoxをインストールしていない場合は、無料ですので、インストールなさってください。

omochi さん

ロゴ画像の方をシュミレーションなさる場合は、Firefox該当するサイトを表示して、サイトの名前の真上で右クリックするして、「要素を調査」を選択すると、デベロッパーツールが表示されます。

<span class="site-name-text" itemprop="name about">あなたのサイト名</span>

を選択して右クリックし、「HTMLとして編集」を選択します。

表示された四角の枠の中のコードを以下のものと入れ変えます。

<span class="site-name-text" itemprop="name about">
<img class="site-logo-image header-site-logo-image" src="http://demo.local/wp-content/uploads/2020/11/rogo-rest-02-1.png" alt="demo">
</span>

上記のコードを上書きペーストすればOKです。

上記のコードのURL部分には、メディアにアップロードした画像のURLを指定してください。

src="設定したい画像のURL"のような感じです。

四角の枠の中を書き替えたら、左側の余白のどこでもよいので、クリックします。

すると、コードを書き替えた表示が適用されます。

omochi さん

上記の方法がよくわからない場合は、アクセスの少ない深夜や早朝などの時間帯を選んで、実際に適用してみるというのが手っ取り早いかもしれません。

あとは、ご自身のパソコンにローカルのテストサイトを作って、そこでシュミレーションするとよろしいかと思います。

以下のサービスを利用すると、簡単にローカルのテストサイトを作ることができます。

https://localwp.com/

omochi さん

もし、Cocoonのプレビュー機能の不具合であった場合は、テーマ作者様が修正くださるかもしれません。

「まとめて保存」ボタンを押下すると、いきなり本番サイトに反映されてしまいます。

申し訳ないですが現在そういう仕様です。
どうしても事前に見る場合は、手間はかかりますがリフィトリーさんが書かれたようにするしかないかもしれません。

@leafytree

丁寧にご教授くださり、誠にありがとうございました！

ブラウザのデベロッパーツールで確認できました！

ローカルのテスト環境も、後ほどトライして使えるように勉強していきます。

本当にありがとうございました！

@yhira

ご確認ありがとうございます！

やはり仕様ですよね…過去の他の質問者様のやりとりを見て、おそらくそうなのかなと思ったのですが…申し訳ありません…。

みなさまが事前に確認している方法があるのか、どのようにすれば確認できるのかわからず、質問させていただきました。

おかげで大変参考になりました、本当にありがとうございました！

僕の場合は、気になる部分を変更するとき、変更項目を一つだけにしておいて、問題があればすぐに元に戻して設定を保存するみたいなことをしています。
事前確認機能を実装すると、どうしても開発コストがかかってしまうので現在の仕様にさせていただいています。
恐れ入ります。