Lightningでトップページをおしゃれにカスタマイズする5つの方法

WordPressでLightningテーマを導入したのに、トップページが思い通りにカスタマイズできず、なんとなくモヤモヤしていないでしょうか。

この記事では、Lightningでトップページをカスタマイズするための全体像から、初心者向けの設定方法、少し踏み込んだテクニックまで、ひと通り分かるようにまとめました。

結論としては、「表示設定」と「カスタマイザー」という基礎をきちんと押さえたうえで、サイトの目的に合わせてセクション構成を決めていけば、Lightningのトップページは初心者でも十分に仕上げられます。

Lightningのトップページカスタマイズでできることを整理しよう

Lightningテーマの特徴とトップページの仕組み

Lightningは、企業サイトや店舗サイトを作りやすいことを意識して作られているWordPressテーマです。トップページを固定ページとして作り込めることと、ブロックエディターとの相性の良さが大きな特徴です。

まずは、Lightningのトップページがどのように決まっているのかを表にまとめてみます。

項目	内容	メリット	デメリット
固定ページをフロントに表示	自分で作った固定ページをトップページにする	レイアウトや文章を自由に変更しやすい	最初に表示設定をしないと反映されない
投稿一覧をフロントに表示	ブログ記事の一覧がトップに表示される	ブログ中心のサイトなら準備が少なくて済む	企業サイトだと情報が散らばって見えやすい
テーマ固有のセクション	スライドショーやお知らせなど	デモサイトに近い見た目になりやすい	設定場所を把握していないと迷いやすい

Lightningのトップページは、「固定ページ」と「テーマの機能」を組み合わせて表示されています。そのため、表示設定でフロントページの指定をしていないと、いくら固定ページを編集してもブログ一覧のまま変わらない、という状態になりがちです。まずはここを押さえておきましょう。

無料版と拡張機能で変わるトップページの自由度

Lightningは無料版だけでも十分使えますが、拡張プラグインや有料ライセンスなどを組み合わせると、トップページのカスタマイズの幅がかなり広がります。細かいプランの話はここでは置いておき、トップページという観点だけで違いをざっくり整理します。

組み合わせ	トップページでできることのイメージ	向いている人
Lightning本体のみ	固定ページ＋基本ブロックでシンプルな構成	個人ブログ、小規模な情報サイト
Lightning＋ブロック系プラグイン	ボックスやカラムを使ってサービス紹介などを作りやすい	企業サイト、スクール、店舗サイト
Lightning＋有料拡張	ブロックパターンやデザインパターンを効率よく使い回せる	制作代行、複数サイトを運営したい人

会社やお店のホームページを1つ作りたいだけであれば、Lightning本体と無料のブロック系プラグインだけで足りることも多いです。逆に、いくつもサイトを作る予定があるなら、有料の拡張で「使い回せるパターン」を用意しておくと作業がぐっと楽になります。

カスタマイズ前に決めておきたいサイトの目的

トップページのカスタマイズで、いちばん最初に決めておきたいのが「サイトの目的」です。デザインから先に考えたくなりますが、目的が決まっていないと、あとから構成がブレやすくなります。

Lightningでよく作られているサイトの目的は、おおまかに次の3つに分かれます。

• 問い合わせや資料請求など、フォームからのアクションがゴールの企業サイト
• 営業時間やメニュー、アクセスなどを分かりやすく伝えたい店舗サイト
• ブログ記事を読んでもらい、ファンになってもらうことがゴールのブログサイト

目的によって、トップページの構成も少しずつ変わります。たとえば企業サイトなら、「サービス紹介→実績→お客様の声→問い合わせボタン」という流れを作るのが定番です。カスタマイズを始める前に、「このサイトで訪問者にいちばんしてほしい行動は何か」を一言で決めておくと、デザインもテキストも迷いにくくなります。

Lightningでトップページを固定ページに設定する基本手順

トップページ用固定ページと投稿ページを作成する

