ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

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

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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名やクラス名の確認方法は以下の記事をご参照ください。
超初心者向け!クロームのデベロッパーツールの基本操作

この記事は役に立ちましたか?

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

同じテーマのカスタマイズ記事