設定方法で気を付けるポイントは？

スタイルに「アコーディオン」を指定してください。

【Cocoon】FAQブロック(よくある質問)の使い方とカスタマイズ

こんにちは、yuji（@yujiblog）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

CocoonのFAQブロックをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、FAQブロックは以下のようなデザインにしています。

Q FAQブロックのカスタマイズはできますか？: A

はい、できます。

このようにブログ内で統一性のあるデザインにすることで、読者にとって読みやすく、良い印象を与えることができます。

この記事では、以上のようなCocoonのFAQブロックを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2024年】おすすめWordPressテーマ15選【初心者向けランキング】

目次をチェック

FAQブロックの使い方
- FAQブロックの基本的な使い方
- スタイルシートにコードをコピペする
「カスタマイズが上手くいかない…」と感じる方へ
- 多くの人に読まれる記事を書こう
- アフィリエイト神ツールを使いこなそう

FAQブロックの使い方

CocoonのFAQブロックは、ブロックエディタ限定の機能となっています。

FAQブロックの使い方は、次の通りです。

FAQブロックの基本的な使い方

１．ブロックエディタで「FAQ」と検索すると、FAQブロックが表示されます。

２．シンプルなデザインのFAQに、以下のように質問と回答を入力できます。

３．デザインの変更も可能で、右側メニューから質問ラベルや色・枠などを選べます。

４．このように、標準機能でも以下のようなデザインが簡単に作れました。

以上が、FAQブロックの基本的な使い方です。

そして、当ブログでは以下で紹介するオリジナルのカスタマイズを利用しています。

スタイルシートにコードをコピペする

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (style.css)」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

編集前に必ずスタイルシートのバックアップを取る
編集するテーマが「CocoonChild」になっていることを確かめる
「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく

/************************************
****　FAQ　角型ラベル
************************************/
.is-style-square {
    background-color: #f7f7f7;/*背景色の変更はこちら*/
}
.is-style-square div.faq-question-label.faq-item-label{
    background-color: #D55656;
    font-size: 16px;
    padding: 3px 8px;
    border-radius: 10%;
    font-weight: bold;
}
.is-style-square div.faq-answer-label.faq-item-label{
    background-color: #6599B7;
    font-size: 16px;
    padding: 3px 8px;
    border-radius: 10%;
    font-weight: bold;
}

３．コピペができたら「ファイルを更新」をクリックします。

４．FAQブロック作成時は、スタイルに「角型ラベル」を指定してください。

５．以下のように表示されていればOKです。

Q 設定方法で気を付けるポイントは？: A

スタイルに「角型ラベル」を指定してください。

６．続いて「アコーディオン」のカスタマイズです。

/************************************
****　FAQ　アコーディオン
************************************/
.is-style-accordion div.faq-question-label.faq-item-label{
color: #D55656;
font-size: 18px;
padding: 3px 8px;
margin-right: 0.4em;
border-radius: 10%;
font-weight: bold;
}
.is-style-accordion div.faq-answer-label.faq-item-label{
color: #6599B7;
font-size: 18px;
padding: 3px 8px;
border-radius: 10%;
font-weight: bold;
}
.is-style-accordion .faq-question {
background-color: #f0f0f0;
padding: 1em 2em 1em 1em;
margin: -25px 0px;
}
.is-style-accordion .faq-answer {
padding: 1em;
margin-top: 30px;
}
.is-style-accordion .faq-question-content.faq-item-content {
color: #337AB7;
}
.is-style-accordion .faq-question::before {
font-weight: 700;
}
@media screen and (max-width: 390px){
.is-style-accordion div.faq-question-label.faq-item-label{
margin-right: 0.3em;
}
.is-style-accordion .faq-question {
padding-left: .5em;
}}
.faq p,.faq .wp-block-image{
margin-bottom:0;
}