Lightningでトップページをカスタマイズするときは、まずトップとして使う固定ページを用意するところからスタートします。やること自体はシンプルです。

この時点では、中身が空のままでも構いません。大事なのは、「トップで表示するページ」と「投稿一覧を表示するページ」を分けて作っておくことです。これができていると、このあと紹介する表示設定がスムーズに進みます。

表示設定でフロントページを指定する

固定ページを用意したら、「設定 → 表示設定」でフロントページを指定します。ここがうまくできていないと、Lightningのトップページをどう編集しても、思ったとおりに反映されません。

よく使う項目を整理すると、次のようになります。

項目	選ぶ内容	意味
ホームページの表示	固定ページ	トップページに固定ページを使う指定
フロントページ	先ほど作った「ホーム」など	サイトにアクセスしたときに最初に開くページ
投稿ページ	「ブログ」や「お知らせ」用ページ	投稿記事の一覧が表示されるページ

この設定を保存してからブラウザでトップページを再読み込みすると、先ほどフロントページに指定した固定ページが表示されるようになります。もし切り替わらない場合は、ブラウザのキャッシュやキャッシュ系プラグインを一度クリアしてみてください。

うまく反映されないときのチェックリスト

「表示設定もやったのに、Lightningのトップページが思ったとおりに切り替わらない」という相談をよく見かけます。そんなときは、次のチェックリストを順番に見直してみてください。

チェック項目	確認ポイント
ホームページの表示	「固定ページ」が選ばれているか
フロントページ	意図した固定ページを選択しているか
投稿ページ	投稿一覧用のページが設定されているか
キャッシュ	ブラウザやプラグインのキャッシュを削除したか
子テーマ・テンプレート	front-page.phpなどを編集して崩していないか

私も、子テーマでテンプレートを少し触ったあとに「なぜかトップページだけ表示がおかしい」という状態になったことがあります。カスタマイズ後に崩れた気配があるなら、一度子テーマを無効化して親テーマだけに戻し、表示が正常かどうかを確認すると原因を切り分けやすくなります。

カスタマイザーでできるLightningトップページの見た目カスタマイズ

ヘッダーとメニュー周りのカスタマイズ

Lightningのヘッダーは、サイトの第一印象に直結する部分です。ロゴ、サイトタイトル、グローバルメニュー、背景色を整えるだけでも、トップページの雰囲気はかなり変わります。

ヘッダー周辺の主な設定と、トップページへの影響を整理すると次のようになります。

設定箇所の例	内容	トップページへの影響
サイト基本情報	サイトタイトル・キャッチフレーズ	検索結果やヘッダーに表示される文字が決まる
ロゴ画像	ロゴや横長の画像	ブランド感や信頼感が一気に変わる
メニュー	グローバルメニューの項目	どのページに誘導しやすいかが決まる
色・背景	ヘッダーやメニューの色	サイト全体のトーンや世界観を作る

企業サイトなら、ロゴをしっかり設定し、メニューに「サービス」「料金」「会社概要」「お問い合わせ」など、必要なページを並べておくのがおすすめです。スマホ表示でメニューが多すぎるとごちゃついて見えるので、必要最低限に絞ることも意識してみてください。

トップページスライドショーの設定

Lightningには、トップページの一番上に大きなスライドエリアを表示する仕組みがあります。訪問者が最初に目にする場所なので、ここでサイトの方向性をしっかり伝えたいところです。

トップのスライドを使うときのポイントは、だいたい次のようなイメージです。

なんとなく雰囲気の良い写真を並べるだけだと、Lightningのトップページ上部が「かっこいいけれど何をしているサイトか分からない」という状態になりがちです。誰に向けたサイトなのか、何をしている会社・個人なのか、次に何をしてほしいのかを、このエリアでざっくり伝えることを意識してみてください。

レイアウトと余白の調整ポイント

