サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年2月4日 12:04
前略
先日、PHPバージョンを8.1にしました。
サイトの目次に数字が重なっていることに気付きました。
PHPバージョンを7.4に戻すと直ります。
フォーラム内を検索し、
「[解決済] スキン「イノセンス」 目次」
https://wp-cocoon.com/community/cocoon-theme/スキン「イノセンス」%E3%80%80目次/#post-47729
という投稿を読み、
Cocoon設定>目次>目次ナンバーの表示
のところを「表示しない」に変更しても、うまくいきませんでした。
Cocoonさんのホームページで、スキンが紹介されているページ
https://wp-cocoon.com/skin-innocence/
を見ても同じ現象が見られましたので、スクショの画像を添付します。
どうぞ宜しくお願いいたします。
わいひら reacted
2023年2月4日 13:03
PHP8.1では確認はしていません。
PHPバージョン：7.4.25
Cocoonバージョン：2.5.6.2
●設定が反映されない理由
[Cocoon設定]→[目次]→目次ナンバーの表示
の設定を変更しても反映されません。
理由は、スキン制御(functions.php)されています。
'toc_number_type' => 0, //目次の数字の表示
●原因
この数値が0となっており、本来noneが正しく。
この為、「スキン制御」ラベル表示されない。(図参照)
結果、目次のリストタグがolとなり数字表示となったと思われます。
●対策
スキン「イノセンス」のfunctions.phpを以下に修正。
'toc_number_type' => 'none', //目次の数字の表示
トピックスターター 2023年2月4日 17:31
chu-ya さま
早速のご返信ありがとうございます。
なるほどです！
教えてくださったように、noneに変更したら、数字が消えました。うれしいです。
が、目次のリストが左寄せになってしまいました。
（目次の枠の左側の縦線にくっつく感じ）
制作中の拙いサイトでちょっとはずかしいのですが、
私のサイトのページの目次をスクショして添付します。
トピックスターター 2023年2月4日 18:57
chu-ya さま
いえ、分かりやすくて丁寧なご回答をありがとうございます。
本当に助かります。
今までずっとROM専だったのですが、
最初の投稿で申し上げたように
Cocoon公式サイトのスキン紹介のページでも同じ現象が見られたので、
思い切ってユーザー登録し、質問させていただきました。
自分の環境情報を胸張って貼り付けることができるよう、これからも引き続きWebサイト制作に尽力いたします。
本当にありがとうございます。
わいひら reacted
2023年2月4日 22:40
ご連絡ありがとうございます。
このトピックを見落としておりました。
スキン制御を修正したものをアップしておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
Miyako reacted
2023年2月4日 23:07
@miyako さん
根本原因が分かりました。
スキンのCSSに問題があります。
＞わいひらさん
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.6.3
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------
●結果
スキン「イノセンス」のfunctions.phpが以下である事を確認しました。
結果、スキン制御ラベルが表示される事を確認しました。
'toc_number_type' => 'none',
●問題点
スキン「イノセンス」のstyle.css
マーカー分のpdding-leftを考慮していない為、マーカーが左寄せとなってしまう。
[Cocoon設定]→[目次]→目次ナンバーの表示「表示しない」
となりtnt-noneとなる。
スキン「イノセンス」のstyle.css
マーカー分のpdding-leftを考慮していない為、マーカーが左寄せとなってしまう。
[Cocoon設定]→[目次]→目次ナンバーの表示「表示しない」
となりtnt-noneとなる。
以下の追加要。
スキン制御で固定となる為、tnt-tocを意識せず無条件で1emとする。
スキン制御で固定となる為、tnt-tocを意識せず無条件で1emとする。
.entry-content .toc-list{
padding-left:1em;
}
トピックスターター 2023年2月5日 12:21
わいひらさま
chu-yaさま
スキン制御の修正、ご対応いただきありがとうございますm(_ _)m
①chu-yaさまのアドバイスに従い、
デベロッパーツールで該当箇所を確認いたしました。
②わいひらさまからご教示いただきました手順に沿って、テーマをダウンロード&手動アップデート
→Cocoon設定・目次タブ「目次ナンバーの表示」にスキン制御がかかりました。
③chu-yaさまからのご指摘を参考に、
.entry-content .toc-list{
padding-left:1em;
}
を
外観・カスタマイズ「追加CSS」に記述。
それと、
chu-yaさまが赤四角で囲んでくださっていた「2em」の部分を「0.2em」に変更したもの
.entry-content .toc a{
padding:0.2em 0.2em 0.2em 0;
}
も追加。
④めっちゃエエ感じの目次になりました！！
chu-yaさまのおかげです。
本当にありがとうございます。
深く感謝いたしますm(_ _)m
わいひら reacted
2023年2月5日 19:16
ご提案いただきありがとうございます！
書かれた通り以下のようにCSSを追加しておきました。
https://github.com/xserver-inc/cocoon/commit/17a7f1b01fb533eb9b52b968cdb48e531f35a578
2023年2月5日 22:44
@miyako さん
スキンが対策されました。
尚、CSSは以下の通りです、ご了承下さい。
確認の上、解決済なら「解決済」として頂きたく。
.entry-content .toc-list{
padding-left:1em;
}
＞わいひら さん
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.6.3
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------
目次のマーカー位置が正しい事を確認しました。
わいひら reacted
トピックスターター 2023年2月6日 10:03
ありがとうございます。
自分で書き加えた追加CSSを削除してから、修正していただいたテーマをアップデートし、
目次内の文字の位置（左側）が修正されたことを確認いたしました。
目次内の右側の空白は、chu-yaさまに教えていただいたように、
「2em」の部分を「0.2em」に書き換えたもの
↓
.entry-content .toc a{
padding:0.2em 0.2em 0.2em 0;
}
を追加CSSに貼ることで解決しました。
—————
今回、「Cocoonの公式ページ・スキン『イノセンス』紹介ページが同じことになってるから、ド素人の私が対処できる問題では無いのだろう」と思い、質問させていただきましたが、
chu-yaさまの画像付きの丁寧な解説により、
解決に至ることができました。
デベロッパーツールも初めて触りました。
（前に開いたときは、なんじゃコレ？？と愕然とし、そのままそっと閉じました。）
「デベロッパーツール 使い方」で検索した解説ページを読みながら、
chu-yaさまの画像と同じ部分を自分のサイトから探し出せて喜んでいました。
数値を触るとお試し編集でプレビューが見れるなんて、すごく便利なツールなのですねっ。
今後、自分でCSSを触ることは殆ど無いと思いますが、チョット賢くなった気がして嬉しいです。
感謝の気持ちでいっぱいです。
本当にありがとうございます。
2023年2月6日 19:16
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。