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

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

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

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

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

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

参考:有料版もあります

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

  • Lightning G3 Pro Unit
  • VK Blocks Pro
  • VK Filter Search Pro

投稿者は有料版をメインで使用していますが、無料版に比べて高機能でさらに使いやすくなっています。無料版を使っている方は十分に検討の価値がありますよ。

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

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

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

それは...

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

ということです。

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

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

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

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

カスタマイズしていない Lightning のヘッダー

たしかに、こういうサイトは多く見かけますよね。それでは、このヘッダーをカスタマイズしていきましょう。

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

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

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

メニューに Font Awesome のアイコンと説明を追加

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

メニューにアイコンと説明を追加した

ここまでやっている Lightning のサイトはわりと多いので、これだけだとまだ個性的と感じてもらえないですね。

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

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

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

無料版 Lightning でページヘッダーのカスタマイズ(背景画像・フォント)

CSS を書いたり、アクションフック、フィルターフックや jQuery などを駆使すれば、無料版でもたいていのことはできます。

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

ページヘッダーの背景画像とフォントを設定した状態

こういう画像があると、個性的になってきますね。ちなみに、有料版の 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;
}

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;
}

.header_scrolled .vk-menu-acc li:last-child {
float: right;
}

}

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

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

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

カスタマいっずが完成したヘッダー

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

スクロール時のヘッダー表示
スクロール時のヘッダー表示

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

ここまでやれば、もうひと目では Lightning とはわかりませんね。(もちろん、ヘッダーロゴを除いて (^^♪ )

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

関連記事

Lightning っぽくないソーシャルボタンにするカスタマイズ例

デザインだけじゃなくて、ボタンの並び順も変えている芸が細かいところにも注目してください。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズは全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

» ご相談・お問い合わせはこちらからどうぞ