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

WordPressのカスタマイザー機能を使う

これは最も手軽で基本的なカスタマイズ方法です。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テーマ「Lightning」（ライトニング）は、株式会社ベクトルが開発した国産の無料WordPressテーマです。

主な特徴

• ビジネス向けテーマ：特に企業やビジネスでの利用を想定して開発されており、ホームページやブログが簡単に作成できるように設計されています。
• 日本製・公式ディレクトリ登録：日本語に対応しており、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はカスタマイズがしやすいと言える要素が多いです。

カスタマイズしやすい点

• テーマの豊富さ:
  • デザインや機能があらかじめ組み込まれた「テーマ」が非常に多く、テーマを選ぶだけでサイトの見た目や基本的な機能を簡単に変更できます。
  • カスタマイズ性に優れていることを売りにしているテーマ（例：SWELL, AFFINGER, Snow Monkeyなど）も多く、これらのテーマを使えばコードを触らずに設定画面から多くの調整が可能です。
  • 最近はフルサイト編集（FSE）に対応したテーマもあり、より直感的にサイト全体を編集できます。
• プラグインによる機能追加:
  • Webサイトに必要な様々な機能（問い合わせフォーム、セキュリティ対策、SEO対策、表示速度の改善など）を、プログラムの知識なしにプラグインを導入するだけで追加できます。
• CSSなどの知識があればさらに自由度が高い:
  • HTMLやCSS、PHPといったウェブ制作の知識があれば、テーマファイルを直接編集したり、子テーマを作成したりすることで、さらに細部にわたる自由なカスタマイズが可能です。

注意点

• テーマ選びが重要:
  • デザインを大きく変えたい場合や、特定の機能を追加したい場合、選んだテーマのカスタマイズの自由度が低いと、実現が難しかったり、余計な手間がかかったりすることがあります。
  • 初心者の方は、直感的な操作や豊富な設定オプションがある「カスタマイズしやすい」と評判のテーマを選ぶと良いでしょう。
• 複雑な機能の実装には知識が必要:
  • 非常に高度で特殊な機能や、テーマの標準設定にない大きな構造変更を行うには、やはりPHPなどのプログラミング知識が必要になります。
  • この場合、専門の制作会社に依頼したり、自分でコードを編集するために学習したりする必要があります。

結論として、多くのカスタマイズは知識がなくても比較的簡単に行えますが、どこまで深く、細かくこだわるかによって難易度は変わってきます。

有料WordPressテーマはカスタマイズに有利

有料のWordPressテーマは一般的にカスタマイズに有利だと言えます。

主な理由としては、以下のような点があります。

1. 豊富な機能と設定オプション:
   • 有料テーマには、デザインやレイアウトを細かく調整するための専用機能や設定項目が豊富に用意されていることが多いです。
   • プラグインをあまり使わなくても、枠線、吹き出し、装飾文字などの実用的な機能が使えるようになっていることが多く、初心者でも簡単にカスタマイズできます。
2. デザインの自由度の高さ:
   • 最初からプロが作成した洗練されたデザインテンプレートが用意されており、それをベースに色やレイアウトを比較的自由に調整できるテーマが多いです。
   • 多くのテーマがブロックエディタ（Gutenberg）に完全対応し、より直感的にカスタマイズできるようになっています。
3. サポートとマニュアルの充実:
   • カスタマイズ方法やトラブルシューティングに関する詳細なマニュアルが整備されていたり、購入者向けのサポート（メールやフォーラムなど）が付いていることが多いため、困ったときに解決しやすいです。
4. 技術的な優位性:
   • SEO対策や高速表示など、サイト運営に重要な技術的要素が考慮されて設計されていることが多く、その上でカスタマイズも容易にできるように作られています。

無料テーマでも素晴らしいものはありますが、カスタマイズの自由度を上げようとすると、自分でCSSやHTMLなどの専門知識が必要になるケースや、利用できる機能に限界を感じることが少なくありません。

時間を節約し、効率的かつ高品質なサイトを構築したい場合は、初期投資として有料テーマを導入することが、結果的に大きなメリットとなることが多いです。

テーマ名	主な特徴・強み	適したサイト
ザ・トール (THE THOR)	国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援	アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)	Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium）	コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)	「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い	商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)	用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能	メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト

補足情報

• ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
• エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
• ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
• リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。