サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年9月4日 10:37
不具合・カスタマイズ対象ページのURL: https://mimilittlehome.com/
相談内容:ウィジェットエリア(サイドバー)の見た目を変更したくて、ネットで検索したcssコードを入れた見たので すが全く反映されません。複数サイトのコードで試してみましたが、どれも反映されなかったので書き損じの可能性は低いと思われ、またキャッシュの削除、プラグイン無効化も行いましたが、変化はありませんでした。その他のエリアのcssカスタマイズはうまくできており、このサイドバーのカスタマイズだけびくともしないです。
カスタマイズしたい内容はこのサイト( https://mycus-tom.com/posts/33 )に記載されているもので、矢印アイコンがついたサイドバーのデザインにしたいです。
解決のために試したこと:キャッシュの削除、プラグイン無効化、書き損じの確認、CSS縮小化のチェックを外す
環境情報:----------------------------------------------
サイト名:お白湯の婚活ブログ
サイトURL: https://mimilittlehome.com
ホームURL: https://mimilittlehome.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon
スタイルシートURL:/wp-content/themes/cocoon-child
親テーマスタイル:/wp-content/themes/cocoon/style.css
子テーマスタイル:/wp-content/themes/cocoon-child/style.css
スキン:/wp-content/themes/cocoon-child/skins/skin-template/style.css
WordPressバージョン:6.0.2
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8,zh-CN;q=0.7,zh;q=0.6
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.4
カテゴリ数:4
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:7001バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
----------------------------------------------
2022年9月4日 11:03
以下に例を示します。該当箇所のidなど追加し対応のこと。
/* ウィジェットのリストの先頭にアイコンフォントを付ける */ .widget li a:before { color: #ffb6c1; content: '\f138'; /* アイコンフォント */ font-family: 'FontAwesome'; margin-right: 0.5em; }
子テーマCSSですが、どこかのコードをコピペしているのか分かりませんが、私なら以下のように記述します。
クリアフィックスをわざわざ付ける必要はなく
.cf .widget_categories ul→.widget_categories ul
わいひら reacted
2022年9月4日 11:33
konchanさん
別件ですが、真っ先に対応すべきことがあります。
konchanさんは、ConoHa独自に改変されたテーマをご利用で、バージョンアップできない状態です。
(ConoHaからは、ユーザーへ向けて、2021年11月に連絡があったはずです)
テーマ名:Cocoon
バージョン:2.3.4
上記は、2021年7月頃のバージョンです。
WordPress 5.8までにしか対応しておらず、WordPress 6.0系でご利用になるには、いくつかの不都合があるはずです。
(現在のCocoonのバージョンは、2.4.8.x)
この状態を解消しておかないと、テーマのバージョンアップできず、今後WordPressのバージョンが上がっていくごとに、益々不都合が出てくると思います。
解消のためには、ConoHa独自に改変されたテーマを削除し、新たに正しいテーマのインストールが必要です。
以下の手順を参考になさって対象なさってください。
https://wp-cocoon.com/community/postid/55027/
そして、ご利用のスキンは、スキン開発用のテンプレートのような気はします。
(スマホからなもので、確認はしておりません)
2022年9月4日 11:35
前略、konchanさん
環境情報を拝見しますと、cocoonのテーマのフォルダ名が以前ConoHa WINGで提供されていたもののようです。
そのままでは、今後テーマのアップデートに支障が生じるような気がします。
一旦、WordPressの公式テーマに戻してから、ConoHa WINGからインストールしたCocoonを削除し、このCocoonのサイトからダウンロードしたテーマにインストールし直す方法があります。
mk2さんが手順をまとめてくださっていますので、以下にリンクを貼ってみます。
mk2さんがまとめてくださったトピック
https://wp-cocoon.com/community/postid/55027/
2分遅れでmk2さんと被っていますね・・ ?
This post was modified 2年前 by リフィトリー
2022年9月4日 16:15
よく見たら子テーマCSSに、アイコンフォント付加のコードは定義してありした苦笑
●原因
子テーマCSSにエラーがあります。(図参照)
致命的なのは196~278行目の間に「}」がありません。この為、全くCSSが反映されません。
以下でチェックを掛けて見直し下さい。
また、CSSはFont awesome 5 Freeとなっているが、[Cocoon設定]→[全体]→サイトアイコンフォント
Font awesome 4なのでは?
Topic starter
2022年9月7日 09:38
@mk2_mk2 さま
バージョンアップデートの件、全くできておらず教えていただきありがとうございます。
すぐに更新作業してみます。
スキンは、[child] スキンテンプレートを使っているのですが、こちらは良くないのでしょうか。シンプルな白い状態から色やデザインのカスタマイズができればなと思いまして使っております。
Topic starter
2022年9月7日 11:25
@chu-ya さん
ありがとうございます。バージョンアップ後にCSSコードの検証を行い、エラーがない状態になったのですが、
ウィジェットエリアは、反映されずでした。サイトのフォントはFont awesome 5 Freeで設定しております。
2022年9月7日 14:04
konchanさん
スキンは、[child] スキンテンプレートを使っているのですが、こちらは良くないのでしょうか。シンプルな白い状態から色やデザインのカスタマイズができればなと思いまして使っております。
もう1度書きますが、上記はスキン開発時に使用するテンプレートです。
もっと言えば、「ひな型」です。
「スキン」としての装飾は一切なく、スタイルシートの最初のお約束が書かれているだけです。
中身を見ていただくと良く分かると思います。
中身は、以下のようになっています。
/* Skin Name: スキンテンプレート Description: スキン自作の際にひな型となるスキンです。スタイルは何も入っていません。 Skin URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png Version: 1.0.2 Priority: 9999000000 */ /*以下にスタイルシートを記入してください*/
中身は、上記だけしかなく、選択する意味はないです。
「なし」と同じ状態で実害はないと言えるかも知れませんが、何故意図的に選択なさっているのかな・・・という気はします。
(スキンの役割は果たしていない)
ご自分で、スキンを作成していて、その部分にCSSを追加しているのであれば話は別です。
(その場合は、スキンの名称も変更しそうには思います)
わいひら reacted
2022年9月7日 14:10
konchanさん
テーマの入れ替え作業が不完全なようです。
テーマ内デフォルトの画像は、旧テーマ(ConoHa独自に改変されたもの)を指していると思います。
例えば、404ページは以下のような感じです。
画像のパスの「cocoon」だった部分を、「cocoon-master」へと変更する必要があると思います。
例えば、404画像の場合は以下のようなイメージです。
(直リンクになってしまうため、途中にスペースを入れています)
(直リンクになってしまうため、途中にスペースを入れています)
旧)ConoHa独自に改変されたテーマのパス
https ://mimilittlehome.com/wp-content/themes/cocoon/images/404.png
新)Cocoon本来のパス
https ://mimilittlehome.com/wp-content/themes/cocoon-master/images/404.png
404の画像だけでなく、その他のcocconデフォルトの画像も同じだと思われます。
(吹き出し・OGPなどもご確認なさった方が良いと思います)
(吹き出し・OGPなどもご確認なさった方が良いと思います)
P.S.
もうスキンは変更なさっているのかもしれないですね。
もうスキンは変更なさっているのかもしれないですね。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。