●原因

図示の通り、</div>が余分にあるようです。

●対策

フロントページのコードを確認して下さい。
問合せ前に、Chrome拡張「HTMLチェッカー」を導入し、事前チェックする事をお勧めします。

 chu-yaさま

いつもありがとうございます。

私はプログラミング知識がないため、「カスタマイズ＞追加CSS」しか触ったことがないのですが、フロントページのコードが間違っているということは、誰かが触っているということでしょうか？

私にはこちらをどこから直せばよいかわからないので、コーディングのできる友人に頼んで、色々試行錯誤してみます。ありがとうございます。

Chrome拡張「HTMLチェッカー」についても、私に扱えるかどうか怪しいものの、インストールしてみますね。

https://marunagekanri.com/comps/
詳しくは調べていませんが、上記ページでは、サイドバーがカラム落ちはしていません。
なので、本文中に記述したタグなどに問題があるのではないでしょうか。
chu-yaさんのスクリーンショットを見る限り「24時間対応メールお問い合わせフォーム」の下あたりっぽいですが。

既に、皆さんがお書きになった通りですが。

以下の赤くなっているdivの閉じタグが変だと思います。

投稿者:: @masala

↑

コーディングのできる友人に頼んで、色々試行錯誤してみます。ありがとうございます。

コーディングというのか、エディタの使い方というのか。
いずせにせよ、お分かりになる方に、一度HTMLの構造を見ていただくと良いと思います。

皆様、ありがとうございます。

出張後に発熱で寝込んでおりました、、これより頂いた内容に全て目を通させていただきます。

返信遅くなり失礼いたしました。

わいひらさま  ｍｋ２さま

確認したところ、

  ｍｋ２さまの仰るように、

1度、ブロックエディタで作成したものを、クラシックエディタで再編集して、HTMLの構造を壊してしまっているような気はします。

が問題な気がします。

クラシックエディタに慣れているので、こちらを使っているのですが、おそらくブロックエディタでないと（もしくはhtmlが書けないと）作れないものがあるようで、本来こうした使い方は望ましくないのかと思いますが、

クラシックエディタで作れない部分だけを、ブロックエディタでつくった後に、もう一度クラシックエディタに戻して作成していました。

※私はHTMLのことがわかっておらず、直接コードに手を加える能力がない（加えたことがない）ため、おそらくコーディングミスではなく、ｍｋ２さまの指摘された部分かな、と消去法的に判断しました。

頂いたコメントを見る感じですと、この2つを混ぜて使うことは良くなさそうなのと、まだ中身はスケルトンだけで、あまり触ってないので、一度トップページの固定ページの中身は全部消してしまおうと思いました。

その後は、クラシックエディタもしくはブロックエディタだけで、自分にできることをやろうと思いました。

ありがとうございます。

投稿者:: @masala

↑

おそらくブロックエディタでないと（もしくはhtmlが書けないと）作れないものがある

これはそうだと思います。

投稿者:: @masala

↑

本来こうした使い方は望ましくないのかと思います

そんなことはないと思います。
私も時々（年に数回ですが）やります。

私も、本番ではクラシックエディタを使用しています。

ただ、クラシックエディタは、クセが強いと思います。
その動作を知っておかないと、いろいろ苦労することもあるようには思います。

あとは、HTMLは、開始タグと終了タグ（閉じタグ）に囲まれた構造だということだけでも、分かっているとかなり違うようには感じます。

（今回はおそらくdivの閉じタグを消すだけで上手くいきそうな気はします、それ以外の調整も必要かもしれませんけれど）
 

 
今回の事象を再現はできませんし、ちょっと違うのかも知れませんが、一例を書いてみようと思います。

まず、ブロックエディタで、ブログカードを設置してみました。

 ｍｋ２さま

こんなにも丁寧に解説いただき、頭があがりません、、本当にありがとうございます。

確かに、過去にブロックエディタとクラシックエディタを行き来している間に、上記のような事象が発生し、

「おっかしいなー」と思って色々試行錯誤していたら問題が発生しなくなった、ということがあり、問題発生の都度、対症療法的にやりくりしてました。

今回も本質的には一緒の問題だったのですね。みなさまの親切な原因究明のおかげでよくわかりました。

あとは、HTMLは、開始タグと終了タグ（閉じタグ）に囲まれた構造だということだけでも、分かっているとかなり違うようには感じます。

10年以上前に、マークアップ言語の基礎だけコードキャンプでざっと学んだことがありますが、

<b></b>で囲むこと、とか、要素という概念があって、みたいなレベル1的な知識しかないので、”囲まれた構造”を理解しているといえるのか怪しいですが、

閉じタグがないと、エクセルの関数のようにうまく作動しないというのは感覚的にはわかります。

付け焼刃的に直しても、また問題が起きたら、、を考えて、いっそ全部白紙に戻してブロックエディタでやってみようかな、とも思ったのですが、

（今回はおそらくdivの閉じタグを消すだけで上手くいきそうな気はします、それ以外の調整も必要かもしれませんけれど）

のコメントを拝見し、いったんそれだけで試してみようと思いました。

その上で、

そう言ったことを避けるためには。
ブロックエディタから、クラシックエディタに切り替えた際の編集時に、コードエディタに切り替えて、要素の更に下へ直接タグを書いていくようなことが必要なのだと思います。

をやってみます。

それでもトラブルが発生するようであれば、諦めて、ブロックエディタに慣れようかと思います。

 ｍｋ２さま

ただいま、確認したところ、クラシックエディタで、テキストエディタをみたところ/divの余分なタグはみつけられませんでした。

推測するに、みなさまが指摘してくださった際に添付してくださった、余分なタグが入ったコードはテキストエディタで見られる部分とはことなり、右クリック＞検証、などから見てらっしゃるコードでしたでしょうか？

まずはコードエディターの内容を全てコピペなどでテキストに保存してバックアップを取っておいて、その後エディター内容全てを削除して、問題の現象が改善されるか確認してみていただいてよろしいでしょうか。
※確認後は、バックアップから元に戻していただいて大丈夫です。

すみません。
今日はちょっと時間がとれませんので、ご質問に対するお答えだけしておきます。

投稿者:: @masala

↑

テキストエディタで見られる部分とはことなり、右クリック＞検証、などから見てらっしゃるコードでしたでしょうか？

外部からは、エディタのソースを見ることできません。
（管理者さんや、編集権限のあるログインユーザーのみが、見ることができるものだと思います。管理画面内の話ですから）

例えば、添付いただいたエディタのコードには、ショートコードが含まれいます。

わいひらさま

アドバイスありがとうございます。

まずはコードエディターの内容を全てコピペなどでテキストに保存してバックアップを取っておいて、その後エディター内容全てを削除して、問題の現象が改善されるか確認してみていただいてよろしいでしょうか。

こちら、やってみたところ、添付画像のように改善されました。

※現在は元に戻しております

ｍｋ２さま

いえいえ、いつもありがとうございます。

一刻を争う状況ではなく、これから制作をしていく段階ですので、お時間のあるときだけで大丈夫でございます。私はずっとお待ちできますので、他の部分を先に作っていきます。

「検証」の部分だと、JavaScript実行後だったり、タグに過不足等ある場合、ブラウザが自動的に補完したりする場合もありますから。

ちなみに、上記のショートコード部分ですけれど。

Contact Form 7のものかと思いますけれど、メールフォームを作成した部分に、タブの過不足等はないのですよね？

<label><b>御社名<span style="color: #FF0000;">(必須)</span></b>
[text* text-829 placeholder "例：〇〇株式会社　〇〇部"]</label>

<label><b>ご担当者様のお名前<span style="color: #FF0000;">(必須)</span></b>
[text* your-name autocomplete:name] </label>

<label><b>Emailアドレス<span style="color: #FF0000;">(必須)</span></b>
[email* your-email autocomplete:email] </label>

<label><b>電話番号</b>
[tel tel-519 placeholder "電話番号のハイフンは不要です"]</label>

<label><b>お問い合わせ内容</b>
[textarea your-message] </label>

[submit "プライバシーポリシーに同意して送信"]

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://marunagekanri.com/contact-thanks_1/';
}, false );
</script>

投稿者:: @masala