ヘッダーとスライド周りが決まったら、Lightningのトップページ全体のレイアウトと余白を調整していきます。1カラムにするか2カラムにするか、サイドバーを出すかどうかで、読みやすさがかなり変わります。

主なレイアウトと、向いているケースは次の通りです。

レイアウト	向いているサイト	特徴
1カラム	企業サイト、サービス紹介サイト	情報を縦に流しながら、ストーリーのように見せやすい
2カラム（右サイドバー）	ブログ型サイト、メディア運営	カテゴリーや新着記事をサイドバーに置きやすい
2カラム（左サイドバー）	特殊な用途のみ	基本的には出番が少ない

Lightningでは、テーマ全体のレイアウト設定に加えて、固定ページごとにレイアウトを指定できることがあります。トップページは1カラム、ブログ記事は2カラムというように使い分けると、それぞれのページで読みやすい配置にできます。

ブロックエディターでセクションを作るトップページカスタマイズ実例

ファーストビュー直下にサービス3カラムを作る

スライドエリアのすぐ下には、「このサイトで提供しているもの」がひと目で分かるセクションを置くのがおすすめです。私も企業サイトを作るときは、多くの場合ここに3つのサービスや特徴を並べています。

イメージとしては、次のような感じです。

• 3つのサービスをアイコン＋見出し＋短い説明で並べる
• 「スピード対応」「明瞭な料金」「丁寧なサポート」など、強みを3つに分けて見せる

Lightningと相性の良いブロックプラグインを使うと、こうしたボックスデザインが簡単に作れます。よく使われるブロックと用途を整理すると次のようになります。

ブロックの種類の例	用途	トップページでの使いどころ
カラムブロック	横に2〜4列を並べる	サービスの一覧や特徴の一覧
アイコン付きボックス	見た目の整った説明ボックス	強みやメリットの説明
ボタンブロック	クリックされやすいボタン	「お問い合わせ」「詳しく見る」など

Lightningのトップページでは、「サービス3つ＋詳しく見るボタン」というセットを作っておくと、その下の詳しい説明セクションに自然につなげやすくなります。

会社概要やプロフィールセクションの作り方

企業サイトやフリーランスのサイトの場合、「誰がやっているサイトなのか」が分かる情報も大切です。トップページの中盤あたりに、会社概要やプロフィールのセクションを用意しておくと安心感が増します。

構成の例は次のようなイメージです。

• 左側に写真（顔写真や店舗の外観、ロゴなど）
• 右側に会社名や屋号、代表者名、簡単な自己紹介
• その下に、よくある質問や詳しい会社概要ページへのリンク

Lightningでトップページをカスタマイズするときも、この部分はブロックエディターだけで十分作り込めます。顔写真を出すのに抵抗がある場合は、店舗の外観写真やイメージ写真でも構いませんが、何か1枚写真があるとグッと雰囲気がよくなります。

お知らせ一覧・ブログ一覧の見せ方

企業サイトなら「お知らせ」、ブログサイトなら「最新記事一覧」をトップページに表示したくなると思います。Lightningでは、ウィジェットやブロックを使って、トップページの好きな位置に最新情報を持ってこられます。

お知らせやブログ一覧をどこに置くかで、ページ全体の印象が変わります。

配置パターン	向いているサイト	特徴
スライド直下	ブログ中心のサイト	常に新しい記事を前面に出せる
サービス紹介のあと	企業サイト、士業サイト	まずサービスや強みを伝えてから最新情報を見せられる
フッター直前	更新頻度が低めのサイト	落ち着いた印象を保ちつつ、必要な人だけが確認できる

私の感覚では、企業サイトでは「サービス紹介 → 実績 → お客様の声 → お知らせ一覧 → お問い合わせ」という流れがまとまりやすいです。Lightningのトップページをブロックで組み立てるときも、この並びを意識すると構成が決めやすくなります。

子テーマ＋CSSで一歩進んだLightningトップページカスタマイズ

