<?xml version="1.0" encoding="UTF-8"?>        <rss version="2.0"
             xmlns:atom="http://www.w3.org/2005/Atom"
             xmlns:dc="http://purl.org/dc/elements/1.1/"
             xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
             xmlns:admin="http://webns.net/mvcb/"
             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:content="http://purl.org/rss/1.0/modules/content/">
        <channel>
            <title>
									コードの行番号表示について - Cocoonテーマに関する質問				            </title>
            <link>https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/</link>
            <description>Cocoon ディスカッション掲示板</description>
            <language>ja</language>
            <lastBuildDate>Fri, 10 Apr 2026 16:08:42 +0000</lastBuildDate>
            <generator>wpForo</generator>
            <ttl>60</ttl>
							                    <item>
                        <title>RE: コードの行番号表示について</title>
                        <link>https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86199</link>
                        <pubDate>Tue, 26 Aug 2025 10:40:18 +0000</pubDate>
                        <description><![CDATA[ご確認いただきありがとうございます。]]></description>
                        <content:encoded><![CDATA[<p>ご確認いただきありがとうございます。</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/cocoon-theme/">Cocoonテーマに関する質問</category>                        <dc:creator>わいひら</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86199</guid>
                    </item>
				                    <item>
                        <title>RE: コードの行番号表示について</title>
                        <link>https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86189</link>
                        <pubDate>Mon, 25 Aug 2025 11:28:07 +0000</pubDate>
                        <description><![CDATA[----------------------------------------------テーマ名：Cocoonバージョン：2.8.7.1カテゴリー数：18タグ数：123ユーザー数：1----------------------------------------------
修正されていることを確認しました。本件をクローズとします。

●ご参考
「行番号を表示する」...]]></description>
                        <content:encoded><![CDATA[<p>----------------------------------------------<br />テーマ名：Cocoon<br />バージョン：2.8.7.1<br />カテゴリー数：18<br />タグ数：123<br />ユーザー数：1<br />----------------------------------------------</p>
<p>修正されていることを確認しました。<br />本件をクローズとします。</p>
<hr />
<p><span style="font-size: 14pt"><strong>●ご参考</strong></span></p>
<p>「行番号を表示する」としたとき、以下で疑似要素で行番号を最大99まで作成する。<br /><br />https://github.com/xserver-inc/cocoon/blob/beabe59b688df9e469b664b746dd549e27778ece/tmp/css-custom.php#L906-L917<br /><br />行番号ごとに改行しており、例えば<span style="color: #ff0000">コードを折り返し</span>とカスタマイズした場合、行番号とコードが一致しなくなる。<br />そのため、以下のようにJSで各行の前に行番号用のクラスを追加するようにしてみた。</p>
<p>但しGutenbergエディター（ブロック）前提で、クラシックエディターは考慮していない。<br />また、「ハイライト表示するCSSセレクタ」を設定できるため、それを考慮すると以下では、結構面倒かと思われる。</p>
<pre contenteditable="false">jQuery(function($) {
  // 対象となるコードブロックのセレクタ
  const TARGET_SELECTOR = '.wp-block-code code';

  $(TARGET_SELECTOR).each(function() {
    // &lt;code&gt;内のテキストを取得し、改行ごとに分けて配列にする
    var tmp = $(this).html();
    var lines = tmp.split('\n');
    var txt = '';

    // 各行の先頭に行番号を追加
    for (var i=1; i&lt;=lines.length; i++) {
      txt += '&lt;span class="code-line"&gt;&lt;/span&gt;' + lines;

      if (i !== lines.length) {
        txt += '\n';
      }
    }

    $(this).html(txt);
  });
});</pre>
<p><br /><br /></p>
<pre contenteditable="false">.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);
}</pre>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/cocoon-theme/">Cocoonテーマに関する質問</category>                        <dc:creator>大門未知子</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86189</guid>
                    </item>
				                    <item>
                        <title>RE: コードの行番号表示について</title>
                        <link>https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86188</link>
                        <pubDate>Mon, 25 Aug 2025 10:41:29 +0000</pubDate>
                        <description><![CDATA[ご指摘ありがとうございます。僕の環境のChromeでは、うまく再現できなかったんですが、padding: 0.4em, 0;の0.4を0.2にすることで、近い状況を再現できました。marginに変更しておきました]]></description>
                        <content:encoded><![CDATA[<p>ご指摘ありがとうございます。<br />僕の環境のChromeでは、うまく再現できなかったんですが、padding: 0.4em, 0;の0.4を0.2にすることで、近い状況を再現できました。<br />marginに変更しておきました。<br />https://github.com/xserver-inc/cocoon/commit/beabe59b688df9e469b664b746dd549e27778ece<br />marginに変更することで現象が改善されることを確認いたしました。</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/cocoon-theme/">Cocoonテーマに関する質問</category>                        <dc:creator>わいひら</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86188</guid>
                    </item>
				                    <item>
                        <title>コードの行番号表示について</title>
                        <link>https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86185</link>
                        <pubDate>Mon, 25 Aug 2025 05:21:09 +0000</pubDate>
                        <description><![CDATA[----------------------------------------------テーマ名：Cocoonバージョン：2.8.7.1カテゴリー数：18タグ数：123ユーザー数：1----------------------------------------------
実害はないですが、Chromeのある条件下で起こります。まず気付かない上、使用頻度が低いので、修正...]]></description>
                        <content:encoded><![CDATA[<p>----------------------------------------------<br />テーマ名：Cocoon<br />バージョン：2.8.7.1<br />カテゴリー数：18<br />タグ数：123<br />ユーザー数：1<br />----------------------------------------------</p>
<p>実害はないですが、Chromeのある条件下で起こります。<br />まず気付かない上、使用頻度が低いので、<strong>修正するか否かはお任せ</strong>します。<br /><br /><span style="font-size: 14pt"><strong>●設定</strong></span></p>
<p>→<br />→サイトフォント「文字サイズ」を18px<br />→「ハイライト」のソースコードをハイライト表示するをオン、<span style="color: #ff0000">行番号を表示するをオン</span><br /><br />「コード」ブロックに以下を入力</p>
<pre contenteditable="false">// メタボックスを追加
add_action('add_meta_boxes', function() {
  add_meta_box(
    'cpt_sticky',
    '先頭固定設定',
    'render_cpt_sticky_metabox',
    'xo_event',
    'side',
    'default'
  );
});</pre>
<p> </p>
<hr />
<p><span style="font-size: 14pt"><strong>●現象</strong></span></p>
<p>Chromeで表示した際、図示の通り「コード」ブロックの行番号12の一部が表示される。<br />また、→のプレビューの行番号7も同様。</p>
<hr />
<p><span style="font-size: 14pt"><strong>●原因</strong></span></p>
<p>行番号は疑似要素で1～99を出力している。<br /><br />&lt;pre&gt;タグ（コード表示部）に合わせ余白に合わせ、以下で余白を設け、コード表示部からはみ出した行番号はhiddenで非表示としたい。<br />しかし、<span style="color: #ff0000">padding</span>としているので、例えば行番号12の一部が表示されてしまう。</p>
<p>https://github.com/xserver-inc/cocoon/blob/acf367d85dbd7b5b555e33861b0b4fd5a9fc6726/style.css#L12519</p>
<hr />
<p><span style="font-size: 14pt"><strong>●対策</strong></span></p>
<p><span style="color: #ff0000">margin</span>が正しいのでは？</p>
<div id="wpfa-43775" class="wpforo-attached-file"><a class="wpforo-default-attachment" href="//wp-cocoon.com/wp-content/uploads/wpforo/default_attachments/1756099269-2025-08-25_13h54_41.png" target="_blank" title="2025-08-25_13h54_41.png"><i class="fas fa-paperclip"></i>&nbsp;2025-08-25_13h54_41.png</a></div>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/cocoon-theme/">Cocoonテーマに関する質問</category>                        <dc:creator>大門未知子</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/cocoon-theme/%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e8%a1%8c%e7%95%aa%e5%8f%b7%e8%a1%a8%e7%a4%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-86185</guid>
                    </item>
							        </channel>
        </rss>
		