WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマBIRTH:固定ページヘッダー上の四角(メニュー名が入っている部分)の白背景を半透明・透明にする方法

2021/9/24 記事を更新しました。

Q.固定ページのヘッダー部分に表示される四角(メニュー名が入っている部分)の白背景を半透明、または透明(無し)にしたいです。

 
▼変更箇所イメージ
変更箇所イメージ

A.下記の方法でご対応ください。

以下の記述を当該固定ページ編集画面のカスタムCSSに入力し、表示をご確認ください。

/*背景色を半透明にする場合*/
#page_header .square_headline { background: rgba(255,255,255,〇); }
/* 背景色を無し(透明)にする場合 */
#page_header .square_headline { background: none; }

※〇を変更することで透明度を変更頂けます。0が透明、1が不透明です。

 

補足)各カスタム投稿のアーカイブページで同箇所を変更したい場合
各カスタム投稿のアーカイブページには、当該ページの編集画面がございません。
その場合、外観>TCDテーマオプション>基本設定のカスタムCSSに入力頂くということになりますが、上記記述をそのまま入力すると、すべてのページの同箇所に反映されてしまいます。
 
反映させたくないページがある場合や、ページごとに設定したいという場合は、bodyタグに付与されるクラス名を記述に加えて適用範囲を変更してください。
(例:カスタム投稿「診療科目」アーカイブでは「post-type-archive-course」というクラスがbodyタグに付与されています。)
 
ID名やクラス名の確認方法は以下の記事をご参照ください。
超初心者向け!クロームのデベロッパーツールの基本操作

BIRTHデモ

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施をお願いいたします。

またカスタマイズ内容は、バージョンにより異なる場合がございますこと予めご理解賜りますようお願いいたします。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。