WordPressテーマ「BusinessPress」でWEBサイトを制作（その１２）追加応用編

「BusinessPress」は国産の無料WordPressテーマです。

＊BusinessPress

GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター（Gutenberg）に完全対応。
レスポンシブデザイン。
コーポレート型（ビジネスサイト）テーマ。

架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その１２」。
今回が本シリーズ最終回です。

前回で、トップページ以外の各固定ページ作成を簡潔に解説しました。
今回は応用編として、CSSにて２つの箇所をカスタマイズします。

ちなみに、いつもの完成例サンプルサイトではCSSのカスタマイズを行ってません。
あくまで今回は応用編です。

1 CSSのカスタマイズ手順
2 トップページ：ファーストビューのカスタマイズ
3 トップページ：よくあるご質問のカスタマイズ
4 本シリーズはここまで

CSSのカスタマイズ手順

まず、CSSのカスタマイズ手順を書いておきます。
具体的には子テーマの「style.css」にコードを追加していきます。

CSSの記述方法は２つあります。
◇サーバ上の「style.css」に直接記述する
◇WP管理画面から記述する

WordPressに不慣れな人は後者の方が良いかもしれません。

後者の場合は、
WP管理画面⇒「外観」⇒「テーマエディター」を開きます。

注意書きが表示されるので、

「理解しました」をクリック。

テーマの編集欄が開きます。

右サイドの「テーマファイル」の中から
必ず「スタイルシート（style.css）」を選択してください。

この時、間違って「functions.php」などに書いてしまうと、後で泣く羽目になるのでご注意ください。

真ん中の記述欄にCSSのコードを追加していきます。
初期状態9行目あたりまではコードが書かれてますが、これは必ず残しておいて、11行目あたりから記述してください。

トップページ：ファーストビューのカスタマイズ

最初にトップページのファーストビューをカスタマイズします。

具体的には
「パソコンに初めて触れるという初心者の方から、
趣味の幅を広げたい方、お仕事で役立てたいという方まで。
幅広い年齢層の方がご利用できるパソコン教室です。」
この文章の改行のカスタマイズです。

この箇所、PCで見ると、

スマホで見ると、

改行（brタグ）が災いして、スマホで見ると格好悪いですね。

ちなみに、この箇所の設定手順自体は「その３」の「ホームページヘッダー」の項目で解説しています。

では、CSSで修正します。

@media (max-width: 768px) {

.home .home-header-text br {
    display:none;
    }
    
}

このコードを入れてください。

画面幅が768px以下の時に、改行が無効化されます。

スマホで見た場合、以下のように変化します。

トップページ：よくあるご質問のカスタマイズ

次に、トップページの「よくあるご質問」をカスタマイズします。
具体的には「Q」と「A」の色を変更します。

ちなみに、ここの設定手順自体は「その８」の「よくあるご質問」の項目で解説しています。

この箇所、色が固定されていて、WordPress管理画面の設定からは変更できません（2020/10/01時点）。
しかし、出来るだけサイトのカラーに合わせたいですよね。

では、CSSで修正します。
「Q」をアクションカラー（#ff6f61）に。
「A」をメインカラー（#00bcd4）に変更します。

/* =====================

  よくあるご質問：QとAの色変更（背景塗りの場合）
　
===================== */

.is-style-vk_faq-bgfill-circle .vk_faq_title::before, .is-style-vk_faq-bgfill-square .vk_faq_title::before, .is-style-vk_faq-bgfill-rounded .vk_faq_title::before {
    background-color: #ff6f61 !important;
}

.is-style-vk_faq-bgfill-circle .vk_faq_content::before, .is-style-vk_faq-bgfill-square .vk_faq_content::before, .is-style-vk_faq-bgfill-rounded .vk_faq_content::before {
    background-color: #00bcd4 !important;
}

このコードを入れてください。

以下のように変化します。

ちなみに、このコードが通用するのは「Q」と「A」のスタイルが、
「背景塗り角丸」
「背景塗り円形」
「背景塗りピン角」
これに設定されている場合のみです。

スタイルが「標準」の場合は、

/* =====================

  よくあるご質問：QとAの色変更（標準の場合）
　
===================== */

.is-style-vk_faq-normal .vk_faq_title::before {
    color: #ff6f61 !important;
}

.is-style-vk_faq-normal .vk_faq_content::before {
    color: #00bcd4 !important;
}

スタイルが「枠線円形」「枠線ピン角」「枠線角丸」の場合は、

/* =====================

  よくあるご質問：QとAの色変更（枠線の場合）
　
===================== */

.is-style-vk_faq-border-circle .vk_faq_title::before, .is-style-vk_faq-border-square .vk_faq_title::before, .is-style-vk_faq-border-rounded .vk_faq_title::before {
    border: 1px solid #ff6f61 !important;
    color: #ff6f61 !important;
}

.is-style-vk_faq-border-circle .vk_faq_content::before, .is-style-vk_faq-border-square .vk_faq_content::before, .is-style-vk_faq-border-rounded .vk_faq_content::before {
    border: 1px solid #00bcd4 !important;
    color: #00bcd4 !important;
}