参考 Lightning 無料版で制作したデモサイト
Lightning をベースにした中小企業様・個人事業主様向けの WordPress サイト開設スターターパック を使って制作したサイトの一例です。
画像をクリックしてサイトをご覧いただけます。
この記事はアフィリエイト広告を利用しています。
2022.5.31 Lightning 14.21.* にアップデートしたときのスクロール時のレイアウトくずれの対策として、CSS に1行追加しました。
2024.10.1 ページヘッダーを透過にする CSS を追記しました。
このサイトで使用しているベクトルの WordPress テーマ Lightning は無料で使うことができて、シンプルでカスタマイズしやすいという特徴を持っています。
ベクトルが開発している以下のプラグインも無料でインストールできて、これらのプラグインを使うと、見やすく高機能なコーポレートサイトを少ない作業工数で構築して、効率よく運営することが可能です。
これだけのことができる製品を無料で提供されているベクトルさんには感謝するしかないですね。
Lightning はわかりやすい初心者向けの解説本が出版されていて、使い方を解説しているサイトや、サイト制作の参考になるサイトがたくさんあります。このサイトもそのひとつになることを目指して開設しました。そしてサポートフォーラム *1 などのサポート面も充実しているので、Lightning を使って制作されているサイトは非常に多く、よく見かけます。
*1 サポートフォーラムに投稿できるのは有料版のユーザーのみ。閲覧は誰でも可。
Lightning をベースにした中小企業様・個人事業主様向けの WordPress サイト開設スターターパック を使って制作したサイトの一例です。
画像をクリックしてサイトをご覧いただけます。
ベクトルは以下の有料版プラグインも販売しています。
この記事を書いている私(対馬 俊彦)はふだんはサイト制作に有料版をメインで使用しています。当然ですが、無料版に比べて高機能で、さらに使いやすくなっています。無料版を使っている方は十分に検討の価値がありますよ。
Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています(個々の単体販売はされていません)。
そんないいことづくめの Lightning ですが、短所としていくつかのサイトで指摘されているのを見かけることがあります。
それは...
ということです。
テーマをカスタマイズしやすくするためには、デザインとレイアウトを標準的でシンプルなものにするのがいいわけで、その結果がこのようになるのは当然とも言えます。
そこで、この記事では Lightning っぽくなく、個性的になるようなカスタマイズのやり方の一例を紹介します。
ヘッダーは最初に目につくので、これが「ひと目で Lightning とわかる」と指摘される部分なのだと思います。
こういうヘッダーを多く見かけます。そして、高い確率でそのサイトで使用されているテーマは Lightning です。
それでは、このヘッダーをカスタマイズしていきましょう。
順を追って説明していきますので、ご自身の Lightning サイトで実際にやってみてください。
メニューに Font Awesome のアイコンと説明を追加してみます。
その結果、こうなります ↓ 。
ここまでやっている Lightning のサイトはわりと多いと感じます。
これだけだとまだ個性的と感じてもらえないと思います。
次に、ページヘッダーの背景画像を設定します。
以下の記事に書いている手順でページヘッダーの背景画像とフォントを設定します。
ここまでやった結果、こうなります ↓ 。
こういう画像があると、個性的に見えてきますね。ちなみに、有料プラグインの Lightning G3 Pro Unit を使うとこの背景画像とフォントのカスタマイズ作業がすごく楽で、スマホの背景画像の設定まで行うことができます。
最後に、個性を決定づける 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;
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 をお使いで、デザインをいじるのにお困りの方はご参考にどうぞ。
以下の 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 向けに書きました。
Lightning テーマ使用
中小企業様、個人事業主様向け
制作費用 | クオリティを落とさずに 価格を抑えたサイトを制作します |
必要十分 | お問い合わせフォーム、新着情報など 必要なものが最初から揃っています |
サポート | 1年間のサポートがついて安心 初めてでもホームページを活用できます |