「メイド・イン・ヘブン」スキン適用中

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

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

スキン「イノセンス」目次に数字が重なっ...
 
共有:
通知
すべてクリア

[解決済] スキン「イノセンス」目次に数字が重なってしまう

14 投稿
3 ユーザー
13 Likes
1,015 表示
(@miyako)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

前略

 

先日、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
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

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', //目次の数字の表示

   
Miyako and わいひら reacted
(@miyako)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

chu-ya さま

 

早速のご返信ありがとうございます。

 

なるほどです!

教えてくださったように、noneに変更したら、数字が消えました。うれしいです。

 

が、目次のリストが左寄せになってしまいました。

(目次の枠の左側の縦線にくっつく感じ)

 

制作中の拙いサイトでちょっとはずかしいのですが、

私のサイトのページの目次をスクショして添付します。

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

>わいひら さん

親テーマスキン「イノセンス」に上記問題があります。修正願います。

@miyako さん

恐れ入りますが、Cocoonテーマ情報も提示されず、実際のページを見ないと、私からはこれ以上回答できません。
もしCSSを追加されているなら尚更です。


   
わいひら reacted
(@miyako)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

chu-ya さま

 
いえ、分かりやすくて丁寧なご回答をありがとうございます。
本当に助かります。
 
今までずっとROM専だったのですが、
最初の投稿で申し上げたように
Cocoon公式サイトのスキン紹介のページでも同じ現象が見られたので、
思い切ってユーザー登録し、質問させていただきました。
 
自分の環境情報を胸張って貼り付けることができるよう、これからも引き続きWebサイト制作に尽力いたします。
 
本当にありがとうございます。
 

 


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@miyako さん

現物を確認していないので想定で回答します。
●原因

リスト全体が左寄せになったのではなく、マーカーの分の余白が無いのでは?

リストのリンクの右に余白があり、一見、リスト全体が左寄せになったように見える。

   
Miyako and わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

ご連絡ありがとうございます。
このトピックを見落としておりました。
スキン制御を修正したものをアップしておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
Miyako reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@miyako さん

根本原因が分かりました。
スキンのCSSに問題があります。

>わいひらさん

----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.6.3
カテゴリー数:19
タグ数:147
ユーザー数:1
----------------------------------------------
●結果
スキン「イノセンス」のfunctions.phpが以下である事を確認しました。
結果、スキン制御ラベルが表示される事を確認しました。

'toc_number_type' => 'none',
 
●問題点
スキン「イノセンス」のstyle.css
マーカー分のpdding-leftを考慮していない為、マーカーが左寄せとなってしまう。
[Cocoon設定]→[目次]→目次ナンバーの表示「表示しない」
となりtnt-noneとなる。
以下の追加要。
スキン制御で固定となる為、tnt-tocを意識せず無条件で1emとする。

.entry-content .toc-list{
  padding-left:1em;
}
 

   
わいひら and Miyako reacted
(@miyako)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  
わいひらさま
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
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@miyako さん
スキンの問題点を指摘頂きありがとうございました。

>わいひら さん
上記のスキン「イノセンス」のstyle.cssを修正願います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

ご提案いただきありがとうございます!
書かれた通り以下のようにCSSを追加しておきました。
https://github.com/xserver-inc/cocoon/commit/17a7f1b01fb533eb9b52b968cdb48e531f35a578


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@miyako さん

スキンが対策されました。
尚、CSSは以下の通りです、ご了承下さい。
確認の上、解決済なら「解決済」として頂きたく。

.entry-content .toc-list{
  padding-left:1em;
}

>わいひら さん 
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.6.3
カテゴリー数:19
タグ数:147
ユーザー数:1
----------------------------------------------
目次のマーカー位置が正しい事を確認しました。


   
わいひら reacted
(@miyako)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

ありがとうございます。

 
自分で書き加えた追加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を触ることは殆ど無いと思いますが、チョット賢くなった気がして嬉しいです。
 
感謝の気持ちでいっぱいです。
本当にありがとうございます。
 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

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


   
共有:

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

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

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

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

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

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

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

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