Cocoonフォーラム

2018.02.102026.04.28

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

このフォーラムには初心者の方も多く参加されています。質問に不慣れな方も安心して相談できるよう、できるだけ穏やかな言葉でご案内いただけますと幸いです。

通知

すべてクリア

[解決済] スキン「SILK」における「全幅」配置時の画面はみ出しおよび文字欠けについて

スキンの不具合

最新の投稿 : 大門未知子 1時間前

1 投稿

1 ユーザー

0 Reactions

8 表示

RSS

大門未知子

(@chu-ya)

Illustrious Member Registered

結合: 4年前

投稿: 4514

トピックスターター 2026年6月12日 01:02

----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.3.3
カテゴリー数：18
タグ数：123
投稿数：1753
固定ページ数：12
ユーザー数：1
----------------------------------------------

●現象

スキン「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);
}