●マニュアル

https://wp-cocoon.com/recommended-cards-widget/#toc2

●現象

メニューの説明欄に「説明」と入力し、「おすすめカード」に設定した。
本来、この「説明」は非表示になる仕様だが、実際には画面に表示されてしまう。

●原因

以下ではCSSクラスの優先度で負けている。

https://github.com/xserver-inc/cocoon/blob/ea5d54c138bd2862f7a12dbfb21c756acbc07313/style.css#L9493

●対策

CSSクラスを修正し優先度を上げる。

.recommended .large-thumb-on .card-snippet

内部ブログカードを設置すると、サイトのトップページの縮小画面が表示されるようになってしまいました。

今までですと、ページのアイキャッチに設定した写真がブログカードのサムネイルになっていました。

こちらの方で設定をいじった記憶はなく、プラグインも一度無効にしてみましたが、改善はしていません。

いちおう原因を調べてみましたが、あまりこういったことに詳しくなく、解決には至っていません・・・。

不具合なのかも不明なのですが、原因がお分かりになるのであれば教えていただきたいです。

添付ファイルのページとなります。

https://www.hobi-rain.com/entry/top/uxezarinngu

相談内容：
WordPress 7.0に移行するためにローカル環境でサイトを構築してみたところ
タイトル部分とメニュー部分に空白が発生致します。
これを解決する方法はありますでしょうか？

不具合の発生手順：
WPを7.0にあげるとこうなります。

解決のために試したこと：
サイトヘルスチェックを行い、全プラグインの停止や違うテーマでみたところここまでの大きな空白が入ることはありませんでした。

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

----------------------------------------------
サイト名：京都大学大学院薬学研究科 構造生物薬学分野
サイトURL：http://ubuntu.1020913.kuins.net//structbl
ホームURL：http://ubuntu.1020913.kuins.net/structbl
コンテンツURL：http://ubuntu.1020913.kuins.net//structbl/wp-content
インクルードURL：http://ubuntu.1020913.kuins.net//structbl/wp-includes/
テンプレートURL：http://ubuntu.1020913.kuins.net//structbl/wp-content/themes/cocoon-master
スタイルシートURL：http://ubuntu.1020913.kuins.net//structbl/wp-content/themes/cocoon-child-master
親テーマスタイル：http://ubuntu.1020913.kuins.net//structbl/wp-content/themes/cocoon-master/style.css
子テーマスタイル：http://ubuntu.1020913.kuins.net//structbl/wp-content/themes/cocoon-child-master/style.css
スキン：http://ubuntu.1020913.kuins.net//structbl/wp-content/themes/cocoon-master/skins/one/style.css
WordPressバージョン：7.0
PHPバージョン：8.3.6
データベース：10.11.14
サイト言語：ja
タイムゾーン：Asia/Tokyo
HTTPS：無効
マルチサイト：有効
WP_DEBUG：有効
DISABLE_WP_CRON：有効
WP_CACHE：無効
DISALLOW_FILE_EDIT：無効
パーマリンク構造：/%year%/%monthnum%/%day%/%postname%/
ホームページ表示：固定ページ
PHPメモリ上限：256M
WPメモリ上限：64M
WP管理画面メモリ上限：256M
PHP最大実行時間：30秒
PHP max_input_vars：1000
アップロード上限：2M
POST上限：8M
PHP拡張：curl:有効, mbstring:有効, gd:有効, imagick:無効, xml:有効, zip:有効, intl:無効, exif:有効
画像エディタ：GD
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0
サーバーソフト：Apache/2.4.58 (Ubuntu)
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.3.1
カテゴリー数：1
タグ数：0
投稿数：36
固定ページ数：17
ユーザー数：4
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
ホームイメージ：https://www.pharm.kyoto-u.ac.jp/structbl/wp-content/themes/cocoon-master/screenshot.jpg
簡単SSL：0
コードハイライト：0
----------------------------------------------
canonicalタグ：1
カテゴリnoindex：0
タグnoindex：0
----------------------------------------------
サイドバー位置：sidebar_right
サイドバー表示：display_all
メインカラム幅：デフォルト
サイドバー幅：デフォルト
----------------------------------------------
全広告表示：1
AdSense表示方法：
----------------------------------------------
GA4：未設定
GTM：未設定
Search Console：未設定
----------------------------------------------
ブラウザキャッシュ有効化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools 5.9.2
Black Studio TinyMCE Widget 2.7.3
Classic Editor 1.7.0
Contact Form 7 6.1.6
Custom Field Template 2.7.8
Health Check & Troubleshooting 1.7.1
Jetpack 15.9
Link Indication 4.4
Maintenance Mode 5.4
MO Cache 2.0
MW IP Denied 0.3.2
Public Post Preview 3.1.0
Really Simple CAPTCHA 2.4
Responsive Accordion And Collapse 2.5.3
TinyMCE Templates 4.8.1
User Role Editor 4.65
WP Multibyte Patch 2.9.3
----------------------------------------------
停止中のプラグイン：
Advanced Custom Fields 6.8.4
Advanced Custom Fields Multilingual 2.2.4
Akismet Anti-spam: Spam Protection 5.7
bbPress 2.6.14
Category Checklist Tree 1.3.2
Category Limitation 2.3.1
Category Order and Taxonomy Terms Order 1.9.9.1
Child Theme Configurator 2.6.7
Custom Post Type UI 1.19.2
Gutenberg 23.3.2
Hello Dolly 1.7.2
jQuery Colorbox 4.6.2
MetaSlider Slideshow 3.109.0
MTS Simple Booking 1.37.0
My Page Order 4.3
OTGS Installer 3.0.4
Peter's Collaboration E-mails 2.2.0
PublishPress Permissions Free 4.8.2
Regenerate Thumbnails 3.1.6
Simple Custom Post Order 2.7.3
User Access Manager 2.3.12
VK All in One Expansion Unit 9.117.2
VK Block Patterns 1.36.0
VK Blocks 1.121.0
Widget Options 4.2.5
WordPress Importer 0.9.5
WPML Media Translation 3.1.1
WPML Multilingual CMS 4.9.4
WPML Multilingual for CF7 1.3.3
WPML String Translation 3.5.2
Yoast Duplicate Post 4.6
----------------------------------------------

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

●現象

スキン「SILK」適用時、「テーブル」ブロックや「段落」ブロックに配置「全幅（.alignfull）」を設定すると、要素が親要素を突き抜けて画面外にはみ出し、先頭の文字が欠ける現象が発生する。

●ブロック

<!-- wp:cocoon-blocks/blank-box-1 -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box"><!-- wp:table {"hasFixedLayout":false,"align":"wide","borderColor":"vivid-cyan-blue"} -->
<figure class="wp-block-table alignwide"><table class="has-border-color has-vivid-cyan-blue-border-color"><tbody><tr><td>人数</td><td>1名</td><td>2名</td><td>3名</td><td>4名</td><td>5名</td></tr><tr><td>金額/<br>人</td><td>15,000円</td><td>8,000円</td><td>6,000円</td><td>5,000円</td><td>4,000円</td></tr><tr><td>合計</td><td>15,000円</td><td>16,000円</td><td>18,000円</td><td>20,000円</td><td>20,000円</td></tr></tbody></table></figure>
<!-- /wp:table --></div>
<!-- /wp:cocoon-blocks/blank-box-1 -->

<!-- wp:paragraph {"align":"full"} -->
<p class="alignfull">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<!-- /wp:paragraph -->

●原因

「SILK」では、全幅表示を実現するために 100vw（ビューポート幅）を基準にした引き算を行っている。
しかし、100vw は「縦スクロールバーの幅」を含んだサイズであるため、スクロールバーが表示されている環境では、その幅の分だけ画面右側にはみ出し、結果として左右のバランスが崩れて文字欠けを引き起こす。

