「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

サイドバーが急にページの一番下に回り込...
 
共有:
通知
すべてクリア

[解決済] サイドバーが急にページの一番下に回り込んでしまう状況の治し方

23 投稿
4 ユーザー
7 Likes
263 表示
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

不具合・カスタマイズ対象ページのURL:

https://marunagekanri.com/

 

相談内容:

https://marunagekanri.com/

こちらのトップページですが、添付写真のように急にサイドバーが消えたと思ったら、ページの一番下にいってしまってました。

他方で、

https://marunagekanri.com/hr/

こちらのように、トップページ以外のページだとサイドバーはきちんと表示されていました。

 

また、友人にPCchromeでみてもらったところ、トップページでもサイドバーがきちんと右側に表示されていました。(縮尺100%でも75%でもサイドにありました、私のPCだと75%にしたときに上記の症状がおきました。)

 

ググったところ、ブラウザの縮尺の影響があるため、拡大→縮小を繰り返すと治ると書いてあったので試したら、いったんは戻りました。しかし、ページリフレッシュをしたら、また一番下にいってしまいました。

※ただ、不思議なことに、/hr/のページだときちんと表示されています。

 

相談内容として、

縮尺にかかわらずサイドバーが必ず右側に表示されるようにしたいのですが、そうしたことは可能なのでしょうか?

 

不具合の発生手順:

今まではブラウザの縮尺を変えずともサイドバーが表示されたいたのに、今日みたら急にトップページだけサイドバーが下にいってしまった模様。トップページ以外(例:/hr/)はサイドバーはきちんとサイドにいる。

 

解決のために試したこと:

ブラウザの縮尺を変えてから戻した。

 

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

----------------------------------------------
サイト名:【管理業務アウトソーシング】マルナゲカンリ
サイトURL: https://marunagekanri.com
ホームURL: https://marunagekanri.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.4.3
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br, zstd
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.4.4
カテゴリー数:10
タグ数:2
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:0
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/uploads/2023/04/47b0a66bd484cc6442819ff57007713b.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools 5.9.2
Advanced Google reCAPTCHA 1.20
Akismet Anti-spam: Spam Protection 5.3.2
BackWPup 4.0.4
Broken Link Checker 2.2.4
Category Order and Taxonomy Terms Order 1.8
Contact Form 7 5.9.3
Contact Form 7 Multi-Step Forms 4.3.1
Facebook Chat Plugin - Live Chat Plugin for WordPress 2.5
Flamingo 2.4
Redirection 5.4.2
Regenerate Thumbnails 3.1.6
SiteGuard WP Plugin 1.7.6
Site Kit by Google 1.122.0
Wordfence Security 7.11.4
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 4.1.19
----------------------------------------------

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。


   
トピックタグ
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2250
 

●原因

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


●対策

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


   
わいひら reacted
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

 chu-yaさま

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

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

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16458
 

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

This post was modified 4週間前 by わいひら

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

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

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

 
ちょうど、表示がおかしくなる境目の部分ですし。
 
 
ただ、おかしいのはこれだけではないんですよね。
本来表示されないはずの、ブロック制御用のコメントが、大量に出てきています。
(緑色の「<!--」で始まっているもの。1枚目の画像にも出てきていました)
 
以下の赤矢印の場所から、出始めています。
 
 
環境情報を拝見すると、ブロックエディタはご利用ではないみたいですけれど。
投稿者:: @masala

Gutenberg:0

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

投稿者:: @masala

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

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


   
わいひら reacted
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

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

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

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


   
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

わいひらさま  mk2さま

確認したところ、

  mk2さまの仰るように、

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

が問題な気がします。

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

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

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

 

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

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

ありがとうございます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

投稿者:: @masala

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

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

投稿者:: @masala

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

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

 

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

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

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

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


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

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

 
コードエディタに切り替えると、以下のような感じです。
 
続いて、クラシックエディタに切り替えて、ブログカードの下に、段落で文章を入れてみます。
(ブログカードの下には何も要素がないため、カーソルはブログカードの最後しか指定できず、そこからEnterで改行してから、入力しています。)
 
その結果をコードエディタで見ると以下のような感じです。
 
ブログカードの下に、挿入したかったのに、そうではなく、途中に入ってしまうということが発生してしまいます。
 
 
上記のものを、ブロックエディタに切り替えて、編集画面を開こうとすると、真っ白な状態で、編集ができなくなってしまいます。
 
HTMLの構造は壊していないのですが、ブロックの構造は壊してしまっています。
そのために、こういうことが起きるのだと思います。
 
 
そう言ったことを避けるためには。
ブロックエディタから、クラシックエディタに切り替えた際の編集時に、コードエディタに切り替えて、要素の更に下へ直接タグを書いていくようなことが必要なのだと思います。
 
このようにすると、ブロック構造もHTML構造も壊さないです。
 
 

 
上記に書いたことは一例でしかなく、簡単な事象です。
今回のような事象は再現できてはいないです。

他のブロックを使ったり、もっと複雑な構造のものを、何回も編集し直している内に、ブロック構造だけでなく、HTML構造も壊してしまうのかなと推測します。

 

そういうことが分かっていれば、今回のようなことを防ぐこともできるのではないかと思います。

そして、先にも書いたように、HTMLは開始タグと終了タグ(閉じタグ)で囲まれた構造ということだけでも分かっていれば、修復もできるのではないかと思います。

クラシックエディタは、クセが強いんですよね。
(ビジュアルエディタ ⇔ テキストエディタの切り替えだけでも、ちょっとクセがありますし)


   
わいひら reacted
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

 mk2さま

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

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

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

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

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

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

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

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

 

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

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

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

その上で、

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

をやってみます。

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


   
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

 mk2さま

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16458
 

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

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

投稿者:: @masala

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

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

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

 
これらは、展開された状態でしか、外部からは見えません。
 
私が添付したのは、「検証」ではないですね。
以下の部分です。
 
「検証」の部分だと、JavaScript実行後だったり、タグに過不足等ある場合、ブラウザが自動的に補完したりする場合もありますから。
 
 
ちなみに、上記のショートコード部分ですけれど。
Contact Form 7のものかと思いますけれど、メールフォームを作成した部分に、タブの過不足等はないのですよね?
 
どこかで過不足が発生して、その結果今の事象になっているのだとは思います。

   
わいひら reacted
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

わいひらさま

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

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

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

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


   
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

mk2さま

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

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

「検証」の部分だと、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>
 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16458
 

投稿者:: @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
※上記ツールは使ったことがないので、期待している結果が出るかまではちょっとわかりません。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

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

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

 
ただ、これだけではないのですけれど。
 
例えば、以下の「XXX」は、タグで囲まれていないです。
(ブロック制御用コメントは、pタグ(段落)で出ているのですけれど。ここはエラーではないにしても。)
 
 
 
今回気付きましたが、良く見ると、メールフォームが2つあるんですよね。
(同じ個所が繰り返されている? とりあえず練習用ということで、2つにしたもの?)
 
以下は「お客様の声」で検索して、その後ページを上下にスクロールしてみたものです。

   
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

わいひらさま

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

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

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

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

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


   
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

 mk2さま

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

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

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

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

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

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

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

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

・・・

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

masalaさん

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

投稿者:: @masala

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

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

投稿者:: @mk2_mk2

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

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

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

最初に貼り付けた時点。

 
昨日時点。
 
 
上記は、フォーラムに貼り付けた場所で分かりやすかったために、例として挙げました。
上記以外にも、異なる箇所がたくさんあります。
 
 
 
ただ言えることは。
 
投稿者:: @masala


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

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

上記のように、エディタ編集部分を、全削除して問題がなかったということは、エディタ編集部分に問題があるということかと思います。

投稿者:: @masala

私のテキストエディタだと</div>が入っておりませんでした。(  の私のコメント部分

そういう話ではなく、エディタ編集部分のHTMLが不正ということだと思います。
(エディタ編集部分で不整合が起きている)


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

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

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

【例1】

 
【例2】
 
 
HTMLのタグは、開始タグと終了タグ(閉じタグ)で囲まれた構造です。
 
エディタ編集部分で、その不整合が起きれば、結果としてサイト全体が不整合になる可能性はあるということではないでしょうか。
 
 
 
基本的には、エディタ編集部分に不整合がないかを確認していくしかないです。
そのため、わいひらさんが以下のように仰ったのだと思います。
投稿者:: @yhira

ここら辺の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
※上記ツールは使ったことがないので、期待している結果が出るかまではちょっとわかりません。

 

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

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

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

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


   
わいひら reacted
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

mk2さま

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

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

 

その上で、今回頂いたアドバイスにつきまして、特に[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つあったかは、分からないです)

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

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

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

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6895
 

masalaさん

投稿者:: @masala

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

了解です。

 

投稿者:: @masala

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

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

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

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

 

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

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

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

 

例えばですけれど。

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

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

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

 
 
この状態で、先に書いた以下をやってみます。
(テキスト ⇒ ビジュアル ⇒ テキスト と切り替えました)
投稿者:: @mk2_mk2

クラシックエディタは、自動で補正がかかったりしますので(ビジュアル⇔テキストの切り替えだけでも)

それが、以下のような感じです。

 
 
この操作後は、以下のように書き変わり、間隔もかなり広くなってしまいます。
<p>あいうえお<br />
<!-- wp:spacer {"height":"10px"} --></p>
<div class="wp-block-spacer" style="height: 10px;" aria-hidden="true"> </div>
<p><!-- /wp:spacer --><br />
あいうえお</p>
 
 
 
これは単純な例ですけれど。
 
不整合な状態のものが複数ありますから、クラシックエディタが自動的に解釈して整形した場合、どんなことになるのか分からないとは思います。
 
(自動整形を止めることができますけれど、HTMLの不整合が解消する訳ではありませんし、こういうことが起こりにくいブロックエディタをご利用いただくのが良さそうには思います。)
 

   
わいひら reacted
(@masala)
Trusted Member Registered
結合: 1年前
投稿: 56
Topic starter  

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

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

cocoon使って良かったです。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました