Lightning っぽくない個性的なヘッダーにするカスタマイズ例

2021年8月6日最終更新日: 2026年4月6日対馬俊彦

対馬俊彦

この記事はアフィリエイト広告を利用しています。

2022.5.31 Lightning 14.21.* にアップデートしたときのスクロール時のレイアウトくずれの対策として、CSS に1行追加しました。

2024.10.1 ページヘッダーを透過にする CSS を追記しました。

2025.12.27 Lightning 15.33.* にアップデートしたときのアイコン位置が左寄せになったことの対策として、CSS に1行追加しました。

Lightning はすばらしい WordPress テーマです

このサイトで使用しているベクトルの WordPress テーマ Lightning は無料で使うことができて、シンプルでカスタマイズしやすいという特徴を持っています。

ベクトルが開発している以下のプラグインも無料でインストールできて、これらのプラグインを使うと、見やすく高機能なコーポレートサイトを少ない作業工数で構築して、効率よく運営することが可能です。

VK All in One Expansion Unit
VK Block Patterns
VK Blocks
VK Filter Search

これだけのことができる製品を無料で提供されているベクトルさんには感謝するしかないですね。

Lightning はわかりやすい初心者向けの解説本が出版されていて、使い方を解説しているサイトや、サイト制作の参考になるサイトがたくさんあります。このサイトもそのひとつになることを目指して開設しました。そしてサポートフォーラム *1 などのサポート面も充実しているので、Lightning を使って制作されているサイトは非常に多く、よく見かけます。

*1 サポートフォーラムに投稿できるのは有料版のユーザーのみ。閲覧は誰でも可。

参考 Lightning 無料版で制作したデモサイト

最終更新日: 2026年4月6日(月)

弊社（魚沼情報サービス）が提供している、Lightning をベースにした中小企業様・個人事業主様向けの WordPress サイト開設スターターパックを使って制作したサイトの一例です。画像をクリックしてサイトをご覧いただけます。

Lightning を使用した弊社制作事例

魚沼情報サービスが制作させていただいたお客様のサイトです

その他のデモサイトはこちら

豊富なカスタマイズの事例を掲載しています

参考有料版もあります

ベクトルは以下の有料版プラグインも販売しています。

Lightning G3 Pro Unit
VK Blocks Pro
VK Filter Search Pro

この記事を書いている私（対馬俊彦）はふだんはサイト制作に有料版をメインで使用しています。当然ですが、無料版に比べて高機能で、さらに使いやすくなっています。無料版を使っている方は十分に検討の価値がありますよ。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。

Vektor Passport の購入はこちら

VK Filter Search Pro の購入はこちら

Lighnting の「短所」と言われていること

そんないいことづくめの Lightning ですが、短所としていくつかのサイトで指摘されているのを見かけることがあります。

それは...

カスタマイズしないと Lightning を使っていることがひと目でわかる
使っているサイトが多く、デザインがシンプルなので、没個性という印象を持たれてしまう可能性がある

ということです。

テーマをカスタマイズしやすくするためには、デザインとレイアウトを標準的でシンプルなものにするのがいいわけで、その結果がこのようになるのは当然とも言えます。

そこで、この記事では Lightning っぽくなく、個性的になるようなカスタマイズのやり方の一例を紹介します。

最大のポイントはヘッダーのカスタマイズ

ヘッダーは最初に目につくので、これが「ひと目で Lightning とわかる」と指摘される部分なのだと思います。

こういうヘッダーを多く見かけます。そして、高い確率でそのサイトで使用されているテーマは Lightning です。

それでは、このヘッダーをカスタマイズしていきましょう。

順を追って説明していきますので、ご自身の Lightning サイトで実際にやってみてください。

手順① メニューをカスタマイズする

メニューに Font Awesome のアイコンと説明を追加してみます。

Font Awesome のアイコンを追加する手順

説明の入力欄を追加する手順

その結果、こうなります ↓ 。

ここまでやっている Lightning のサイトはわりと多いと感じます。

これだけだとまだ個性的と感じてもらえないと思います。

次に、ページヘッダーの背景画像を設定します。

手順② ページヘッダーをカスタマイズする

以下の記事に書いている手順でページヘッダーの背景画像とフォントを設定します。

ここまでやった結果、こうなります ↓ 。

こういう画像があると、個性的に見えてきますね。ちなみに、有料プラグインの Lightning G3 Pro Unit を使うとこの背景画像とフォントのカスタマイズ作業がすごく楽で、スマホの背景画像の設定まで行うことができます。

最後に、個性を決定づける CSS によるカスタマイズをしてみます。

手順③ CSS を追加

以下の CSS を追加します。

@media (min-width: 992px) {

/* アイコンの下にメニューの文字を配置する（スクロールしていないとき） */
body:not(.header_scrolled) .global-nav-list>li .global-nav-name {
display: flex;
flex-direction: column;
align-items: center; /* 2025.12.27 Lightning 15.33 にアップデートしたときのアイコン位置が左寄せになったことの対策として追加 */
}

/* アイコンのスタイル（スクロールしていないとき） */
body:not(.header_scrolled) .global-nav-list>li .global-nav-name i {
font-size: 1.5em;
margin-right: 0;
margin-bottom: 0.5em;
color: var(--vk-color-primary);
}

/* 個々のメニュー枠のスタイル（スクロールしていないとき） */
body:not(.header_scrolled) .vk-menu-acc li {
width: 100px;
margin-left: -1px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}

/* 最後のメニュー項目だけ白抜き文字にする */
.vk-menu-acc li:last-child {
background-color: var(--vk-color-primary);
}
body:not(.header_scrolled) .global-nav-list>li:last-child .global-nav-name i,
.global-nav-list>li:last-child .global-nav-name i {
color: #fff;
}
.nav li:last-child a, nav li:last-child a {
color: #fff;
}

body:not(.header_scrolled) .global-nav--layout--float-right {
align-items: unset;
}

.header_scrolled .global-nav--layout--float-right {
width: 100%;
}

.header_scrolled .global-nav-list {
display: block;
width: unset; /* 2022.5.31 Lightning 14.21 にアップデートしたときのスクロール時のレイアウトくずれの対策として追加 */
}

/* 最後のメニュー項目だけ右端に配置（スクロール時） */
.header_scrolled .vk-menu-acc li:last-child {
float: right;
}

/* 2023.3.5 追加 - デフォルトの width: 100vw のままだとヘッダー幅がコンテナ幅に一致しない */
.header_scrolled .site-header {
    width: 100%;
}


}

CSS の中味についての詳しい説明は割愛させていただきます。とりあえず、コピペしてみてください。

2021/11/29 かんたんな説明をコメントで書きました。

最後のメニュー項目だけ白抜き文字にしてあり、スクロール時に単独で右端に配置されますので (下図参照)、お問合せ・資料請求・参加申込みのようなアクションを起こしてもらうタイプのメニュー項目にすると効果的です。

カスタマイズが完成したヘッダーがこちらです ↓ 。

スクロール時にはこのように ↓ 表示されます。

この投稿はカスタマイズが完成した状態になって表示されています。

ここまでやれば、もうひと目では Lightning とはわかりませんね。

Lightning をお使いで、デザインをいじるのにお困りの方はご参考にどうぞ。

WordPress / Lightning
のカスタマイズを承ります

ベクトル公式テクニカルパートナー
があなたをお手伝いします

弊社 (魚沼情報サービス) ではこのサイトで紹介しているようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

ご依頼・お問い合わせはこちら

2024.10.1 追記ページヘッダーを透過にするには

以下の CSS を追加するとページヘッダーを透過にすることができますので、さらに個性的になります😊

body #site-header {
    background-color: rgba(255,255,255,0.8);
}

body.header_scrolled #site-header {
    background-color: rgba(255,255,255,0.9);
}

body:not(.header_scrolled) #site-header {
    position: absolute;
}

body .page-header {
    min-height: min(360px, 50vw);
    padding-top: 80px;
}

/* スクロールしてグローバルナビがページ上部に固定表示されるタイミングでカックンとなることを防ぐ。 */
body .page-header {
    margin-top: 0 !important;
}

上記の CSS を記述して、この記事のページヘッダーを透過にしてあります。[2024年10月1日時点]

2022.2.26 「ぽくない」シリーズの記事を Lightning Pro 向けに書きました。

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら