サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2025年8月25日 14:21
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.7.1
カテゴリー数：18
タグ数：123
ユーザー数：1
----------------------------------------------
実害はないですが、Chromeのある条件下で起こります。
まず気付かない上、使用頻度が低いので、修正するか否かはお任せします。
●設定
[Cocoon設定]→
[全体]→サイトフォント「文字サイズ」を18px
[コード]→「ハイライト」のソースコードをハイライト表示するをオン、行番号を表示するをオン
「コード」ブロックに以下を入力
// メタボックスを追加
add_action('add_meta_boxes', function() {
add_meta_box(
'cpt_sticky',
'先頭固定設定',
'render_cpt_sticky_metabox',
'xo_event',
'side',
'default'
);
});
●現象
Chromeで表示した際、図示の通り「コード」ブロックの行番号12の一部が表示される。
また、[Cocoon設定]→[コード]のプレビューの行番号7も同様。
●原因
行番号は疑似要素で1～99を出力している。
<pre>タグ（コード表示部）に合わせ余白に合わせ、以下で余白を設け、コード表示部からはみ出した行番号はhiddenで非表示としたい。
しかし、paddingとしているので、例えば行番号12の一部が表示されてしまう。
https://github.com/xserver-inc/cocoon/blob/acf367d85dbd7b5b555e33861b0b4fd5a9fc6726/style.css#L12519
●対策
marginが正しいのでは？
わいひら reacted
2025年8月25日 19:41
ご指摘ありがとうございます。
僕の環境のChromeでは、うまく再現できなかったんですが、padding: 0.4em, 0;の0.4を0.2にすることで、近い状況を再現できました。
marginに変更しておきました。
https://github.com/xserver-inc/cocoon/commit/beabe59b688df9e469b664b746dd549e27778ece
marginに変更することで現象が改善されることを確認いたしました。
この投稿は3週間前ずつわいひらに変更されました
トピックスターター 2025年8月25日 20:28
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.7.1
カテゴリー数：18
タグ数：123
ユーザー数：1
----------------------------------------------
修正されていることを確認しました。
本件をクローズとします。
●ご参考
「行番号を表示する」としたとき、以下で疑似要素で行番号を最大99まで作成する。
行番号ごとに改行しており、例えばコードを折り返しとカスタマイズした場合、行番号とコードが一致しなくなる。
そのため、以下のようにJSで各行の前に行番号用のクラスを追加するようにしてみた。
但しGutenbergエディター（ブロック）前提で、クラシックエディターは考慮していない。
また、「ハイライト表示するCSSセレクタ」を設定できるため、それを考慮すると以下では、結構面倒かと思われる。
jQuery(function($) {
// 対象となるコードブロックのセレクタ
const TARGET_SELECTOR = '.wp-block-code code';
$(TARGET_SELECTOR).each(function() {
// <code>内のテキストを取得し、改行ごとに分けて配列にする
var tmp = $(this).html();
var lines = tmp.split('\n');
var txt = '';
// 各行の先頭に行番号を追加
for (var i=1; i<=lines.length; i++) {
txt += '<span class="code-line"></span>' + lines[i - 1];
if (i !== lines.length) {
txt += '\n';
}
}
$(this).html(txt);
});
});
.wp-block-code {
counter-reset: line;
}
.wp-block-code .code-line {
color: #777;
counter-increment: line;
display: inline-block;
margin-right: 0.5em;
text-align: right;
width: 2em;
}
.wp-block-code .code-line::before {
content: counter(line);
}
わいひら reacted
2025年8月26日 19:40
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。