サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年2月28日 12:43
はじめまして。
スキンの不具合の解決にお力をお借りしたいです。
現在conoha wingのサーバーにてWordPressでブログサイトを制作しようとしておりますが
スキンがしっかりと反映されません。
背景色などは反映されているようなのですが、サイトのレイアウトなどが反映されない状況です。
唯一下記のスキンのみレイアウトなども反映されております。
スキンからオプション変更サンプル（CSV） [作者: わいひら]
スキンからオプション変更サンプル（JSON） [作者: わいひら]
スキンからオプション変更サンプル（PHP） [作者: わいひら]
【実施したこと】
・サーバー側でのSSL設定
・サイトURLとホームURLをhttpsに揃える
・cocoonの親と子のスキンを再インストール
・サーバー側でのWordPressの再インストール
添付画像として
Fuwari -褐色(かちいろ)- [作者: アオイ]
上記のスキンを反映した際のプレビュー画面のスクリーンショットをつけておきます。
以上、何卒よろしくお願い致します。
----------------------------------------------
サイト名：Sciolto Fare
サイトURL： https://scioltofare.com
ホームURL： https://scioltofare.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-fuwari-kachiiro/style.css
WordPressバージョン：5.9.1
PHPバージョン：7.4.25
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.4.2
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
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縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
----------------------------------------------
2022年2月28日 14:22
beranoさん
スマホからなもので、あまり確認していません。
背景色などは反映されているようなのですが、サイトのレイアウトなどが反映されない状況です。
上記が具体的にどこのことなのかは分からないのですが・・・。
添付いただいた画像のサイドバーのことであれば。
一旦、ウィジェットを削除してください。
その後必要に応じてウィジェットを再設定してください。
WordPress 5.8以降は、初期状態では「ブロックウィジェット」が設定されます。
Cocoonはウィジェットブロックエディタの対応を見送っています。
再設定することで、従来の「クラシックウィジェット」が設定され、スキンもあたると思います。
わいひら reacted
Topic starter
2022年2月28日 15:10
ご返信頂きありがとうございます。
状況の説明が不十分で申し訳ございません。
反映されていないものといたしましてはサイドバーだけでなく投稿記事部分やヘッダー下のおすすめカードが表示される部分など全体的なものとなります。
サイドバーに関しては教えていただいた通りにウィジェットの項目より内容を消去してみましたがあまり変わりがありませんでした…。
現状反映してるスキンのスクショを添付致します。
ご確認のほど、よろしくお願い致します。
2022年2月28日 16:15
beranoさん
結論から言えば、スキンは当たっています。
現在のberanoさんのサイトは以下の状態。
「Hello world」は、構成要素が少ないですので、なかなか判断は難しいかもしれません。
サイドバーは、やはり「ブロックウィジェット」が入っているために、正しく当たっていないと思います。
（クラシックウィジェットだと、リストマーカーは付きませんし、見出しも日本語です。）
（クラシックウィジェットだと、リストマーカーは付きませんし、見出しも日本語です。）
私のローカル環境でスキンを当てると以下のようになります。
ウィジェットの位置が違いますが、サイドバーの下の方の「アーカイブ」をご覧いただければ、「クラシックウィジェット」との違いがお分かりいただけると思います。
あと、違いがあるとすれば、文字フォントとカテゴリーのラベルでしょうか。
（文字フォントは各々で違うと思います。）
（文字フォントは各々で違うと思います。）
そこで、私のローカル環境の「サイトキーカラー」を色、「サイトテキストキーカラー」を黒にしてみます。
それが以下です。
カテゴリーラベルが、beranoさんのサイトを同様になったと思います。
（カテゴリーラベルの色は、各カテゴリー毎に設定できると思います。）
（カテゴリーラベルの色は、各カテゴリー毎に設定できると思います。）
つまり、スキンは当たっているというだと思います。
DEMOサイトと比較すると、本文下のシェアボタンがちょっと違う気はしますね。
ローカル環境を確認すると、優先度でスキンが負けちゃっているような感じはします。
2022年2月28日 16:43
再編集できなかったり、誤字があるので補足・訂正します。
サイドバーは、やはり「ブロックウィジェット」が入っているために、正しく当たっていないと思います。
（クラシックウィジェットだと、リストマーカーは付きませんし、見出しも日本語です。）
ここは、間違いではないですが、補足します。
現在beranoさん設定されているものは、WordPressインストール時に初期状態で設定されている「ブロックウィジェット」です。
これは、見出しがh2です。
対して「クラシックウィジェット」は見出しがh3です。
そういう違いもあり、CSSが当たらないということが起きると思います。
そこで、私のローカル環境の「サイトキーカラー」を色、「サイトテキストキーカラー」を黒にしてみます。
上記は訂正します。
「サイトキーカラー」は白です。
Topic starter
2022年3月1日 10:06
ご丁寧にありがとうございます。
WordPressに関して知識がなく申し訳ございません…。
現在ブロックウィジェットが設定されているとのことなのですがこちらを解除する方法はありますでしょうか？
自分で検索してClassic Widgetsというプラグインをいれてみましたが
ウィジェットの編集画面に変化がみられませんでした。
また、ウィジェットのサイドバーの項目を一通り削除し、アーカイブのみを新たに追加しましたが
英字のArchivesとCategoriesも表示から消えません。
これらもブロックウィジェットが原因でしょうか？
ウィジェットの編集画面をスクリーンショットを添付致します。
ご確認のほど、よろしくお願いいたします。
2022年3月1日 11:14
また、ウィジェットのサイドバーの項目を一通り削除し、アーカイブのみを新たに追加しましたが
英字のArchivesとCategoriesも表示から消えません。
「サイドバー」の下にある「サイドバースクロール追従」に「ブロック」という名前のウィジェットが残っていると思います。
それらを削除すると英字の2つのウィジェットが消えるはずです。
左側「利用できるウィジェット」から好きなものを選んでサイドバーなどに追加すると、スキンのスタイルが当たった状態のウィジェットが表示されると思います。
例えば「カテゴリー」というウィジェットが現在の「Categories」に該当します。
自分で検索してClassic Widgetsというプラグインをいれてみましたが
ウィジェットの編集画面に変化がみられませんでした。
Cocoonでは元からクラシックウィジェットが適用されるようになっています。
なので、プラグイン「Classic Widgets」はあってもなくても変わりません。
2022年3月1日 11:20
beranoさん
現在ブロックウィジェットが設定されているとのことなのですがこちらを解除する方法はありますでしょうか？
最初の返信に書いた通り、削除するだけです。
Classic Widgetsというプラグインをいれてみましたが
ウィジェットの編集画面に変化がみられませんでした。
このプラグインは、不要です。
このプラグインがなくともCocoonは、ウィジェットブロックエディタを無効化にしています。
そのため、変化はないです。
英字のArchivesとCategoriesも表示から消えません。
スマホからなもので、確認ができませんが・・・。
「サイドバースクロール追従」に入っていませんか？
PCで操作した場合、下にスクロールさせても、上へと消えていかなければ、「スクロール追従」だと思います。
（一旦上へとスクロールするが、その後画面上端に貼りつく。）
「ブロックウィジェット」は、ウィジェット画面では「ブロック」という名前だったと思います。
2022年3月1日 11:20
現在の状況を説明すると、まずmk2さん指摘の通りWordPress5.8からは「ブロックウィジェット」というものが導入されています。
しかしCocoonの本体やスキンはこのブロックウィジェットに対応していません。
5.8以降でWordPressを新規にインストールすると、最初はCocoonではないテーマ(WordPressデフォルトテーマ)が適用された状態でインストールされます。
このデフォルトテーマはブロックウィジェットに対応しています。
そのため、ウィジェットには自動的にブロックウィジェットが挿入されます。
テーマをCocoonに切り替えると、ウィジェットの編集画面は以前の画面(クラシックウィジェット)に切り替わります。
しかしインストール時に自動的に挿入されたウィジェットは残ったままになります。
これがウィジェットにCocoonのスタイルが適用されない理由です。
Topic starter
2022年3月1日 11:44
はるさん、mk2さん
ご返信いただきありがとうございます。
サイドバーに残っておりました英字のArchivesとCategoriesもお二方のおっしゃるとおサイドバースクロールの追従に項目が残っており、これを消去することで解決いたしました。ありがとうございます。
cocoonのクラシックウィジェットとブロックウィジェットの関係が少し理解できたと思います。
ウィジェット編集にて最初から入っている項目を一旦消去し、自分の制作したい要素を各項目（サイドバーやコンテンツ上部など）へ追加することでスキンが適応された見た目になっていくと考えて大丈夫でしょうか？
はる reacted
2022年3月1日 11:55
beranoさん
これまでの返信に書いた通りです。
（分かりにくかったようですね。）
- WordPressインストール初期状態では、ブロックウィジェットが設定されている
- Cocoonは対応を見送っているため、「ウィジェットブロックエディタ」無効化している
そのため、Cocoonでは従来のクラシックウィジェットを設定できる - 初期状態で設定されているブロックウィジェットは、従来のクラシックウィジェットとは、見出しなどの構造が違うために、CSSがあたらない
（見出しはh2→h3に変更すればあたりはします、ただしウィジェットの中身がまた少し違います）
一度WordPress公式テーマへと変更していただいて、ウィジェット画面をご確認いただくと、お分かりいただけるかもしれないですね。
わいひら reacted
Topic starter
2022年3月1日 12:26
mk2さん
ありがとうございます。
できれば現在使用したいと思っているスキンと同じように、投稿記事を縦に並べるのではなく横に二列に並べるということができればと考えておりますが可能でしょうか…？
いくつも質問をしてしまい申し訳ございませんが、ご教示のほどよろしくお願いいたします。
2022年3月1日 12:31
beranoさん
できれば現在使用したいと思っているスキンと同じように、投稿記事を縦に並べるのではなく横に二列に並べるということができればと考えておりますが可能でしょうか…？
それは、スキンの機能ではないです。
スマホからなもので、うろ覚えですが・・・。
「Cocoon設定」－「インデックス」あたりで、エントリーカードの指定ができたと思います。
2022年3月1日 12:39
以下のマニュアルページに記載があります。
エントリーカードの設定方法（一覧ページのカードの種類）
https://wp-cocoon.com/index-entry-card-type/
一度、上記も含めてマニュアルページをご覧いただくと良い気がします。
テーマ利用マニュアル
https://wp-cocoon.com/manual/
Cocoonは多機能ですから、読むだけでも大変ですが、テーマ作者様が整理くださっていますので、ぜひご覧いただいて、お役立てください。
なお、1トピックにご質問は1つでお願いしております。
トピック名と異なるご質問は、新たなトピックを立てていただきますよう、お願い致します。
わいひら reacted
Topic starter
2022年3月1日 15:05
mk2さん
ご返信いただき、ありがとうございます。
教えていただいたページを読み設定してみたいと思います。
また、トピックに続けて質問をしてしまい大変申し訳ございませんでした。
今後も不明点などあればトピックを作成し質問することかと思いますがどうぞよろしくお願いいたします。
この度はいろいろとお教え頂き非常に助かりました！ありがとうございました！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。