↑

こちら、やってみたところ、添付画像のように改善されました。

本文を全て削除して、状態が改善されたのであれば、本文に原因がありそうですね。
ここら辺のWebツールで閉じタグなどを確認して、見るとどうでしょうか

DIVタグ閉じ忘れチェッカー
https://div.natureblue.com/
閉じタグ＆アクセシビリティ等チェックツール
https://nana-2007-july.up.seesaa.net/html/check_html.html
ツールズドットネット - HTMLタグ閉じ忘れチェッカー
https://web-omnibus.co.jp/tools/developer/html-tag-checker.php
※上記ツールは使ったことがないので、期待している結果が出るかまではちょっとわかりません。

メールフォームだけを見ると、問題なさそうな気はします。

以前拝見した時と、今はちょっと違う感じなのですけれど。
場所的には、以前と同じところが、エラーにはなっているようです。

わいひらさま

アドバイスありがとうございます。

本文を全て削除して、状態が改善されたのであれば、本文に原因がありそうですね。

こちら仰る通りかと思いました。

ここら辺のWebツールで閉じタグなどを確認して、見るとどうでしょうか。

ありがとうございます、使わせていただきます（もちろん自己責任で）。

 ｍｋ２さま

いつもありがとうございます。

今回気付きましたが、良く見ると、メールフォームが2つあるんですよね。
（同じ個所が繰り返されている？　とりあえず練習用ということで、2つにしたもの？）

いえ、指摘されて今気づきました。

上記わいひら様のアドバイス実行に際して、「一度テキストエディタにして、コードを全てsublime textにコピーした上で全消ししたらどうなるか」、という挙動を試した後に、ペーストして戻したら、この様になってしまっておりました。

ただ消したものをそのまま戻しただけなので、理論上は前と全く一緒になるはずですが、なぜかこのようになっているようです。

いずれにせよ、私のようなコーディングに詳しくないものがブロックエディタとクラシックエディアを行き来すると、このようなトラブルに遭遇したときに対処が大変なので、素人はどちらかに統一した方がよいなあと改めて感じました。

ちなみに、最後に１つだけ教えていただきたいのですが、最初にみなさまにアドバイスを頂いた際に、</div>が余分に最後に入っているとのことで、皆さまは

私が添付したのは、「検証」ではないですね。
以下の部分です。

・・・

[ページのソースを表示]

をご覧になって上記問題を発見しておりましたが、私のテキストエディタだと</div>が入っておりませんでした。（ 2024-04-01 07:35 の私のコメント部分）

この場合、htmlから不要な</div>を消したい場合、どこの画面から削除すればよいのでしょうか？

masalaさん

なかなか、話が噛み合わない感じはしますね。
（こちらの説明が足らないのだとは思いますけれど）

投稿者:: @masala

↑

上記わいひら様のアドバイス実行に際して、「一度テキストエディタにして、コードを全てsublime textにコピーした上で全消ししたらどうなるか」、という挙動を試した後に、ペーストして戻したら、この様になってしまっておりました。

おそらく、元には戻っていないです。
以前とは、違う状態です。
（以前から、メールフォームが2つあったかは、分からないです）

投稿者:: @mk2_mk2

↑

以前拝見した時と、今はちょっと違う感じなのですけれど。
場所的には、以前と同じところが、エラーにはなっているようです。

私は、昨日上記のように書きました。
同じではなかったからです。

例えば、最初に添付した以下の部分からは、ブロック制御用のコメントが消えていました。
（場所は同じです）

最初に貼り付けた時点。

例えばですけれど。
（簡単な例でしかないです。やっつけで作りましたので、分かりづらいと思います）

左が正常な状態で、エディタ編集部分が不正な状態になると、結局サイト全体で不整合なことが起きるよということですが。

【例1】

もし分からなければ、編集し直した方が早いかもしれないです。
（今回の部分は、バックアップしておくとして）

その際は、ブロックエディタを使用することをお勧めします。

ブロックエディタであれば、このような不整合が起きる可能性は低いと思います。
（但し、可能性はゼロではありません。意外と簡単にブロックは壊れますし。HTMLの簡単な構造を理解しておくと良いのですけれど）

