サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年7月27日 11:13
わいひらさん、こんにちは。Cocoonテーマには、いつも助かっております。
体調のこと拝見し、先日ささやかではございますが、寄付をさせていただきました。
FAQ、とても見やすいデザインでさっそく使っています。
これまでのFAQページは、Qを見出しにして、目次から飛んで見に行くようにしていました。
しかし、リッチスニペットにしたいので、FAQブロックに変更しました。
さて、実際にFAQページを作って項目が並べてみると、ちょっと長くなってしまって。
読者が調べたい項目を少ないスクロールで一覧できるようにしたいです。
具体的には、FAQ項目のトグルです。
Q をトグルスイッチにしてAが出てくると、読者にとってより快適かと思いました。
こちらのページで、すでに別のスキンで対応されていることを知りました。
しかし、もし可能なら 公式でもチェックなどでトグル化できる項目を追加していただけるとありがたいです。
以上、お時間のあるときで構いませんので、ご勘案いただけると嬉しいです。
何より、今後もこの素晴らしいテーマを末永く守っていっていただけると、ありがたいです。
2022年7月28日 20:09
手っ取り早く実装するにはこちら。
まずは子テーマのstyle.cssに以下を貼り付ける。
.faq-question{
cursor: pointer;
background-color: #fdeff2;
position: relative;
padding: 10px;
}
.faq-question::before{
content: "+";
position: absolute;
right: 15px;
opacity: 0.5;
}
.faq-question.active::before{
content: "-";
}
.faq-answer{
display: none;
padding: 0 10px 10px;
}
子テーマのjavascript.jsに以下を貼り付ける。
$(function(){
$('.faq-question').click(function(){
$(this).toggleClass('active');
$(this).next('.faq-answer').slideToggle();
});
});
実際はFAQブロックにはラベル・ボーダー・背景色があるので、うまく整合性を取れる実装にできるかはちょっと検証しみないとわからないかも。
ちょっといろいろ試してみます。
Topic starter
2022年7月28日 20:51
返信、ありがとうございます。
コード例を参考に入れてみました。
自分の環境では、FAQの回答部分のレイアウト幅が60%になっていたので、style.cssで微調整しました。
.faq-answer-content.faq-item-content {
width: 100%;
}
ヒントをいただいたので、自分でもいろいろと試してみます。
お忙しい中、ありがとうございました！
わいひら reacted
2022年8月5日 18:33
FAQブロックにアコーディオンスタイルを追加しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年8月7日 00:59
すみません。
時間がなく、まったく調べていません。
試してみたところ、既存機能に影響が出ているかもしれないです。
アップデート前に、投稿ページに2つ、FAQブロックを編集しておきました。
上は「デフォルト」。
下は「角型ラベル」です。
その後、GitHubのものへバージョンアップしました。
投稿ページを確認すると、両方ともアコーディオンになってしまっているようです。
わいひら reacted
Topic starter
2022年8月7日 04:06
こんにちは。
アコーディオンスタイルの件、ありがとうございます。
後ほど確認してから「解決済み」にしたいと思います！
2022年8月8日 19:06
@mk2_mk2 さん
ご確認いただきありがとうございます！
対応したつもりが必要なCSSセレクタを削除しておりました。
修正版をアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年8月9日 00:50
わいひらさん
ご対応いただき、ありがとうございます。
FAQブロックの「デフォルト」「角型ラベル」「アコーディオン」の表示に問題ないことを確認させていただきました。
完全に疎くて、申し訳ないのですが。
少し疑問に思ってしまった点がありますので、確認させていただいたよろしいでしょうか。
それは「JSON-LD」についてです。
（・・・で良いのかしら。）
投稿ページに、以下のように上から「デフォルト」「角型ラベル」「アコーディオン」を並べました。
「デフォルト」は、色指定なしの状態。
「角型ラベル」は、背景色・文字色を指定。
「アコーディオン」は、以下画像のような指定。
その際の、「JSON-LD」は以下です。
3番目が「アコーディオン」のものですが、divタグの色指定のクラスなどが出てきているように思うのですが、これは問題ないものなのか、確認させていただきたいです。
私は完全に疎いもので、良く分かっておりませんけれど。
よろしくお願い致します。
わいひら reacted
2022年8月9日 06:17
Google検索セントラルには、divタグは使えると書いてありますね。
構造化データを使用して「よくある質問」をマークアップする
https://developers.google.com/search/docs/advanced/structured-data/faqpage?hl=ja
上記を見た感じでは、問題ないような印象をうけます。
「角型ラベル」には出てこなくて、「アコーディオン」には出てくるもので、気になってしまったみたいです。
（条件を変えたり・あわせたりしての確認はしておらず、恐縮なのですが。）
わいひら reacted
2022年8月9日 19:31
ご確認いただきありがとうございます。
確認してみたところ、trip_tagsしないタグにdivを含めていましたが、divは使用できたとしても必要ないですよね。そこまで構造化したHTMLを書くわけでもないですし。
除外してみました。
https://github.com/yhira/cocoon/commit/20febdca46b41660e05c365dc042e030d55fcd92
2022年8月10日 00:46
divは使用できたとしても必要ないですよね。
はい、そう思います。
確認してみました。
何故か、まだdivタグがあるので、変だなと、再確認しました。
親テーマのstrip_tagsからdivタグが外れたのは確認しました。
そもそも、前回の私の確認が甘かったようです。
申し訳ないです。
申し訳ないです。
JSON-LDの長い部分を今一度確認すると、「Answer」部分に、「Question」「Answer」の両方が含まれているようです。（ラベルも）
わいひら reacted
2022年8月10日 12:31
了解です。
ローカル環境で試しているのと、只今出先なもので、夜遅くなると思います。
2022年8月10日 18:56
再度確認しました。
編集画面の右サイドバー？で、色を変更するだけであれば、問題なかったです。
改めて、新しく編集してみたところ…。
私は、質問の見出し色を、ハイライトを使って変えていたようです。
上記の場合に、JSON-LDに「Question」「Answer」の両方がdivタグが含まれてしまうようです。
ソースコードも添付します。
わいひら reacted
2022年8月10日 19:09
更に確認しました。
JSON-LDの件ですが、同様に質問の部分の文字色をハイライトで変更すると「デフォルト」「角型ラベル」でも、同様の事象が発生します。
添付は、「デフォルト」です。
わいひら reacted
2022年8月10日 19:20
もう1点別事象に気づいてしまいました。
FAQ（デフォルト）の「質問ラベル色」が反映されないケースがありました。
「質問ラベル色」だけを指定すると、編集画面・実際のページ表示共に反映されないみたいです。
そして、「ボーダー色」を同時に指定すると、「質問ラベル色」が反映されるみたいです。
すみません、時間切れで、上記以上の確認はしておりません・・・。
（しばらく離席してしまいます）
（しばらく離席してしまいます）
【追記】
書き忘れたので、戻ってきました。
右サイドバー？の色指定で反映されないのは、「デフォルト」の「質問ラベル色」だけだったと思います。
一応他のものも確認しましたが、他は反映されていたと思います。
（ばたばたと確認しており、100%の自信ではないですが）
（ばたばたと確認しており、100%の自信ではないですが）
わいひら reacted
2022年8月11日 00:49
「JSON-LD」「質問ラベル色」とも、解消されていることを確認致しました。
ご対応いただき、ありがとうございます。
＞minami02さん
ご確認いただき、お返事を書いていただけますと幸いです。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。