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カスタマイズ依頼

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

ソースコードの行番号表示で不要な行番号...
 
共有:
通知
すべてクリア

[解決済] ソースコードの行番号表示で不要な行番号が表示される

17 投稿
3 ユーザー
4 Reactions
1,898 表示
(@Shintaro Akao)
New Member
結合: 5年前
投稿: 3
トピックスターター  

添付画像のように行番号4まで表示したいのですが、5が少し見切れているのが気になります。こちら修正していただきたいです。


   
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

スタイルを調整してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
上記ファイルでまだ表示に不具合が出るようでしたら、フォーラムの案内にあるように該当ページのURLを貼っていただいてよろしいでしょうか。

不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください


   
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 

チェックはしていませんが、preタグ内の記述はCocoon設定の文字サイズ等と連動しているため、スタイルを見る限りでは不十分のような気がします。

preタグ内だけフォントスタイルを固定するなど、追加で何らかの対策が必要かと。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ありがとうございます。そうですね。
emでの設定に戻して、行数が見えない余白に調整してみました。
一応、Cocoon設定で影響があるような部分を変更してみて試してみたのですが、多分これで大丈夫なような気がします。
https://github.com/yhira/cocoon/commit/489c74f9498b76ace2f1febe74afcd18575e7dc9#diff-da232d78aa810382f2dcdceae308ff8e


   
返信引用
(@Forest)
Active Member
結合: 4年前
投稿: 6
 

横から割り込むようで申し訳ありません。

cocoonの開発とサポートありがとうございます。とても便利に使わせていただいております。

 

コードの行番号についてなのですが、行の余白を0emに設定できない限り、行番号とコード本文が揃うことは無いのではないかと思うのですが、本認識で良いでしょうか。

 

色々設定をいじって確認しただけですので正確とは言えないところがお恥ずかしいのですけど。

 

https://hyperforest.jp/2021/01/18/1562/


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

1 : 行番号については改行で表現しているので"行の高さ"(line-height)で行の詰め具合が決まる。
2
3 : コード本文については行の高さ(line-height)に加えて"行の余白"(margin)が加わる。
4
5 : "行の高さ"と"行の余白"は行番号とコード本文とで共通の設定(本文→本文行間設定→本文余白)。
6
7 : "行の余白"は最小が0.1であって、コード本文に僅かながらも必ず発生するので行番号とコード本文を一致させるのは困難(といか無理)。

リンク先のコードの一行ごと自体には、marginは加わっていないと思います。
リンク先のコードと行が揃っていないのは、CSSセレクターの優先度の違いにより、行番号とコード本文のline-heightの値が違うからだと思います。
その部分については修正しておこうと思います。


   
返信引用
(@Forest)
Active Member
結合: 4年前
投稿: 6
 

わいひらさん、早速ご対応頂きありがとうございます。

コード本文部分のmarginについては私の確認ミスでした。

お手数おかけして申し訳ありません。

 

修正頂けるとのこと、ありがとうございます。

当方では急ぎませんのでお時間のあるときにでもご対応頂けると助かります。

 

よろしくお願いします。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

とりあえず、強制的にline-heightの高さが同じになるように修正しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
CSSのimportant指定を使用しましたが、ここは強制してもいいところなのかなと。


   
返信引用
(@Forest)
Active Member
結合: 4年前
投稿: 6
 

わいひらさん、ご対応ありがとうございました。

行番号とコードとで行の高さが同じになる事を確認しました。

 

 


   
返信引用
(@Forest)
Active Member
結合: 4年前
投稿: 6
 

度々すみません。

些細な事なんですが、.is-code-row-number-enable の pre と pre::before で、paddingの上下がチョット違うのですが、揃えられれば微妙な上下位置の差も解消できると思います。

行番号の見切れ防止には0.4以下がいいように感じました。

素人考えなので他への影響はわからないのですが。

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

些細な事なんですが、.is-code-row-number-enable の pre と pre::before で、paddingの上下がチョット違うのですが、揃えられれば微妙な上下位置の差も解消できると思います。

よろしければその状態のスクリーンショットをいただいてよろしいでしょうか。

みた感じだと、どちらもpadding上下は0.4emになっているような気がします。


   
返信引用
(@Forest)
Active Member
結合: 4年前
投稿: 6
 

先日githubからダウンロードしたstyle.cssです。

 


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

確かに、padding: 0.5em 0em 0.5em 0em;は値が違って、不要でもあるのですが、CSS上ではpadding: 0.4em 0em 0.4em 0em;が優先されて適用されているので、padding-topは0.4emになっていると思います。

ただ、いずれにせよpadding: 0.5em 0em 0.5em 0em;部分は不要な設定なので、削除しておきます。


   
返信引用
(@Forest)
New Member
結合: 4年前
投稿: 1
 

わいひらさん、ありがとうございます。

貼って頂いたスクリーンショットが再現できなかったのですが、もしかしたら私のサイトで確認して頂いたのでしょうか。

一時期確認のためcocoon-childに当該要素を追加していた時があり、その状況がスクリーンショットに取れてしまっているのかもしれません。

単にpaddingを消しただけだと詰まってしまうように思うので、設定は残しておいた方が良いように感じます。

 

紹介したURLの内容を変更してしまってお手数を取らせてしまっていたのでしたら、申し訳ありません。

 

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

貼って頂いたスクリーンショットが再現できなかったのですが、もしかしたら私のサイトで確認して頂いたのでしょうか。

そのようです。
自分のテスト環境で確認し、修正しておきました。
カスタマイズのない自分の環境で確認するべきでした。反省。。


   
返信引用
(@Forest)
Active Member
結合: 4年前
投稿: 6
 

わいひらさん、ありがとうございます。

こちらこそ、提示したURLの内容を変更してしまい、大変失礼しました。

 

解決したのですが、なにせ横から割り込んだ形になってしまいましたので、Shintaro Akaoさんの対応をお待ちしたいと思います。

 


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

ご確認いただきありがとうございます。


   
返信引用
共有:

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

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

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

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

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

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

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

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