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