「BusinessPress」は国産の無料WordPressテーマです。
GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター(Gutenberg)に完全対応。
レスポンシブデザイン。
コーポレート型(ビジネスサイト)テーマ。
架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その12」。
今回が本シリーズ最終回です。
前回で、トップページ以外の各固定ページ作成を簡潔に解説しました。
今回は応用編として、CSSにて2つの箇所をカスタマイズします。
ちなみに、いつもの完成例サンプルサイトではCSSのカスタマイズを行ってません。
あくまで今回は応用編です。
~ 目次 ~
- CSSのカスタマイズ手順
- トップページ:ファーストビューのカスタマイズ
- トップページ:よくあるご質問のカスタマイズ
- 本シリーズはここまで
CSSのカスタマイズ手順
まず、CSSのカスタマイズ手順を書いておきます。
具体的には子テーマの「style.css」にコードを追加していきます。
CSSの記述方法は2つあります。
◇サーバ上の「style.css」に直接記述する
◇WP管理画面から記述する
WordPressに不慣れな人は後者の方が良いかもしれません。
後者の場合は、
WP管理画面⇒「外観」⇒「テーマエディター」を開きます。

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

「理解しました」をクリック。
テーマの編集欄が開きます。

右サイドの「テーマファイル」の中から
必ず「スタイルシート(style.css)」を選択してください。
この時、間違って「functions.php」などに書いてしまうと、後で泣く羽目になるのでご注意ください。
真ん中の記述欄にCSSのコードを追加していきます。
初期状態9行目あたりまではコードが書かれてますが、これは必ず残しておいて、11行目あたりから記述してください。
トップページ:ファーストビューのカスタマイズ
最初にトップページのファーストビューをカスタマイズします。
具体的には
「パソコンに初めて触れるという初心者の方から、
趣味の幅を広げたい方、お仕事で役立てたいという方まで。
幅広い年齢層の方がご利用できるパソコン教室です。」
この文章の改行のカスタマイズです。
この箇所、PCで見ると、

スマホで見ると、

改行(brタグ)が災いして、スマホで見ると格好悪いですね。
ちなみに、この箇所の設定手順自体は「その3」の「ホームページヘッダー」の項目で解説しています。
では、CSSで修正します。
@media (max-width: 768px) { .home .home-header-text br { display:none; } }
このコードを入れてください。
画面幅が768px以下の時に、改行が無効化されます。
スマホで見た場合、以下のように変化します。

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

ちなみに、ここの設定手順自体は「その8」の「よくあるご質問」の項目で解説しています。
この箇所、色が固定されていて、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; }
このコードで修正します。
本シリーズはここまで
今回の「その12」で本シリーズは終了です。
いやあ長かったですね(^_^;)
最後まで読んでいただき、ありがとうございました!
