サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年1月11日 11:16
添付画像のように行番号4まで表示したいのですが、5が少し見切れているのが気になります。こちら修正していただきたいです。
2020年1月11日 18:15
スタイルを調整してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
上記ファイルでまだ表示に不具合が出るようでしたら、フォーラムの案内にあるように該当ページのURLを貼っていただいてよろしいでしょうか。
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
2020年1月11日 20:11
チェックはしていませんが、preタグ内の記述はCocoon設定の文字サイズ等と連動しているため、スタイルを見る限りでは不十分のような気がします。
preタグ内だけフォントスタイルを固定するなど、追加で何らかの対策が必要かと。
わいひら reacted
2020年1月13日 19:13
ありがとうございます。そうですね。
emでの設定に戻して、行数が見えない余白に調整してみました。
一応、Cocoon設定で影響があるような部分を変更してみて試してみたのですが、多分これで大丈夫なような気がします。
https://github.com/yhira/cocoon/commit/489c74f9498b76ace2f1febe74afcd18575e7dc9#diff-da232d78aa810382f2dcdceae308ff8e
2021年1月19日 13:43
横から割り込むようで申し訳ありません。
cocoonの開発とサポートありがとうございます。とても便利に使わせていただいております。
コードの行番号についてなのですが、行の余白を0emに設定できない限り、行番号とコード本文が揃うことは無いのではないかと思うのですが、本認識で良いでしょうか。
色々設定をいじって確認しただけですので正確とは言えないところがお恥ずかしいのですけど。
2021年1月19日 20:04
1 : 行番号については改行で表現しているので"行の高さ"(line-height)で行の詰め具合が決まる。
2
3 : コード本文については行の高さ(line-height)に加えて"行の余白"(margin)が加わる。
4
5 : "行の高さ"と"行の余白"は行番号とコード本文とで共通の設定(本文→本文行間設定→本文余白)。
6
7 : "行の余白"は最小が0.1であって、コード本文に僅かながらも必ず発生するので行番号とコード本文を一致させるのは困難(といか無理)。
リンク先のコードの一行ごと自体には、marginは加わっていないと思います。
リンク先のコードと行が揃っていないのは、CSSセレクターの優先度の違いにより、行番号とコード本文のline-heightの値が違うからだと思います。
その部分については修正しておこうと思います。
2021年1月20日 10:00
わいひらさん、早速ご対応頂きありがとうございます。
コード本文部分のmarginについては私の確認ミスでした。
お手数おかけして申し訳ありません。
修正頂けるとのこと、ありがとうございます。
当方では急ぎませんのでお時間のあるときにでもご対応頂けると助かります。
よろしくお願いします。
わいひら reacted
2021年1月20日 19:10
とりあえず、強制的にline-heightの高さが同じになるように修正しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
CSSのimportant指定を使用しましたが、ここは強制してもいいところなのかなと。
2021年1月21日 12:28
わいひらさん、ご対応ありがとうございました。
行番号とコードとで行の高さが同じになる事を確認しました。
2021年1月21日 14:47
度々すみません。
些細な事なんですが、.is-code-row-number-enable の pre と pre::before で、paddingの上下がチョット違うのですが、揃えられれば微妙な上下位置の差も解消できると思います。
行番号の見切れ防止には0.4以下がいいように感じました。
素人考えなので他への影響はわからないのですが。
2021年1月21日 20:51
些細な事なんですが、.is-code-row-number-enable の pre と pre::before で、paddingの上下がチョット違うのですが、揃えられれば微妙な上下位置の差も解消できると思います。
よろしければその状態のスクリーンショットをいただいてよろしいでしょうか。
みた感じだと、どちらもpadding上下は0.4emになっているような気がします。
2021年1月22日 19:32
確かに、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;部分は不要な設定なので、削除しておきます。
2021年1月23日 10:19
わいひらさん、ありがとうございます。
貼って頂いたスクリーンショットが再現できなかったのですが、もしかしたら私のサイトで確認して頂いたのでしょうか。
一時期確認のためcocoon-childに当該要素を追加していた時があり、その状況がスクリーンショットに取れてしまっているのかもしれません。
単にpaddingを消しただけだと詰まってしまうように思うので、設定は残しておいた方が良いように感じます。
紹介したURLの内容を変更してしまってお手数を取らせてしまっていたのでしたら、申し訳ありません。
2021年1月24日 16:16
貼って頂いたスクリーンショットが再現できなかったのですが、もしかしたら私のサイトで確認して頂いたのでしょうか。
そのようです。
自分のテスト環境で確認し、修正しておきました。
カスタマイズのない自分の環境で確認するべきでした。反省。。
2021年1月25日 11:12
わいひらさん、ありがとうございます。
こちらこそ、提示したURLの内容を変更してしまい、大変失礼しました。
解決したのですが、なにせ横から割り込んだ形になってしまいましたので、Shintaro Akaoさんの対応をお待ちしたいと思います。
わいひら reacted
2021年1月25日 22:19
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。