クラシックエディタは、自動で補正がかかったりしますので（ビジュアル⇔テキストの切り替えだけでも）、HTMLがまったく分からない方には、不向きかもしれないです。
（それらを止めることもできるとは思いますが、ブロックエディタの方をお勧めします）

ｍｋ２さま

本当に丁寧に解説くださり、ありがとうございます。

かみ合わないのは私の文章の稚拙な部分もあるのと、この程度の質問でｍｋ２さまのお時間をこれ以上頂くのは申し訳なく、そして今回のｍｋ２さまのコメントをもって少なくとも大半を理解した気がするため、手前勝手で恐縮ですが、いったん解決済みとさせてください。

その上で、今回頂いたアドバイスにつきまして、特に[2024-04-03 10:03]の2つ目のアドバイスに関しては、おそらく私も理解できていると思います。

（簡単な例でしかないです。やっつけで作りましたので、分かりづらいと思います）

上例におけるコードの何が問題かは、私も理解しているつもりです。

※イメージ的には、if(A*B=4,2,if(A*B=3,2,1))という式において、最後の)をつけ忘れてしまうと、if(A*B=4,2,if(A*B=3,2,1)という式になってしまって間違った関数ないしはエラーになってしまう事象と多少似たようなものだと理解しております。。例が下手すぎてさらに話をこじらせてしまう可能性もあるので、無視して下さっても問題ございません。。

そして、それ故に

そのため、わいひらさんが以下のように仰ったのだと思います。

こちらのわいひら様の指摘の意味も理解しているつもりです。

唯一、いまだに不可解なのは、

おそらく、元には戻っていないです。
以前とは、違う状態です。
（以前から、メールフォームが2つあったかは、分からないです）

この部分でして、本当にコピー＆ペーストで元に戻しただけで、それをする前はメールフォームは１つしかなかったのです。。ただ、私のコピペにミスがあった可能性もあるので、あまり考えないようにします。

変なことを言ってしまって混乱を引き起こして、ご迷惑をかけてしまい、申し訳ないです。

いずれにせよ、原則として、今回頂戴したアドバイス

その際は、ブロックエディタを使用することをお勧めします。

ブロックエディタであれば、このような不整合が起きる可能性は低いと思います。

こちらを原則として進めていこうと思いました。

mk様に加えて、わいひらさまもchuyaさまも本当にありがとうございました。

masalaさん

投稿者:: @masala

↑

いったん解決済みとさせてください。

了解です。

投稿者:: @masala

↑

唯一、いまだに不可解なのは、

おそらく、元には戻っていないです。
以前とは、違う状態です。
（以前から、メールフォームが2つあったかは、分からないです）

この部分でして、本当にコピー＆ペーストで元に戻しただけで、それをする前はメールフォームは１つしかなかったのです。。

これは、私も分かりません。

ただ、先にも書いた通り、エディタ内のHTMLに不整合がある状態かと思います。
（例えば、先に挙げたように「xxx」はタグで囲まれていないなど。）

その状態では、何があるか分からない気はします。

先に何度か書いた通り、クラシックエディタはクセがあります。
自動で補正というのか、自動整形というのか。

例えばですけれど。

以下のように、本来は段落なのに、タグで囲まれていない状態（「あいうえお」が2箇所）のものがあったとします。
そして、その間には高さ10pxのスペーサーブロックが入った状態です。

あいうえお
<!-- wp:spacer {"height":"10px"} -->
<div  style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
あいうえお

上記をプレビューすると、以下のような状態なのですけれど。

<p>あいうえお<br />
<!-- wp:spacer {"height":"10px"} --></p>
<div class="wp-block-spacer" style="height: 10px;" aria-hidden="true"> </div>
<p><!-- /wp:spacer --><br />
あいうえお</p>

[解決済]にした後でコメントするのはよくないのかもしれませんが、改めてmk2さまにお礼申し上げます。

cocoonのコミュニティ、本当に素晴らしいですね（教えてもらっている立場の側の人間が言うと、何か上から目線みたいな発言になってしまい恐縮ですが、本当にありがたいです、）。

cocoon使って良かったです。