何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Last seen: 2023年4月27日 16:08
@mk2_mk2 さん 最近は、あまり時間がとれず、事前テストも疎かに・・・ すみません。
@mk2_mk2 さん Cocoon設定の「エディターにテーマスタイルを反映させる」にチェックが入っていませんでした。 お騒がせしました。 c87a33ec9106fcd2c5ee2fab5517995f.png
@mk2_mk2 さん 翻訳を更新してみたものの、Cocoonブロックのスタイルは適用されず・・ 😥 6.1RC1をインストールしたつもりなのですが、何か間違っているのかもしれません。 RC1-honyaku.png
@karen-pp さん chu-yaさんのアドバイス通りに子テーマに書き込んでみたのですが、反映されませんでした。おそらくスキンのほうが優先なのでしょう。だったらと、追加CSSに書き込んでみたところ、無事反映されました。追加CSSは外部読み込みではないので優先なのでしょうか…? キ...
karen-ppさん Cocoonの高速化設定の案内のページのリンクを貼ってみます。 ※案内ページの内容がやや古く、少し前のバージンの画像になっているところもあるみたいです。(遅延読み込み部分など) Cocoonおすすめのサイト高速化設定
karen-ppさん コピーライトの文字色の件ですが、chu-yaさんご案内のように、スキンの「いつものローズ」によるデザイン指定ですので、スキンの「いつものローズ」に拘りがなければ、スキンを「なし」にする、という選択肢もあります。
前略、karen-ppさん 別件ですが、プラグインの「Autoptimize」はCocoonと併用すると不具合が出ると過去のトピックで話題に上っています。 「Autoptimize」については削除されることをお勧めします。 Cocoonには独自の高速化設定がありますので、...
前略、youplusさん 参考情報として デザインがご希望とは異なるかもしれませんが、Cocoon設定→インデックスと辿り、カードタイプをタイルカード2列かタイルカード3列にすると、記事一覧のアイキャッチ画像からのサムネイル画像がトリミングされずに表示されるかと思います。 その場合もサム...
@yhira さん ありがとうございます。 まだ出先でスマホですが、とても読みやすくなりました。 m(_ _)m
@yhira さん ひとつ、試していただきたいのですが、PC表示時、モバイル表示時ともにフォーラム投稿本文の line-height の値を1.8としていただけませんでしょうか。 行間が ほんの少し広がるだけですが、可読性が上がるように思います。
@yhiraさん メディアクエリの波括弧抜が抜けておりましたこと、あいすみません。 /*フォーラム本文モバイル表示*/ @media screen and (max-width: 1023px) { #wpforo #wpforo-wrap .wpforo-post .wpf-r...
@yhira さん 説明が下手ですみません。 2回目に投稿した CSSのコードは1回目コードから以下のように変更しています。 ・PC表示時のフォーラムの本文のフォントサイズ17px→18px ・モバイル表示時のフォーラム本文のフォントサイズ16px→17px ・...
@yhira さん お手数をおかけします。 私もPCとiPhone SEで表示を確認してみました。 表示自体には特に問題ないように思います。 ただ、wpForoのバージョンアップ前と比べると、ほんの少し小さく感じるため、PC表示のサイドバーのウィジェット部分はそのままで、フォーラム本...
@mk2_mk2 さん なるほど、プラグインにフォントサイズの設定項目があるのですね。 プラグインで設定できるのでしたら、そちらの方が簡単かつ、メンテナンスもしやすいような気がします。 ただ、サイドバー部分の表示に関しては、1023px幅未満の画面幅ではwpForoのCSSは当たっておら...
お世話になっております。 「wpForo」のバージョンアップにより、フォーラムの文字が小さくなりました。 小さい方が良い、という方もいらっしゃるかとは思いましたが、私はバージョンアップ前のイメージの方が老眼にも優しいため、以前のイメージの方がありがたいです。 試しに適当なCSSを書いてみ...
miyumaruyamaさん mk2さん ご質問をよく読んでみると、mk2さんのおっしゃるとおりで、ご質問の内容とは違う回答を書いていたように思います。すみません。 私には以下の2つを外部ファイルにする方法はわかりません。 <style id='global-styles-inli...
miyumaruyamaさん 子テーマを導入後、ダッシュボードの「外観」→「テーマファイルエディター」と辿ると「テーマを編集」のページが開くかと思います。 ここにCSSのコードを記述すればよろしいかと・・ 0417a118fccab3090481b5145492764e.png
前略、miyumaruyamaさん 親テーマ、子テーマにつきましては以下の過去のトピックが参考になるかと思います。 [解決済] 親テーマと子テーマについてです。 公式マニュアルページは以下です。 Cocoonテーマをインストールする方法
前略、konchanさん 環境情報を拝見しますと、cocoonのテーマのフォルダ名が以前ConoHa WINGで提供されていたもののようです。 そのままでは、今後テーマのアップデートに支障が生じるような気がします。 一旦、WordPressの公式テーマに戻してから、ConoHa WING...
前略、Ginzahairさん 小用があるので出かけてしまいますが、ご利用になっているエディタがブロックエディタなのかクラッシックエディタなのかも不明ですし、「実際のサイトでは」ということはエディタ上では表示されているのかもしれない、という推測はできますが、それも良くわかりません。 実際のUR...
@arcana さん 実際に試していないので、間違っているかもしれません。 .navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on, .new-entry-cards.widget-entry...
@arcana さん サイトを拝見すると、個人ブログではなく営業用のサイトのご様子ですので、ご自身で難しい部分は以下のリンクにある方に、カスタマイズを依頼するというもの有りかと思います。 Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】
@arcana さん Cocoonの生成するサムネイル画像のサイズをカスタマイズする方法もあるようですが、難易度は高くなってくるような気もします。 Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集 私も試したことがある程度で十分な知識がある訳では...
@arcana さん 2020年12月のトピックなので、若干古いトピックですが、新着記事を横並びにするという意味では似ているかもしれません。 【教えてください】ヴィジェット新着記事を横並びに表示したい 4→2→1列 ただ、@arcana さんの場合はサイドバーを...
@arcana さん Firefoxのエミュレータでは既に同じサイズで表示されているようです。 解決されているのでは? 3079c6d1b1297356b92e7d2c11fc9b99.png
前略、Arcanaさん もしかしたら、親テーマのCSSの以下の指定で幅400px以上にならないようになっているためかもしれません。 /************************************ ** 新着記事ウィジェット(大きなサムネイル) ****************...
前略、simpleandwellさん 短時間で思いついたことを書いてみます。カテゴリーウィジェットをサイドバーに設定して、ウィジェットの設定の表示・非表示の設定で、「偉人デスクツアー」のページだけ表示する、という簡単な方法がありますが、これだと、他のカテゴリーも表示されちゃうような気がします。 ...
前略、BizHさん 子テーマのCSSファイルの一番下にあるはずのメディアクエリの閉じ括弧が見当たらないような気がします。 お問い合わせの件との関連性はよくわかりませんが・・・ 何かの折に、間違って消しちゃった、というようなことはございませんでしょうか? ...
@ahsn さん WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。 インストールしておいた方が無難かもしれません。
前略、AHSNさん 閲覧できません、となるのは、Conoha Wing のWAFで弾かれているのでは? Cocoon設定の操作時だけ一時的にWAFをOFFにして試してみると良いかもしれません。 出先でスマホなので、よく調べていませんが、スキンを利用している場合はスキン...
sakigakeさん WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。 インストールしておいた方が無難かもしれません。
前略、sakigakeさん 以下のCSSのコードを子テーマのCSSファイルか、追加CSSにコピペではどうでしょうか? @media screen and (max-width: 834px) { .appeal div.appeal-in { min-height: 24vw...
出先でスマホなので、書き込みにくいんですが、、 Wordpress has parent and child themes. We recommend that you use a child theme.
よく見てみると、子テーマをお使いになっていないご様子。 出先なので、書き込みにくいです。 どなたか、ご案内くださると良いのですが、、、
Risaさん WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。 インストールしておいた方が無難かもしれません。 If you want to use WordPress in Japanese...
前略、Risaさん 以下のプラグインは、他のテーマのために作られたもので、Cocoonとの相性は最悪です。 The following plugins are designed for other themes and are not compatible with Cocoon. VK...
@suzu1005 さん Conoha WINGのCocoonの問題を何とかしないと、今後、Cocoonがアップデートできません。 mk2さんがまとめてくださった方法、手順をよく読み返して慎重に作業なさってみてください。 Cocoonのテーマのデフォルトのフォルダ名 親テーマ...
@suzu1005 さん 先ずは、ご自身にあったテキストエディタを見つけると良いかと思います。 Windowsでしたら、 「サクラエディタ」「Terapad」「Mery」などがとっつきやすいかもしれません。 最初から、「Visual Studio Code」「At...
@suzu1005 さん 上部の余白は、Cocoon custom cssにお書きになっている以下のコードを削除すれば無くなるかと思います。 body{ padding-top: 75px; }
@suzu1005 さん 子テーマのCSSの記述の最後の方にBOMと思しき文字が見受けられます。 CSSを記述する際は、文字コードをUTF-8(BOM)なしで扱うことができる適切なテキストエディタを用いることをお勧めします。 BOM.png
@mk2_mk2 さん ああ、そうなのですね・・ それは、お大事になさってください。 最近は、頼もしい回答者様がおられるので、大丈夫でしょう。
@mk2_mk2 さん お忙しいところ、ありがとうございます。 明日は、私は、フォーラムには来れないかもしれません。
@suzu1005 さん 少しフォーラムを離れていらっしゃるご様子ですので、参考情報を書き込んでおきます。 @suzu1005 さんのサイトのCocoonは、Conoha WING からインストールされたものではないでしょうか? だとすると、WordPressの「テーマ」...
@suzu1005 さん ちょっと、ご質問の件とは別の問題があるような気がしています。 よろしければ、環境情報を貼り付けていただけますでしょうか? 環境情報の取得方法はこちら。→
@chu-ya さん もしかしたら、Conoha WING提供のCocoonを使っているかも?
@suzu1005 さん chu-yaさんのご教示くださったコードの下に以下を追記すると、スマホでの表示が見やすくなるかもしれません。 @media screen and (max-width: 600px) { .appeal { height: calc((100vw - 17p...
@suzu1005 さん 先のコードとどこが違うの?と思われるかもですが、 「.mblt-header-mobile-buttons」の直前の半角スペースを無くしています。 ヘッダーモバイルボタンを消したときに、上部の余分な余白も消すためのコードです。
@suzu1005 さん そのページのモバイルヘッダーボタンは表示されていないようです。 Ctrl+F5キーでリロードして、確認してみてください。 あと、ちょっとCSSのセレクタの書き方を間違えていました。 @media screen and (max-width: 1023...
@suzu1005 さん 「6855」はどのページでしょうか?
あら、そうこうしていたら、chu-yaさんが背景画像で回答をくださっていました。 ? あとは、モバイルのとき画像の文字が小さくなってしまうので、その対策でしょうか・・
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。