ブログのhtmlエディタについて

Topic summary

Shopifyのブログ編集で、HTMLエディタ→通常(WYSIWYG)エディタに切り替えるとコードが自動整形・変更され、投稿時にレイアウトが崩れる問題。編集画面のデフォルトが通常エディタのため、HTMLコードを毎回貼り直す必要があるという相談。

回答要点:

  • 原因: WYSIWYGエディタ(見たまま編集)の仕様・設定により、HTMLが書き換わるため。
  • 防止策: 基本的に難しい(設定での無効化は見当たらない)。
  • デフォルトをHTMLに: 標準機能では不可。代替として、ページ読み込み時に切替ボタンを自動クリックするブラウザ拡張で擬似対応の可能性。

提案された代替:

  • 切り替えても崩れないHTMLへ組み直す。
  • LiquidやJavaScriptで必要情報を出力する別の実装に変更。

最新状況/結論:

  • 投稿者はサポートに問い合わせたが技術的説明は得られず。
  • HTMLの組み直しを検討する方針に転換。

ステータス: 内蔵の設定変更による明確な解決策は出ておらず、実装変更で対応する方向。

Summarized with AI on February 22. AI used: gpt-5.

ブログ記事にhtmlを記述して、商品を表示するモジュールを追加しています。

htmlエディタに切り替えてからコードを記述して、そのまま投稿すると、記述通りに反映されるのですが、一度でもhtmlから通常のエディタに切り替えると、コードの内容が変わってしまうようで、投稿するとレイアウトが崩れて表示されます。

ブログ記事を編集する際は、デフォルトはhtmlエディタではなくテキストを入力するエディタなので、このモジュールを入れた記事を編集する際は、再度htmlエディタにモジュールのコードを貼り付けないといけない状態です。

そこで質問なのですが、

①なぜエディタを切り替えるとコードが書き変わってしまうのでしょうか?
②上記を防ぐ方法はありますか?
③防ぐ方法がない場合、ブログの編集画面をデフォルトでhtmlエディターに設定することは可能ですか?

以上、よろしくお願いいたします。

個人的な回答になりますが以下のようになります。

①なぜエディタを切り替えるとコードが書き変わってしまうのでしょうか?

そういう設定だからとしか言えないかなと思います。

意図をお知りになりたいのであればShopifyのサポートに直接問い合わせることをお勧めします。

技術的な事柄に関してであれば「WYSIWYGエディタ」などで検索いただくと参考になる情報が見つかると思います。

②上記を防ぐ方法はありますか?

おそらく無いと思います。

③防ぐ方法がない場合、ブログの編集画面をデフォルトでhtmlエディターに設定することは可能ですか?

無理やりな方法になりますが、ページ表示時に切り替えボタンを自動でクリックさせるブラウザ拡張機能を作れば可能かもしれません。

以上ですが、切り替えても問題が出ない形に該当のHTMLを組み直すか、LiquidやJSを使って必要な情報を出力するような別の仕組みへの変更を検討される方が良いかなと思います。

ありがとうございます。

サポートには問い合わせましたが、技術的なことはわからない、の一点張りで話になりませんでした。

htmlの組み直しを検討することにします。