LingHangテーマにカスタムCSSコードを追加する方法

quhenet テーマヘルプ

LingHang テーマは初心者ユーザーが簡単にプロフェッショナルな公式サイトを構築できるようにしていますが、デザインが自社の実際のニーズに合わない場合もあります。CSSコードの修正ができるのであれば、カスタムCSSコードで上書きすることができます。

LingHang テーマにカスタムCSSコードを追加する方法は2つあります。

一、テーマカスタマイザーでのCSS

操作手順：WordPress管理画面 → 外観 → カスタマイズ → 追加CSS

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

Image
Image

二、子テーマのインストール

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

まずLingHang 子テーマをインストールし、次にWordPressサイト管理画面の外観、テーマファイルエディター、style.cssファイルに自分のCSSコードを追加して更新します。

Image

三、カスタムコードのデモ

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

修改子菜单宽度

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

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

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

この機能はテーマバージョン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%; /* 图片拉伸到全宽，不添加这一行就是原图最大宽度居中显示 */
}