Lightningをカスタマイザーとcssでカスタマイズ – WordPressテーマ
1. 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のカスタマイザー
「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の追加など。
Lightningのカスタマイズの注意点
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の活用」を軸に進めることで、安全かつ効率的に行うことができます。これらの注意点を意識して、目的に合ったサイトを構築してください。
公式テーマと有料テーマを比較
WordPressの公式テーマ（無料）と有料テーマを比較すると、主に費用、機能・カスタマイズ性、サポート、デザインなどの点で違いがあります。
以下に主な比較ポイントをまとめます。
| 比較項目 | WordPress公式テーマ（無料） | 有料テーマ |
| 費用 | 無料 | 1万円〜3万円程度の買い切り型、または月額/年額のサブスクリプション型が多い |
| 機能・カスタマイズ性 | シンプルで基本的な機能に限定されることが多い。高度な機能はプラグインで補う必要がある。 | 多機能で、ドラッグ＆ドロップビルダーや豊富なレイアウトオプションなど、高度なカスタマイズ機能が組み込まれていることが多い。 |
| デザイン | シンプルで、他のサイトとデザインが似る可能性がある。 | プロフェッショナルで高品質なデザインが多く、独自性を出しやすい。特定の業種に特化したテーマもある。 |
| サポート | 公式フォーラムなど、コミュニティベースのサポートが中心で、個別対応は期待できないことが多い。 | テーマ開発者による専門的なサポート（メール、チャットなど）が提供されることが多く、初心者には安心。 |
| アップデート | 公式ディレクトリに登録されているため、セキュリティや互換性のチェックはされているが、機能追加の頻度はテーマによる。 | 定期的なアップデートがあり、最新のWordPressやプラグインとの互換性、セキュリティ対策がより迅速に行われる傾向がある。 |
| コードの品質・安全性 | 公式テーマは厳格な審査基準をクリアしているため、一定の品質・安全性は担保されている。 | 評判の良いテーマは高品質だが、中にはコードが複雑すぎたり、セキュリティに問題があるものも存在する可能性があるため、選定に注意が必要。 |
| SEO対応 | 基本的なSEO対策はされているが、高度な最適化はプラグインに依存することが多い。 | 内部SEOが最適化されているテーマが多い。 |
まとめと推奨
| あなたの状況 | 推奨されるテーマ |
| 予算をかけたくない、個人ブログ、シンプルなサイトで十分、自分でカスタマイズできる知識がある | 公式テーマ（無料） |
| ビジネスサイトや本格的なサイトを構築したい、デザインの独自性を出したい、豊富な機能やカスタマイズ性が欲しい、初心者でサポートが必要、時間と労力を節約したい | 有料テーマ |
最終的には、あなたのサイトの目的、予算、求める機能、そしてウェブサイト構築のスキルレベルに応じて、最適なテーマを選択することが重要です。有料テーマを選ぶ場合は、評判やサポート体制、アップデートの頻度をしっかり確認することをお勧めします。
| テーマ名 | 主な特徴・強み | 適したサイト |
| ザ・トール (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などがあります。
