LingHang ThemeでカスタムCSSコードを追加する方法

quhenet Themeヘルプ

LingHang Themeは、初心者ユーザーが専門的な公式サイトを迅速に構築するのを便利にしますが、一部のデザインはあなた自身の企業の実際のニーズを満たさない場合があります。ある程度のCSSコード修正ができる場合は、カスタムCSSコードでそれらを上書きすることができます。

LingHang ThemeでカスタムCSSコードを追加するには2つの方法があります：

一、ThemeカスタムCSS

操作手順：WordPress Admin Dashboard → 外観 → カスタマイズ → 追加CSS

自分で修正したCSSコードを貼り付けるだけです。

Image
Image

二、Child Themeのインストール

Child Themeダウンロード：linghang-child.zip（インストール方法も同じで、アップロードし、有効化します。）

まずLingHang Child Themeをインストールし、次にWordPressウェブサイトのAdmin Dashboardで、外観、Themeファイルエディター、style.cssファイル内に自分のcssコードを追加し、更新します。

Image

三、カスタムコードデモ

1、サブメニューの幅を調整

修改子菜单宽度

例えば、Themeのナビゲーションメニューのサブメニューの幅を変更したい場合は、以下のコードを追加してみてください：

.primary-menu .sub-menu {
    min-width: 420px !important;
}

2、タイトルエリアの背景画像を追加

この機能はThemeバージョン1.20にすでに統合されており、ページ設定ページで直接操作できます

为标题区域添加背景图片
/* 博客文章页标题背景区域 */
.single-post-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://linghang.quhenet.com/wp-content/uploads/2025/11/slide-3.jpg'); /* 背景图片网址 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3; /* 图片透明度 */
    z-index: 0;
}
 /* 隐藏右侧圆形元素，不需要隐藏则不复制下面代码 */
.single-post-header:before {
     background: none;
}

/* 页面标题背景 */
.page-header-wrapper {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), /* 黑色半透明蒙版 */
        url('https://linghang.quhenet.com/wp-content/uploads/2025/11/slide-3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 删除左右圆形元素 */
.page-header-wrapper::before,
.page-header-wrapper::after {
    display: none;
}

3、スライドショーの背景オーバーレイの透明度を調整

/* 调整hero遮罩透明度，修改0.3的值，越小越透明 */
.hero-overlay {
    background: rgba(19, 30, 74, 0.3) !important;
}

ヒント：オーバーレイを調整しすぎて透明にしすぎると、白い文字が背景と重なって文字が見えにくくなることがあります。

4、画像を全幅表示に設定

Image

デザインによっては、画像全体をウェブページの画面いっぱいに表示させたい場合があります。その場合は、画像を追加した後、画像に追加のCSSクラス„full-image“を指定し、以下のカスタムCSSコードを追加してください。

.full-image {
    max-width: 100%;
}
.full-image img {
    margin: 0 auto;
    width: 100%; /* 图片拉伸到全宽，不添加这一行就是原图最大宽度居中显示 */
}