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

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

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

追加CSS,style.cssに下記目...
 
共有:
通知
すべてクリア

追加CSS,style.cssに下記目次カスタマイズコードを書いても反映されない不具合

8 投稿
3 ユーザー
4 Likes
862 表示
(@sakurako)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

不具合・カスタマイズ対象ページのURL: https://hori5411.com/superworks/

相談内容:以前は正しく表示されていましたが色々整理していたらいつの間にか消えていましたですので実績はあります追加CSS,style.cssに下記目次カスタマイズコードを書いても反映されない不具合コードは実績があるのでまちがっていないです

/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

 

 

 

 

 

 

解決のために試したこと:追加CSS以外にstyleにも追加しました。正しく表示されていた時は追加CSSだったような気がします

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

----------------------------------------------
サイト名:アニメ、サブカル大好き日比野桜子のブログ
サイトURL: https://hori5411.com 
ホームURL: https://hori5411.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.9
PHPバージョン:7.4.27
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.82 Safari/537.36
サーバーソフト:nginx
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.0.4
カテゴリ数:5
タグ数:43
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1822バイト
functions.phpサイズ:0バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:1
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.2.2
Contact Form 7 5.5.4
EWWW Image Optimizer 6.4.0
Google Sitemap XML 2.0.1
Gutenberg 12.5.4
Jetpack 10.7-a.1
WP-Optimize - Clean, Compress, Cache 3.2.2
WP Mail SMTP 3.2.1
WP Sitemap Page 1.9.1
Yoast SEO 18.1
----------------------------------------------

不具合報告の際には以下の情報を添えてもらうと助かります。

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。


   
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6929
 

sakurakoさん

お問い合わせ内容が真っ白で、良く見えません。
別な方法での貼り付けを考えた方が良さそうに思いますが・・・。

 

ちなみに、少し不思議なところはあります。

私からは、以下のようなCSSが見えます。

/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}
/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

 

ただし、上記は「https ://hori5411.com/?custom-css=5085040a7f」という場所です。

こういう形式のものは見たことがありません。
WordPressの「追加CSS」でも、Cocoonの「子テーマ」や「カスタムCSS」でもないです。

どこにお書きになったものなのでしょう?

もしかすると、WordPress.com独特のものだとすると、ちょっと分からないです。
(ただ、まったく当たっていない訳ではなく、優先度で・・・という部分もあるようですが、詳しくは見ておりません。)

 

そして、ページソースの最下部に、以下のように物もありました。

<!--
	generated in 0.310 seconds
	277509 bytes batcached for 300 seconds
-->

これも見たことがないです。

 

何かのプラグインかな…と思いましたが、ちょっと分からないですね。
一度、プラグインを停止するなどして、確認なさるのが良いかもしれないですね。

 

先にも書きましたが、WordPress.com独特だとすると、ちょっと難しいかもしれません。

これらを見て、他にご存知の方がいらっしゃるかもしれませんので、お待ちいただくのも良いですが、まずはプラグインの可能性を探ってみてはいかがでしょう。

 

 

CSSについては、デベロッパーツールにてご確認いただくのが良さそうに思います。

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool

 

独自にカスタマイズなさったCSSが当たらない・・・という意味では、このフォーラムのサポート対象外がな・・・という気がします。

ご参考までに。

サポート対象外のケース(自前で行ったカスタマイズによる不具合対応)
https://wp-cocoon.com/not-supported/#toc2

 

本日は発熱中の為、これにて失礼してしまいます。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6929
 

ふと思いました。

もしかすると、Jetpackの可能性もあるかもしれません。
(確証はまったくないです。)

だとすると、WordPress.comでは無効化はできないでしょうし・・・。
やはりご本人にお試しいただくしかないと思います。

ただ、まったくCSSが当たっていない訳ではない気がします。
優先度で負けている部分もあるように思います。

ということで、本当に今日はこれで退散して、ゆっくり休みます。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

子テーマの style.css に PHP が書かれています。

function change_post_status_background_color() {
?>
<style type="text/css">
  /* 公開済 */
  .status-publish { background-color: #3498db;}

  /* 下書き */
  .status-draft { background-color: #1abc9c;}

  /* 非公開 */
  .status-private { background-color: #9b59b6;}

  /* レビュー待ち */
  .status-pending { background-color: #f1c40f;}

  /* パスワード保護 */
  .post-password-required { background-color: #f39c12;}

  /* 予約投稿 */
  .status-future { background-color: #e74c3c;}
</style>
<?php }
add_action( 'admin_head', 'change_post_status_background_color' );

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6929
 

Akiraさんがご指摘くださったものは、過去の以下のトピックではるさんがご指摘なさっていたものですね。

[解決済] 投稿記事背景色変更コードが有効にならない
https://wp-cocoon.com/community/postid/59362/

特に返信が1度もなく、「解決済」になさっていたので、解決したものと・・・。
違ったのですね。

 

思わず出てきてしまいましたが、やはり今日は出てくるの止めておこうと思います。
(調子が・・・。)


   
わいひら reacted
返信引用
(@sakurako)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

@mk2_mk2 プラグインを色々無効化し試しましたがダメでした、しばらくしてブラウザのキャッシュの削除を試したところ正常に表示されました、今回のコードは追加CSSに記述しております有難うございました。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6929
 

sakurakoさん

追加CSSに書いただけでは、以下のようにはならないです。

投稿者:: @mk2_mk2

上記は「https ://hori5411.com/?custom-css=5085040a7f」という場所です。

良くあるのは、キャッシュ系のプラグインが、こういうものを作ります。

また、以下とのことですので・・・。

投稿者:: @sakurako

しばらくしてブラウザのキャッシュの削除を試したところ正常に表示されました

やはり、何かのキャッシュだと思います。

もしくは、WordPress.com独特の何かなのか。

以下のようなことが続くようですので、調べてみてください。

投稿者:: @sakurako

ブラウザのキャッシュの削除を試したところ正常に表示

デベロッパーツールも役に立つはずです。

(お問い合わせ前に、キャッシュのクリアは試した方が良さそうですね。何度か同じことが続いているように思います。)

 

そして、Akiraさんのご指摘については、対処なさっていないようです。

せっかくご指摘くださっているのに、何も触れず、対処もしないのはなぜでしょうか。

別トピックでは、返信が1度もありませんでしたし。

あのご指摘のものは、子テーマに書いてはならないものです。

削除なさることを強くお勧めします。
不具合の原因になりえると思います。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6929
 

言葉足らずでした。

投稿者:: @mk2_mk2

子テーマに書いてはならないものです。

「スタイルシートに」ということです。

 

投稿者:: @mk2_mk2

不具合の原因になりえると思います。

「今回の」ということではなく、「今後も含めて」の意味合いです。


   
返信引用
共有:

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

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

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

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

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

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

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

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