現在「SILK」スキンを適用中です。

ソースコードの行番号表示で不要な行番号が表示される | 不具合報告 | Cocoon フォーラム

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

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

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

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


Shintaro Akao
 Shintaro Akao
(@Shintaro Akao)
ゲスト
結合: 1年前
投稿: 3
Topic starter  

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


引用未解決
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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

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

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


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 806
 

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

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


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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


返信引用
Forest
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 6
Topic starter  

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

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

 

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

 

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

 

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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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

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


返信引用
Forest
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 6
Topic starter  

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

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

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

 

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

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

 

よろしくお願いします。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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

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


返信引用
Forest
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 6
Topic starter  

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

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

 

 


返信引用
Forest
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 6
Topic starter  

度々すみません。

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

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

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

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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

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

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

This post was modified 1か月前 by わいひら

返信引用
Forest
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 6
Topic starter  

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

 


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

確かに、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
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 1
Topic starter  

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

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

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

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

 

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

 

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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

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

This post was modified 1か月前 by わいひら

返信引用
Forest
 Forest
(@Forest)
ゲスト
結合: 1か月前
投稿: 6
Topic starter  

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

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

 

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

 


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11634
わいひら - Facebookわいひら - Twitter
 

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


返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年7ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年5ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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