LightningをカスタマイザーとCSSでカスタマイズする方法｜WordPressテーマ解説
目次
WordPressの人気テーマ「Lightning」のカスタマイズ方法を解説。標準のカスタマイザー機能の使い方から、CSSによるデザイン調整、プラグイン「VK All in One Expansion Unit」の活用術まで、初心者にも分かりやすく紹介します。
WordPressのカスタマイザー機能を使う
Lightningは「無料で始められる手軽さ」と「ビジネス利用に十分な機能が標準で備わっている点」、そして「国産テーマならではの安心感とサポート体制」が大きな魅力となっています。
企業サイトや店舗サイトに必須の「お知らせ」「CTA（Call To Action）」「固定ページPR」「FAQ」といった機能が、プラグインなしで利用できます（無料版でも一部利用可能）
これは最も手軽で基本的なカスタマイズ方法です。WordPressの管理画面から「外観」→「カスタマイズ」を選択すると、リアルタイムで変更を確認しながら設定できます。
- サイト基本情報: サイトのタイトル、キャッチフレーズ、サイトアイコン（ファビコン）の設定。
- ヘッダー: ヘッダーのレイアウト、ロゴ画像、ヘッダー背景色の変更。
- デザイン設定 (Pro版): メインカラー、背景色、フォント、見出しのデザインなど。
- フッター: フッターのテキストやレイアウトの変更。
- メニュー: ナビゲーションメニューの作成と配置。
- ウィジェット: サイドバーやフッターに表示するコンテンツの追加・編集。
2. Lightning G3 Pro Unit プラグインを利用する
Lightningの機能をさらに拡張したい場合は、公式の有料プラグイン「Lightning G3 Pro Unit」が非常に便利です。これを入れることで、さらに詳細なデザイン設定や機能が追加されます。
- 豊富なデザインパターン: サイト全体の色使いやレイアウトの選択肢が増えます。
- セクションビルダー: トップページや固定ページに、様々なコンテンツブロック（セクション）を簡単に追加・編集できます。
- CTA（Call To Action）設定: お問い合わせや資料請求を促すボタンなどを設置しやすくなります。
- 投稿ページのレイアウト: 記事ページの表示形式を細かく設定できます。
3. ブロックエディタ（Gutenberg）でコンテンツを作成・編集する
Lightningはブロックエディタ（Gutenberg）との相性も良く、これを使ってコンテンツを作成することで、柔軟なレイアウトが可能です。
- コアブロック: 段落、見出し、画像、リストなど基本的なブロック。
- Lightning独自のブロック（Pro版）: よりデザイン性の高いカラムブロックや、特定の情報を表示するブロックなどが追加されます。
4. CSSを追記してカスタマイズする
より細かなデザイン調整を行いたい場合は、CSS（Cascading Style Sheets）を直接追記する方法があります。
- 「カスタマイズ」→「追加CSS」: ここにCSSコードを記述すると、テーマのアップデートに影響されずに変更を適用できます。
- 子テーマの利用: より大規模なCSS変更や、PHPコードの追加が必要な場合は、子テーマを作成し、その中の
style.cssに記述するのが一般的です。これにより、親テーマのアップデート時にカスタマイズが上書きされるのを防げます。
5. フック（Hook）やフィルター（Filter）を利用する（上級者向け）
PHPの知識が必要になりますが、Lightningが提供するフックやフィルターを利用することで、テーマの特定の動作や表示を制御できます。これは、子テーマのfunctions.phpに記述することが多いです。
Lightningとは
主な特徴
- ビジネス向けテーマ：特に企業やビジネスでの利用を想定して開発されており、ホームページやブログが簡単に作成できるように設計されています。
- 日本製・公式ディレクトリ登録：日本語に対応しており、WordPressの公式テーマとして登録されているため、セキュリティ面でも信頼性が高く、管理画面から簡単にインストールできます。
- ノーコードで簡単作成：Web制作のスキルがない方でも、ブロックエディタ（Gutenberg）に対応しており、視覚的な操作でサイトを構築しやすいのが特徴です。
- 無料版と有料版：基本テーマは無料で提供されています。さらに高機能なサイトを作成したい場合は、有料ライセンスの「Vektor Passport（ベクトル パスポート）」を購入することで、拡張機能プラグイン（例：Lightning G3 Pro Unit、VK Blocks Proなど）を利用し、機能を強化できます。
- 高い実績：有効インストール数が10万件以上（2025年4月時点）と多く、多くのユーザーに利用されています。
- GPLライセンス：100%GPLライセンスのため、商用利用や複数のホームページでの利用が自由に行えます。
利用数
公式サイトやWordPress.orgのテーマディレクトリの情報によると、Lightningの有効インストール数は100,000件以上となっています（2024年10月時点の情報を含みます）。
- 有効インストール数： 100,000+ 件
- 特徴： 国内開発のテーマで、企業サイトやブログなど幅広く利用されており、信頼性と実績の高いテーマの一つです。WordPress公式テーマに登録されています。
利用料
WordPressテーマのLightningは、基本的に無料で利用できます。
ただし、より高度な機能やデザイン、サポートが必要な場合は、有料ライセンスの「Vektor Passport」を購入することになります。
| 種類 | 価格 | 特徴 |
| 無料版 | 0円 | WordPress公式ディレクトリに登録されている基本テーマ。ダウンロードや利用に料金はかかりません。 |
| 有料ライセンス （Vektor Passport） | 1年: 11,000円（税込） 3年: 29,700円（税込） 5年: 44,000円（税込） | 有料プラグイン（Lightning G3 Pro Unit、VK Blocks Proなど）の利用、テーマやプラグインのアップデート、サポートフォーラムでの質問などが可能になります。 |
Lightningのカスタマイザー
「Lightning」のカスタマイザーは、WordPressの管理画面からテーマの外観や機能を細かく設定できる非常に便利な機能です。
カスタマイザーへのアクセス方法
WordPressの管理画面にログイン後、以下のいずれかの方法でカスタマイザーを開くことができます。
- 「外観」 -> 「カスタマイズ」 をクリックする。
- サイトを表示している状態で、画面上部の管理バーにある 「カスタマイズ」 をクリックする。
Lightningテーマのカスタマイザーで設定できる主な項目
Lightningテーマのカスタマイザーには、ウェブサイトを構築する上で重要となる様々な設定項目が用意されています。代表的なものをいくつかご紹介します。
- サイト基本情報:
- サイトのタイトルやキャッチフレーズの設定
- サイトアイコン（ファビコン）の設定
- 色:
- 背景色: サイト全体の背景色を設定します。
- キーカラー: サイトのメインカラーを設定します。グローバルナビゲーションのサブメニューの背景色、ボタン、見出しなどに反映されます。
- カスタムカラー: アクセントカラーや部分的に使用する色を最大5色まで設定できます。コンテンツ作成時によく使う色を登録しておくと便利です。
- Lightning デザイン設定:
- レイアウト設定:
- PC閲覧時のカラム数（1カラム、2カラムなど）を設定できます。トップページ、個別投稿ページなど、ページごとに設定が可能です。
- サイドバーの表示位置（右、左）や固定表示の有無を設定できます。
- デザインスキン: デフォルトの「OriginⅢ」の他に、装飾を極力減らした「Plain」スキンなどがあります。独自のデザインをCSSで記述したい場合に「Plain」を選択すると、既存の装飾を打ち消す手間が省けます。
- レイアウト設定:
- Lightning トップページスライドショー:
- トップページに表示されるスライドショーの画像、スライドのタイトル、エフェクト（slide、fade）、切り替え間隔などを設定できます。
- スライドショーの表示・非表示もここで設定可能です。
- Lightning トップページPRブロック:
- トップページにPRしたいコンテンツを最大3つまで表示できるPRエリアの設定です。
- 表示するテキストやアイコンなどを編集できます。
- メニュー:
- グローバルナビゲーションなどのメニューの作成や編集を行います。
- ウィジェット:
- サイドバーやフッターなど、ウィジェットエリアに表示するコンテンツ（プロフィール、お問い合わせボタンなど）を設定します。
- 追加CSS:
- テーマのCSSを直接編集せずに、独自のCSSコードを追加できる機能です。テーマのアップデート時にも追加したCSSが上書きされる心配がありません。
- Lightning 機能設定（Pro版など）:
- Pro版や拡張プラグインを導入している場合、さらに詳細な設定項目が追加されることがあります。例えば、アクションフックの場所を可視化する機能などがあります。
Lightningテーマカスタマイザー活用のポイント
- リアルタイムプレビュー: カスタマイザーは変更内容がリアルタイムでプレビューされるため、デザインを確認しながら作業を進めることができます。
- 「公開」で保存: 変更した内容は、「公開」ボタンをクリックすることで初めてサイトに反映されます。
- 子テーマの活用: CSSなどでより高度なカスタマイズを行う場合は、親テーマのアップデートの影響を受けないように「子テーマ」を作成し、子テーマ側でカスタマイズを行うことが推奨されています。
- 公式ドキュメントやフォーラム: Lightningテーマの公式サイトやフォーラムには、さらに詳しい設定方法やトラブルシューティングに関する情報が掲載されていますので、参考にすると良いでしょう。
Lightningテーマのカスタマイザーは非常に多機能であり、これらの設定項目を適切に利用することで、コーディングの知識がなくてもプロフェッショナルなウェブサイトを構築することが可能です。
プラグインVK All in One Expansion Unit でカスタマイズ
VK All in One Expansion Unit（以下、VKユニット）は、Lightningテーマの機能を大幅に拡張し、より詳細なデザインや機能のカスタマイズを可能にする強力なプラグインです。
具体的なカスタマイズ内容によってアプローチが変わってきますので、まずはどのようなカスタマイズをご希望されているか教えていただけますでしょうか？
例えば、以下のような内容が考えられます。
- デザイン関連のカスタマイズ
- サイト全体の配色やフォントの変更
- ヘッダーやフッターのデザイン調整
- ブログ投稿ページや固定ページのデザイン変更
- トップページのスライダーやコンテンツエリアのレイアウト調整
- ボタンや見出しのデザイン変更
- 機能関連のカスタマイズ
- 問い合わせフォームの設置
- SNS連携機能の強化
- アクセス解析ツールの連携
- 投稿の表示形式（新着記事一覧、人気記事一覧など）の調整
- 広告表示位置の指定
VKユニットでカスタマイズできる主な項目
VKユニットには、WordPressの管理画面の「外観」>「カスタマイズ」内に様々な設定項目が追加されます。主なセクションとしては、以下のようなものがあります。
- デザイン設定: 色、フォント、背景画像などの基本的なデザイン設定。
- ヘッダー設定: ヘッダーのレイアウト、ロゴ、グローバルナビゲーションなど。
- フッター設定: フッターのコンテンツ、著作権表示など。
- メインビジュアル設定: トップページのスライダーや静止画の設定。
- レイアウト設定: 各ページのサイドバーの有無や位置など。
- Lightningデザイン設定: Lightningテーマ独自のコンポーネント（セクション、見出しなど）のデザイン設定。
- 高度な設定: カスタムCSSの追加など。
カスタマイズの注意点
WordPressテーマ「Lightning」は、シンプルで多機能なため、多くのユーザーに利用されています。しかし、カスタマイズを行う際にはいくつかの注意点があります。
1. 子テーマの利用を強く推奨
これが最も重要な注意点です。
- 親テーマの直接編集は避ける: Lightningを含むWordPressテーマは定期的にアップデートされます。親テーマのファイルを直接編集してしまうと、アップデート時にその変更が上書きされてしまい、カスタマイズ内容が消えてしまいます。
- 子テーマとは: 親テーマのデザインや機能を継承しつつ、独自のカスタマイズを安全に行うためのものです。子テーマで変更した内容は親テーマのアップデートには影響されません。
- 子テーマでのカスタマイズ方法:
- style.css: 主にデザイン（CSS）の変更に利用します。ここにCSSを記述することで、親テーマのスタイルを上書きしたり、新しいスタイルを追加したりできます。
- functions.php: 機能の追加や変更を行う際に利用します。
- テンプレートファイル: 親テーマの特定のテンプレートファイル（例:
header.php,single.phpなど）をカスタマイズしたい場合は、そのファイルを子テーマにコピーして編集します。
2. 「追加CSS」の活用
簡単なCSSの変更であれば、子テーマの style.css を直接編集するよりも、「外観」>「カスタマイズ」>「追加CSS」に記述する方法が便利です。
- メリット:
- FTPソフトを使わずにWordPress管理画面から直接CSSを記述できる。
- テーマのアップデートの影響を受けない。
- プレビュー画面でリアルタイムに確認できる。
- 注意点: 大量のCSSを記述すると管理が複雑になる可能性があるため、複雑なカスタマイズの場合は子テーマの
style.cssの方が適しています。
3. 「VK All in One Expansion Unit」プラグインの活用
Lightningは「VK All in One Expansion Unit」という公式プラグインと連携することで、さらに多くのカスタマイズオプションが提供されます。
- このプラグインの設定項目で、CSSを記述できる場所もあります。
4. 「Lightning Pro」と無料版の違い
無料版のLightningでも十分な機能がありますが、より高度なデザインや機能、サポートを求める場合は有料版の「Lightning Pro」へのアップグレードが必要です。
- 無料版ではコピーライトの変更が制限されるなど、一部機能に制約があります。
- Lightning Proにアップグレードする際も、既存のテーマ設定やカスタマイズが引き継がれるように、正しい手順を踏むことが重要です。
5. デザインの差別化
Lightningは人気テーマのため、他のサイトと似たようなデザインになりやすいというデメリットがあります。
- 独自性を出すためには、CSSを駆使した細かなデザイン調整や、ブロックエディタ（Gutenberg）を最大限に活用したレイアウトの工夫が必要です。
- 「Plain」スキンを選択することで、独自のCSSでデザインしやすいよう、不要なCSSが省かれているため、より自由なデザインが可能です。
6. バックアップの習慣化
カスタマイズを行う前には、必ずサイト全体のバックアップを取ることを強く推奨します。万が一、カスタマイズに失敗しても元の状態に戻すことができます。
まとめ
Lightningのカスタマイズは、基本的に「子テーマの利用」と「追加CSSの活用」を軸に進めることで、安全かつ効率的に行うことができます。これらの注意点を意識して、目的に合ったサイトを構築してください。
