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

ワードプレステーマ別

TCDテーマBeauty:ヘッダーとグローバルメニューに背景画像を挿入、ヘッダーの高さを変更、グローバルメニューに背景画像を挿入する方法

WordPressテーマ「NULL」

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

ダウンロード

Q.ヘッダーとグローバルメニューについて教えて下さい。

ヘッダーに背景画像を挿入したり、ヘッダーの高さを変更するにはどうしたら良いでしょうか?
またグローバルメニューに背景画像を挿入するにはどうしたらいいでしょうか?

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

外観>TCDテーマオプション>基本設定
にある「カスタムCSS」にて、
下記内容をご記述頂くことで、実現可能です。

/* ヘッダー全体 */
.l-header {
  background-image: url("画像のURL");
  height: 300px;
}

/* ロゴなどの領域 */
.l-header__inner {
  height: 140px;
}

/* グローバルメニュー全体 */
.p-global-nav {
  margin-top: 93px;
  background-image: url("画像のURL")
}

/* グローバルメニューの項目 */
#js-global-nav > ul > li > a {
  background-image: url("画像のURL")
  font-family: "メイリオ";
}

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

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

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