Lightningをカスタマイザーとcssでカスタマイズ – WordPressテーマ

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の管理画面にログイン後、以下のいずれかの方法でカスタマイザーを開くことができます。

1. 「外観」 -> 「カスタマイズ」 をクリックする。
2. サイトを表示している状態で、画面上部の管理バーにある 「カスタマイズ」 をクリックする。

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など）をカスタマイズしたい場合は、そのファイルを子テーマにコピーして編集します。
  Lightningの子テーマの作成方法は、Vektor, Inc.の公式サイトや多くのブログで紹介されています。ダウンロードできるサンプル子テーマを利用するとスムーズです。

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の活用」を軸に進めることで、安全かつ効率的に行うことができます。これらの注意点を意識して、目的に合ったサイトを構築してください。

WordPressをカスタマイズする方法

WordPressをカスタマイズする主な方法と、それぞれの概要、難易度をまとめた表を作成しました。WordPressのカスタマイズは、目的や技術的なスキルレベルに応じて様々なアプローチがあります。

方法	概要	主な目的	難易度
テーマの変更	デザインの基本構造、レイアウトを一新します。無料・有料のものが多数あります。	デザイン、全体的な機能の変更	低〜中
テーマカスタマイザー	WordPress標準機能で、テーマの色、フォント、ヘッダー画像などをコードを書かずに変更します。	見た目の微調整、ロゴやウィジェットの設定	低
プラグインの導入	既存のWordPressにない機能（お問い合わせフォーム、SEO対策、セキュリティ強化など）を追加します。	機能の追加・拡張	低〜中
CSSの追加	テーマの見た目（色、サイズ、配置など）を細かく調整するために、カスタムCSSを追記します。	デザインの微調整	中
子テーマの使用と編集	親テーマを直接編集せず、子テーマを作成し、その中のファイル（functions.php やテンプレートファイルなど）を編集して機能を変更・追加します。	機能やレイアウトの変更（テーマのアップデートに備える）	中〜高
テーマファイルの直接編集	親テーマのファイル（header.php, index.php など）を直接編集します。	機能やレイアウトの根本的な変更	高
カスタムテーマ・プラグイン開発	既存のものを使わず、ゼロから独自のテーマやプラグインをPHPなどを使い開発します。	独自のデザインと機能の実装	最も高

カスタマイズのヒント

• 簡単な変更から始める場合は、「テーマカスタマイザー」や「プラグインの導入」が最も手軽です。
• デザインを少し変えたい場合は、「CSSの追加」が強力です。
• 本格的な機能追加やレイアウト変更を行う際は、テーマのアップデートで変更が消えないように「子テーマの使用と編集」を強くお勧めします。

WordPressテーマ カスタマイズのしやすさ 傾向比較

順位 (※傾向)	テーマ名	主な特徴とカスタマイズの傾向
1	THE THOR（ザ・トール）	専用カスタマイザー機能が非常に豊富で、コードを書かずに細部までデザインを変更できる。多機能ゆえに操作が複雑に感じる場合もあるが、カスタマイズの幅は広い。
2	STORK SE（ストークSE）	シンプルな構造で、初心者でも迷いにくい設計。ブログ運営に特化した機能が充実しており、特別な知識がなくても見栄えの良いデザインになりやすい。
3	Emanon（エマノン）	マーケティング・ビジネスサイト向け。専用ブロックやウィジェットが用意されており、必要な要素を簡単に配置できる。多機能なPro版などがある。
4	LIQUID PRESS（リキッドプレス）	標準機能は抑えつつも、カスタマイズの拡張性が高い。知識があれば自由に変更しやすいが、THE THORほど専用設定項目は多くない傾向。
5	RE:DIVER（リダイバー）	比較的新しいテーマで、Webサイト制作向けのモダンなデザインが特徴。専用機能でのカスタマイズと、コードカスタマイズのバランスが取れている。
6	GOLD MEDIA（ゴールドメディア） / GOLD BLOG（ゴールドブログ）	開発元が同じで、多機能性を売りにしていることが多い。多機能ゆえに初心者には難しいと感じる部分もあるが、専用のオプションは用意されている。