https://github.com/xserver-inc/cocoon/blob/ea5d54c138bd2862f7a12dbfb21c756acbc07313/skins/silk/functions.php#L875-L881

●対策

本現象は仕様に起因するため、該当ブロックに「全幅」を設定しないことで回避可能。
そのため、今回はスキン側の直接的なコード修正は見送り、現状のままとする。

●補足

以下に、marginによる全幅制御とカスタムプロパティを用いたスクロールバー幅の自動相殺を行う案を示す。

@property --scrollbar {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px; 
}

html {
  container-type: inline-size;
}

/* スクロールバーの幅取得 */
body {
  --scrollbar: calc(100vw - 100cqw);
}

.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(var(--scrollbar) / 2);
  padding-right: calc(var(--scrollbar) / 2);
}

●現象

→→「サイトを見るときにツールバーを表示する」オンの場合、
600px＜画面幅≦1023pxのときキャッチフレーズが隠れてしまう。

また、メニューのナビゲーションラベルが長い場合、折り返し表示され、ヘッダーモバイルボタンの高さが大きくなる。
このため、コンテンツが隠れてしまう。
（ヘッダーモバイルボタンの高さは50pxとは限らない）

●補足

動的にコンテンツ位置を求めており。
以下で対応可能と思ったが、ヘッダーモバイルボタンが遅れて表示される場合、0pxとなり正しく動作しない。

@media (width <= 1023px) {
	.container {
		margin-top: var(--cocoon--header-container--position-offset);
	}
}

#appeal {
    height: calc(100vw * 0.3);
}

結果、たしかにスマホの方では高さが大きくなり、画像もきちんと表示されるようになりましたが、今度はパソコンの方で、アピールエリアの画像下にこれまではなかった余白が入ってしまいました。

ここで相談したいのは、パソコンの方の余白を消す方法です。

よろしくお願いいたします。

----------------------------------------------
サイト名：ロバのポル語
サイトURL：https://ebrasil.jp
ホームURL：https://ebrasil.jp
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-mixgreen/style.css
WordPressバージョン：7.0
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,pt-BR;q=0.8,pt;q=0.7,en-US;q=0.6,en;q=0.5
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.8.5
カテゴリ数：30
タグ数：4
ユーザー数：1
----------------------------------------------
Gutenberg：0
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2021/03/wpアイコン.png
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.9
All-in-One WP Migration and Backup 7.105
Category Order and Taxonomy Terms Order 1.5.7.5
Contact Form 7 5.4
Wordfence Security 8.2.2
----------------------------------------------

●マニュアル

https://wp-cocoon.com/not-blogcard/

●ブロック

<!-- wp:paragraph -->
<p>!http://chuya.s239.xrea.com/temp/download-archived-plugin/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>!http://chuya.s239.xrea.com/temp/download-archived-plugin/この記事はテキストだが先頭に！が付いたままとなる</p>
<!-- /wp:paragraph -->

●現象

「!」＋URLのみの場合、先頭の「!」が消え、URLがテキストとして表示される。
しかし「!」＋URL＋文字列の場合、先頭の「!」が消えず、そのまま残ってしまう（図の矢印の部分）。

URL（「!」なし）＋文字列の場合、自動的で「ブログカード（埋め込み）」に変換されてしまい、入力した文を修正できない。

<!-- wp:paragraph -->
<p>http://chuya.s239.xrea.com/temp/download-archived-plugin/この記事はテキストだが先頭に！が付いたままとなる</p>
<!-- /wp:paragraph -->

↓

<!-- wp:cocoon-blocks/embed-blogcard {"url":"http://chuya.s239.xrea.com/temp/download-archived-plugin/この記事はテキストだが先頭に！が付いたままとなる"} /-->

claudeAIで解決策を求めて試してみましたが解決に至りませんでした。

アドクイックタグ側のバグなんですかね？

もしアドクイックタグを使ってる方がいらっしゃったら、いちど新規タグを追加してみて結果を教えていただけると幸いです。