サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年5月2日 19:06
今回、cocoonを初めて使用してHPを作成しています。
トップページの下段に投稿一覧（デフォルト表示のままでOK）なのですが、上手く表示できません
・デフォルト表示だとサムネイル表示がもっと小さく（1/4程度）テキスト表示スペースが狭い
原因が良くわからないのでアドバイス頂けると助かります。
実施内容
・トップページ（固定ページ）の編集で＋「ブロック追加」を投稿一覧（ブログ）を選択して写真が左にあるパターンを選択挿入、実際は上記のようになってしまう
・参考までに、cocoon設定のインデックスは表示形式は、フロントページタイプの一覧（デフォルト）を選択しています。（添付ファイル参照）
アドバイスよろしくお願いします。
サイトURL： https://tsuruya-farm.com
----------------------------------------------
サイト名：つるや農園
サイトURL： https://tsuruya-farm.com
ホームURL： https://tsuruya-farm.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バージョン：6.5.2
PHPバージョン：8.2.15
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.3.1
カテゴリー数：4
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2024/04/tsuruya-farm-rogo.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.3.2
All In One WP Security 5.3.0
BackWPup 4.0.4
Broken Link Checker 2.2.4
Category Order and Taxonomy Terms Order 1.8.1
Contact Form 7 5.9.3
MetaSlider 3.70.2
WP Multibyte Patch 2.9
----------------------------------------------
2024年5月2日 19:36
・トップページ（固定ページ）の編集で＋「ブロック追加」を投稿一覧（ブログ）を選択して写真が左にあるパターンを選択挿入、実際は上記のようになってしまう
こちらは、「投稿一覧」ブロックの「左に画像」のもののことですよね。
これは、Cocoonのブロックではなくて、WordPress標準にあるブロックです。
ですから、こういうものとしか言い様がないのですけれど。
Cocoonだと以下のような感じですけれど。
WordPress公式テーマの「Twenty Twenty-One」でも以下のような感じです。
特に、異常や不具合ではなく、「投稿一覧」ブロックの「左に画像」の標準の状態です。
この表示を変える場合は、何らかのカスタマイズが必要なんだと思います。
Cocoonの機能で、同様（近い）のものと言えば、「新着記事」ブロックかと思います。
新着記事ショートコードと同様のものです。
（インデックスリストと完全に同じではありませんが、近いと思います）
（インデックスリストと完全に同じではありませんが、近いと思います）
ブロック化されていますので、パネルにある設定で簡単にある程度設定変更できます。
（ショートコードの場合はパラメータで指定する）
（ショートコードの場合はパラメータで指定する）
わいひら reacted
トピックスターター 2024年5月2日 21:14
@mk2_mk2 さん
早々のアドバイスありがとうございます。
確かに、アドバイス頂いたとおり設定するとやや小さめですが前よりはよくなりました。
ただ気づいたのですが、サイドバーのカテゴリからたとえば「畑の様子」をみるとまさにフロントページに表示したいデザインでみえます。
https://tsuruya-farm.com/category/field-condition/
参考までに他の人のトップページでは、このデザインで見えるようになってます。
どうすれば、カテゴリーの時と同じ見え方になるのでしょうか？
2024年5月2日 21:18
まさにフロントページに表示したいデザインでみえます。
これは、「カテゴリーアーカイブページ」です。
Cocoonの標準のデザインです。
（「カテゴリーアーカイブページ」自体は、WordPress標準です）
これとまったく同じカードにするのは、トップページを標準の状態（固定ページを使わない）にして、「Cocoon設定」－「インデックス」もデフォルトの状態にすることかと思います。
新着記事ブロック（ショートコード）をCSSでカスタマイズしても、近い状態にはできるのかもしれないです。
わいひら reacted
2024年5月2日 21:40
例えばですけれど。
- トップページはデフォルトの状態（固定ページは使わない）
- 現在、新着記事上部に書かれている内容は、「カスタムHTML」ウィジェット（「テキスト」ウィジェットでもできそう）に入力して、「インデックスリストトップ」に配置する
上記のようにすれば、ある程度できると思います。
（リスト部分は標準（デフォルト）のトップページのもののまま）
新着記事のリスト上部の内容をお借りして、私のテストサイトに反映した状態は以下です。
但し、デフォルトのトップページ（インデックスリスト：投稿ページ等とはHTML構造が異なる）ですので、見出しのCSSなどは適用されなくなります。
そのため、ご自分でCSSを書く必要はあろうかと思います。
（上記GIFは、投稿・固定ページのような見出しのCSSが適用されていませんので、少し違うように見えます）
上記は「カスタムHTML」ウィジェットに直接HTMLソースを入力したものですけれど。
リスト上部の部分を「パターン」で作成して、そのショートコードを「カスタムHTML」ウィジェットに入れる方法でもできそうな気はします。
（今思いつきましたので、試していません）
「パターン」であれば、ブロックエディタが使えると思いますので、HTMLソースの貼り付けができないという方にも、比較的簡単な気がします。
CSSが適用されないのは同じだと思いますけれど。
わいひら reacted
2024年5月2日 21:59
参考までに他の人のトップページでは、このデザインで見えるようになってます。
どうすれば、カテゴリーの時と同じ見え方になるのでしょうか？
今見てみましたが。
「インデックスリストトップ」にいろいろ入れているみたいですね。
わいひら reacted
トピックスターター 2024年5月2日 21:59
確かに固定ページを外すとやりたかったとおりの表示になりますね
ただし、トップページ（固定ページのコンテンツが消えてしまうのでNG）
ただ、トップページはブログだけではないのでやはり固定ページに同様な見栄えにするには投稿ページを
そのまま固定ページで見えるようにするプログラム →新着記事ブロック（ショートコード）をCSSでカスタマイズ 可能かも？
恐らく今参考にしているサイトもcocoonの固定ページで実現できているのでもう少し調べてみます
2024年5月2日 22:01
cameoさん
先に書いた通り「インデックスリストトップ」を使うことだと思います。
以下の返信の通りです。
https://wp-cocoon.com/community/postid/78876/
参考に貼っていただいた「他の方」はそうなさっています。
恐らく今参考にしているサイトもcocoonの固定ページで実現できているのでもう少し調べてみます
いいえ、固定ページは使用していません。
わいひら reacted
トピックスターター 2024年5月2日 22:22
ネットで調べていたら固定ページに新着記事を載せるやり方（添付ファイル）があったのでやってみましたがなぜか表示できません
固定ページの＋ブロックからショートコードを選択して挿入
[new_list pv=0 count=3 cats=4 type=default]
トピックスターター 2024年5月3日 10:30
mk2さま
私のスキル不足からお手数をおかけしてすいません。
私の理解では、トップページにブログ以外のコンテンツをのせるのは「固定ページ」でないとできないと思い込んでいました。
「設定」の「表示設定」を最新の投稿に変更実施ののち、下記の操作がスキル不足もありよくわからないのでお手数ですが、mk2さんがデモ画面で実施した方法をもう少し具体的にアドバイス頂けると助かります。
・新着記事上部に書かれている内容を「カスタムHTML」ウィジェットを使用して表示する方法？
・ちなみに「カスタマイズ」の「ウィジェット」から「インデックスリストトップ」に「テキスト」を追加すると確かにテキストは挿入出来ました。
- 現在、新着記事上部に書かれている内容は、「カスタムHTML」ウィジェット（「テキスト」ウィジェットでもできそう）に入力して、「インデックスリストトップ」に配置する
PS.
この操作とは関係ないかと思いますが、いろいろ試していたら、ヘッド部分の「メッセージ」と「スライダー」との間に小さいボックスのメニュー表示が挿入されてしまったのですが、どうすれば削除できますか？
トピックスターター 2024年5月3日 13:03
了解しました。
トップページのカスタマイズは改めてそちらの方へ依頼させて頂きます。
ただ下記の不具合についてアドバイス頂けると助かります。
PS.
この操作とは関係ないかと思いますが、いろいろ試していたら、ヘッド部分の「メッセージ」と「スライダー」との間に小さいボックスのメニュー表示が挿入されてしまったのですが、どうすれば削除できますか？
2024年5月3日 13:16
●回答
この操作とは関係ないかと思いますが、いろいろ試していたら、ヘッド部分の「メッセージ」と「スライダー」との間に小さいボックスのメニュー表示が挿入されてしまったのですが、どうすれば削除できますか？
ｈttps://tsuruya-farm.comの事ですよね？
私が既に回答していますが？
[Cocoon設定]→[おすすめカード]→おすすめカードの表示を設定していませんか？
●注意
ｈttps://iwabuchi-vc-farm.com/と、ｈttps://tsuruya-farm.comと、複数サイトを一緒くたに述べており。
どれを指しているのか第三者には分かり難いです。
フォーラムは、対面ではありません。
この為、第三者に伝わるよう、文章を整理し、質問願います。
2024年5月3日 15:17
cameoさん
先に本題と関係ない方から
デモ画面で実施した方法をもう少し具体的にアドバイス頂けると助かります。
具体的に・・・ですか。
正直厳しいですね。
WordPress標準の機能や、Cocoonの機能でもマニュアルページ等に書いてある機能について、1～10まで説明することは、ご容赦ください。
フォーラムのスペース、この形式でのやりとりでは、難しいものもあります。
また、こちらの時間的にも、そこまで手取り足取りということは、難しいこともあります。
もう1点。
まずは、回答を読んでいただきたいです。
今までのやりとりを見ても、読んでいただいていないのでは？という印象を受けます。
具体的に「ここが分からない」と言っていただけば、お答えできる場合もあると思います。
ただ、漠然と説明しろと言われると、厳しいです。
本件とは関係ないついでですけれど。
ネットで調べていたら固定ページに新着記事を載せるやり方（添付ファイル）があったのでやってみましたがなぜか表示できません
固定ページの＋ブロックからショートコードを選択して挿入
[new_list pv=0 count=3 cats=4 type=default]
何故ショートコードを？
上記オプションの内容であれば、「新着記事ブロック」を使えば十分なのではないかと思うのですけれど。
（その方が余計なミスはしませんし、感覚的に操作もできるはずです）
そして、「表示できません」とは具体的に、どういう状態なのでしょう？
まったく何も表示されていないのであれば、文法的に何か間違っている可能性がありそうに思います。
「記事は見つかりませんでした。」と表示されるのであれば、そのオプション指定で表示されるものがなかったということかと思います。
事象については、文章とあわせて画像の添付をいただくと助かります。
（事象がどういうものか詳細にご提示をお願いします。事象については、添付していただいていないように思います。）
そして、ショートコードについて言えば。
- PVというオプションは、新着記事ショートコードにはありません。
（指定しても表示はされますけれど） - cameoさんのサイトでは・・・
IDが「4」のカテゴリーについては存在しない
または、公開された投稿が1件も存在しない
上記のような状態ではないでしょうか。
参考になさったというものにも、記載がありますが、やはり読んでいないか確認をなさっていないのだと思います。
また、調べればすぐに分かることのように私は思います。
新着記事一覧を表示するショートコードの利用方法
https://wp-cocoon.com/new_list/
2024年5月3日 15:26
cameoさん
続きまして、本題ですけれど。
私は、以下のように書きました。
新着記事のリスト上部の内容をお借りして、私のテストサイトに反映した状態は以下です。
上記は「カスタムHTML」ウィジェットに直接HTMLソースを入力したものですけれど。
cameoさんのサイトから、HTMLソースをコピーして、「カスタムHTML」ウィジェットに貼り付けました。
但し、これはcameoさんにとっては、ハードルもあると考え、「パターン」を使うことをご提案させていただきました。
リスト上部の部分を「パターン」で作成して、そのショートコードを「カスタムHTML」ウィジェットに入れる方法でもできそうな気はします。
（今思いつきましたので、試していません）「パターン」であれば、ブロックエディタが使えると思いますので、HTMLソースの貼り付けができないという方にも、比較的簡単な気がします。
CSSが適用されないのは同じだと思いますけれど。
「パターン」は、WordPress標準の機能です。
ブロックエディタが使えますし、固定ページにある内容もコピーできると思います。
WordPress標準の機能ですし、コピペするだけだと思いますので、説明は割愛させていただければと思います。
「パターン」のショートコード化は、Cocoonが拡張したものですが、マニュアルページがございます。
そちらをご確認いただければと思います。
パターン（旧再利用ブロック）を呼び出せるpatternショートコードの使い方
https://wp-cocoon.com/pattern-shortcode/
「パターン」を使った方が、今後のメンテナビリティ的にも良いと考え、ご提案を差し上げました。
「パターン」については、cameoさんは触れられていないようですので、おそらく読んでいただいていない？
（少なくともこちらはそういう印象を受けます、私がごちゃごちゃ書いたのがよろしくないのでしょうね、きっと）
トピックスターター 2024年5月5日 17:44
mk2 さま
こちらの対応が不十分にもかかわらす、アドバイス頂きありがとうございました。
もう一度、十分読み返してアドバイス通りできるように頑張ってみます。
いろいろとお手数をおかけし申し訳ございませんでした。
2024年5月5日 17:49
cameoさん
とりあえず、簡単に言えば・・・。
- 新規に「パターン」（同期型が良いと思います）を作り、固定ページの内容をコピペする
- 「カスタムHTML」ウィジェットを、「インデックスリストトップ」のウィジェットエリアに入れて、「パターン」のショートコードを貼りつける
それだけです。
（ただし、見出しのCSSは当たらなくなると思いますけれど、まずはやってみないと始まらないと思います）
わいひら reacted
トピックスターター 2024年5月6日 16:26
mk2さま
何度となくサポート頂きありがとうございました。
もう一度、アドバイス通りパターンを設置する方法で無事思い通りに対応することが出来ました。
PS.
実はご指摘のとおり、私のスキル不足でmk2の言っているパターン？のありか（外観→Pattems)存在が解ってなく、ウィジェットやブロック追加等で悩んでいました。
これからはもう少しHTML,CSS,PHPの基礎スキルを身に着けカスタマイズ出来るようになっていきたいと思います。
もしも、また不具合等発生した際はお手数ですがアドバイス頂けると幸いです。
わいひら reacted
2024年5月6日 17:02
cameoさん
パターンについては、Cocoonのショートコード化の説明のところに、画像が添付されています。
パターン（旧再利用ブロック）を呼び出せるpatternショートコードの使い方
https://wp-cocoon.com/pattern-shortcode/
そのことから、特に説明がなくても、上記のリンクをご覧いただくことで分かるかなと思っていました。
できたようで何よりです。
「当サイトについて」の部分は、ウィジェットタイトルになさったのですね。
固定ページの時は、見出しh2だったような気はします。
固定ページが残っていて、そちらを見せていただければ、同じようにするCSSもご提示できるかなと思っていました。
（今2～3つほど投稿を確認すると、h2を使っているものがなかったので・・・）
段落もCSSが当たらなくなるみたいですが、複数段落ないみたいですので、このままでも良いのかもですね。
その辺りは、お好みですので、お任せします。
イメージとしては・・・。
最初のトップページは以下ような感じ。
以下のようなものをパターンで作成。
ショートコードでパターンを、「インデックスリストトップ」へ。
CSSが当たっていないので（本文ではないから）、本文と同じCSSが当たるように調整。
こんな感じなんだと思います。
わいひら reacted
2024年5月6日 17:20
cameoさん
ちなみにですが、今回「インデックスリストトップ」に追加したものですが。
トップページだけでなく、各アーカイブページにも表示されます。
（「インデックスリストトップ」とはそういうものです）
例えば、カテゴリーアーカイブページや、月別アーカイブページにも表示されています。
トップページのみに表示させたいなどの場合は、ウィジェットの表示設定で調整してください。
【ご参考】
ウィジェットの表示を制御する方法
https://wp-cocoon.com/display-widgets/
https://wp-cocoon.com/display-widgets/
わいひら reacted
トピックスターター 2024年5月6日 19:35
mk2さま
アドバイス頂いた「Pattems」と「インデックスリストトップ」を使用することである程度のことはできそうなので助かりました
これから先は、カスタマイズになるのでmk2さんのアドバイスを参考にしながら自分自身で
CSS等を使って、以下のような変更をやれるようスキルアップしていきたいと思います。
①「Pattems」と「インデックスリストトップ」で作成したトップページの見出し（H2）へ変更
・当サイトについて ・つるや農園ブログ
②固定ページ（３つ）のタイトルを非表示にしてH2見出しに変更
②H2見出しすべて（サイドメニュー含む）の背景色の変更（グレー→グリーン）統一
丁寧な対応本当にありがとうございました。
2024年5月6日 23:00
cameoさん
とりあえず、このトピックは「解決済」になっていますし、本件も一応はできたということで、これにてクローズさせていただこうと思います。
（クローズ後は、書き込みできなくなります）
①～③については、Cocoon設定である程度できるようなものあるようには思います。
ただ、最終的に細かいところはCSSも必要なのではないかと思われます。
検索いただくと、解説なさっているサイトも多くありますので、参考になさってください。
また、このCocoon公式の情報も、お役立てください。（今回のお問い合わせの中で、いくつかリンクさせていただきました）
フォーラムも検索してみると、過去に同じようなお問い合わせがあるかもしれません。
それでも、分からない場合、新しいトピックを立てていただければと思います。
どこにトピックを立てるかは、説明書きをご確認いただければと思います。
（主な3つしか貼りません・・・）
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。