子テーマを使うべきカスタマイズと使わなくていいカスタマイズの線引き

子テーマは、親テーマを直接編集せずにカスタマイズするための仕組みです。Lightningでも、トップページのテンプレートそのものを変えたいときは子テーマを使った方が安全です。

ただ、すべてのカスタマイズで子テーマが必須というわけではありません。ざっくりとした目安を表にしてみます。

やりたいこと	子テーマの必要度	おすすめの方法
文字サイズや色を少し変えたい	低	カスタマイザーまたは追加CSS
特定のブロックの余白だけ変えたい	中	追加CSS＋クラス指定
トップページだけ独自レイアウトにしたい	高	子テーマでfront-page.phpを用意
全ページのヘッダー構造を変えたい	高	子テーマでテンプレートファイルを編集

「固定ページとブロックでできる範囲＋ちょっとした追加CSS」までは、子テーマを使わなくても対応できます。一方、テンプレートそのものを編集したい場合は、必ず子テーマを経由するようにしましょう。

ちょい足しCSSでよくあるお悩みを解決

Lightningのトップページを調整していると、こんな小さな悩みが出てきがちです。

• セクション同士の余白が少しだけ広すぎる、または狭すぎる
• スマホ表示のときだけ文字サイズを変えたい
• 特定のボタンの色だけ変えたい

こういった調整は、追加CSSに数行書くだけで解決する場合が多いです。流れとしては、次のようなイメージです。

• 対象のブロックやセクションにクラス名を付ける
• カスタマイザーの「追加CSS」で、そのクラスに余白や色を指定する

「クラス名を付けてCSSを当てる」という考え方に慣れておくと、Lightningでトップページをカスタマイズするときの自由度がぐっと上がります。最初は難しく感じますが、1〜2パターン覚えるだけでもできることが増えます。

front-page.phpで完全オリジナルレイアウトにするイメージ

さらに踏み込んで、Lightningのトップページを完全オリジナルなレイアウトにしたい場合は、子テーマでfront-page.phpというテンプレートを用意する方法があります。これはPHPの知識が少し必要なので、中〜上級者向けです。

おおまかな流れは次のとおりです。

この方法をとると、「上のエリアはLP風の1カラム、少し下にブログ一覧、その下にお問い合わせボタン」といった複雑な構成も実現しやすくなります。ただし、間違ったコードを書くと表示が崩れたり真っ白になったりすることもあるので、バックアップを取りながら慎重に進めるのがおすすめです。

SEOと成果を意識したLightningトップページ設計のコツ

どこにキーワードを入れるか

SEOの観点では、キーワードを詰め込みすぎないことが大事ですが、入れるべき場所に自然に入れておくことも重要です。Lightningで作ったトップページの場合、主なポイントは次のあたりです。

たとえば、「ホームページ制作なら○○」というサイトであれば、トップページのタイトルや冒頭の見出しに「ホームページ制作」という言葉を自然に入れておきます。この記事のテーマであるLightningによるトップページのカスタマイズについても、見出しや本文に無理のない形で散りばめておくことで、検索エンジンにもページのテーマが伝わりやすくなります。

コンテンツの並び順と導線設計

Lightningでトップページをカスタマイズするときに、個人的にいちばん重要だと思っているのが「情報の並び順」です。どの順番で情報を見せるかによって、読まれ方や問い合わせ率が変わってきます。

私がよく使う並び順の型を表にすると次のようになります。

型の名前	コンテンツの並び	向いているサイト
企業サイト型	ヒーロー画像 → サービス紹介 → 実績 → お客様の声 → 会社概要 → お問い合わせ	BtoB企業、士業、コンサル
店舗サイト型	ヒーロー画像 → メニュー・料金 → 店舗写真 → アクセス → 予約・問い合わせ	飲食店、美容室、整体院など
ブログ型	ヒーロー画像（またはなし） → 新着記事一覧 → 人気記事 → プロフィール → メルマガ登録など	個人ブロガー、情報発信メディア

Lightningはセクションを縦に積み上げる構成が得意なテーマなので、こうした「型」をそのままブロックで再現しやすいのが強みです。自分のサイトがどの型に近いかを決めてから、見出しと中身を埋めていくと、無理なくトップページが組み上がります。

スマホ表示と表示速度のチェックポイント

Lightningでトップページをカスタマイズするときに、つい忘れがちなのがスマホ表示とページの重さです。スライドに大きな画像をたくさん入れたり、装飾の多いブロックを重ねすぎたりすると、読み込みが遅くなりがちです。

スマホ表示と表示速度について、最低限チェックしておきたいポイントを一覧にしておきます。

チェック項目	内容
画像サイズ	必要以上に大きなサイズの画像をアップしていないか
画像枚数	スライドなどで枚数が多すぎないか
フォントサイズ	スマホで読みにくいほど小さくないか、逆に大きすぎないか
余白	セクション同士の間が詰まりすぎていないか
不要なプラグイン	使っていないプラグインを入れっぱなしにしていないか

自分のスマホで実際にLightningのトップページをスクロールしながら、「ここで面倒になって閉じそうだな」と感じる場所をメモしておくと、改善すべき箇所が見えてきます。

よくある質問

Q1. トップページを固定ページにしたのに、編集内容が反映されません

A. 多くの場合、「設定 → 表示設定」でのフロントページ指定が正しくできていないか、キャッシュが残っていることが原因です。次のポイントを順番に確認してみてください。

• ホームページの表示が「固定ページ」になっているか
• フロントページに、編集したい固定ページを選んでいるか
• ブラウザとキャッシュ系プラグインのキャッシュを削除したか
• 子テーマでfront-page.phpなどを編集していないか

それでもLightningテーマのトップページが思ったように切り替わらない場合は、一度親テーマのみを有効にして表示が正常かどうか確認すると、原因の切り分けがしやすくなります。

Q2. Lightningでトップページをカスタマイズするとき、子テーマは必ず必要ですか？

A. すべてのケースで必須というわけではありません。次のような調整は、子テーマなしでも対応できます。

• ブロックエディターを使ったレイアウトの変更
• カスタマイザーでの色やフォント、レイアウト設定の変更
• 追加CSSによる軽い見た目の調整

一方、次のようなことをしたい場合は子テーマを使った方が安全です。

• テンプレートファイル（front-page.phpなど）を編集したいとき
• ヘッダーやフッターのHTML構造そのものを変更したいとき

いきなり子テーマから入るよりも、まずはブロックとカスタマイザーでどこまでできるか試してから、足りない部分を子テーマで補う、という順番で考えるのがおすすめです。

Q3. Lightningのトップページで、どのブロックを使えばいいか分かりません

A. 迷ったときは、次の3種類を基本セットとして使うと、シンプルで読みやすいトップページになりやすいです。

• 見出しブロック（H2・H3）
• 段落ブロック（通常のテキスト）
• カラム＋ボックス系ブロック（サービス紹介や強みの整理に便利）

必要に応じて、次のブロックを追加していくイメージです。

• ボタン（問い合わせや予約ページへの誘導に）
• 画像（サービスイメージや店舗写真に）
• リスト（箇条書きでメリットを整理したいときに）

あれこれブロックを増やしすぎると、Lightningのトップページがかえって複雑になってしまいます。最初は「シンプルで分かりやすい」構成を目指し、必要になってから新しいブロックを覚えていく方がストレスが少ないと思います。

まとめ

この記事の内容を振り返っておきます

今日からできる最初の一歩としては、「トップページ用の固定ページを作り、表示設定でフロントページに指定する」ところから始めてみてください。

そのうえで、カスタマイザーとブロックを使って、この記事で紹介した構成の型を真似しながら、自分のサイトに合ったトップページを少しずつ作っていきましょう。