初心者向け|WordPress Lightningの使い方とホームページの作り方

WordPressでホームページを作ってみたい。

無料テーマ「Lightning」が良いと聞いたけれど、

・どうやって使うの?
・ホームページの形にするにはどうすればいいの?
・投稿と固定ページって何が違うの?

と迷っていませんか?

はじめてのWordPressは、分からないことが多くて不安になりますよね。

WordPressでホームページを作るなら、無料テーマ「Lightning」が初心者にも使いやすくおすすめです。

この記事では、WordPress無料テーマ「Lightning」を使って、ホームページを作る方法を画像付きで詳しく解説します。

Lightningテーマの基本設定からトップページの作り方、デザインの整え方まで、順番に説明していきます。

この記事を読んで分かること
  • Lightningの基本設定
  • ホームページ型サイトの作り方
  • デザインの整え方

読み終えるころには、ホームページの全体像がイメージできるようになります!

目次

WordPress無料テーマLightningとは?

Lightningは、WordPress公式ディレクトリで公開されている無料テーマです。

テーマとは、サイトの「見た目」や「デザイン」を決めるものです。

Lightningテーマの特徴

・無料で使える
・ブロックエディタに対応している
・スマホでもきれいに表示される(レスポンシブ対応)
・無駄な装飾が少なく見やすい

初心者に向いている理由

シンプルな作りなので、難しい設定をしなくても形になります。

初めてホームページを作る人に向いているテーマです。

WordPress Lightningの始め方【初期設定】

テーマをインストールする方法

STEP

WordPressの管理画面から
外観 → テーマ をクリックします。

WordPress Lightning テーマインストール画面
STEP

テーマを検索に 「 lightning 」と入力します。

WordPress Lightning テーマインストール Lightning 入力画面
STEP

Lightningテーマが表示されたら、マウスを乗せると「インストール」ボタンが表示されます。

WordPress Lightning テーマインストール 画面
STEP

「インストール」→「有効化」をクリックします。

WordPress Lightning テーマインストール 有効化画面

これで、Lightningテーマを使用できるようになります。

サイトのデザインの土台が完成します。

投稿と固定ページの違い

ホームページを作る場合は、「投稿」ではなく「固定ページ」を使います。

投稿
ブログ記事を書くときに使います。
記事が増えると、新しい順に一覧で表示されます。

固定ページ
トップページや会社概要など、常に表示しておきたいページに使います。
場所が変わらず、固定したまま表示できます。

ホームページでは、内容を固定して見せるページが多いため、固定ページを使うのが一般的です。

トップページを固定表示にする方法

WordPressでは、「トップページ」「ホームページ」「フロントページ」という言葉が同じ意味で使われることがあります。

この記事では、サイトを開いたときに最初に表示されるページを「トップページ」として説明します。

まずは、トップページとして使う固定ページを作成します。

STEP

WordPressの管理画面から
固定ページ →「固定ページを追加」をクリックします。

STEP

タイトルに「ホーム」など、トップページにしたい名前を入力します。
入力できたら、右上の「公開」をクリックします。

次に、トップページとして表示する設定を行います。

STEP

WordPressの管理画面から
設定 → 表示設定 をクリックします。

STEP

ホームページの表示で 「固定ページ」を選びます。

STEP

「ホームページ」の項目で、先ほど作成したページを選択します。
最後に 「変更を保存」をクリックします。

これで、記事一覧ではなく、作成した固定ページをトップページとして表示できるようになります。

一般的な企業サイトやお店のホームページでは、このように固定ページをトップページとして設定することが多いです。

トップページの作り方

固定ページの設定ができたら、次はトップページの中身を作っていきます。

まずは、どんな順番で内容を見せるかを考えてみましょう。

トップページの構成を決める

いきなりデザインから決めるのではなく、先に内容の流れを決めておくと、スムーズに作業が進みます。

トップページは、次のような順番で作るとまとまりやすくなります。

・ファーストビュー(最初に目に入る部分)
・サービス内容
・強みや特徴
・お問い合わせへの案内

訪問者が迷わず読み進められる流れを意識することが大切です。

少し意識するだけで、ぐっと見やすいホームページになります。

トップページに内容を入力する方法

構成が決まったら、次は実際にトップページの内容を入力していきます。

STEP

WordPressの管理画面から
固定ページ → ホーム(作成したトップページ) をクリックします。

STEP

編集画面が開いたら、文章や画像を追加していきます。
文章を入力するときは、「+」ボタンをクリックしてブロックを追加します。
見出しは 「見出しブロック」、文章は 「段落ブロック」 を使います。

STEP

Lightningでは、パターン(あらかじめ用意されたデザインレイアウト)が用意されています。
パターンを使うと、見出しや画像、ボタンなどが組み合わさったレイアウトを簡単に追加できます。
「+」ボタン → すべて表示 → パターン から選んで使用できます。

STEP

入力が終わったら、右上の「保存」をクリックしましょう。

Lightningのデザイン設定

トップページの内容ができたら、次はホームページのデザインを整えていきます。

WordPressテーマ「Lightning」は、初心者でもデザインを整えやすいのが特徴です。

カスタマイズ機能を使えば、色やロゴ、メニューなどを簡単に変更できます。

これらを整えることで、サイト全体に統一感が生まれ、見やすく分かりやすいホームページになります。

ここでは、Lightningを使ってホームページのデザインを整える基本設定を紹介します。

サイトカラーを変更する

Lightningでは、カスタマイズ画面からカラーを変更できます。

STEP

WordPressの管理画面から
外観 → カスタマイズ をクリックします。

STEP

カスタマイズ画面が開いたら、「 色 を選びます。

STEP

サイトのキーカラー(サイトの基本となる色)を変更します。
キーカラーは、ボタンやリンクなどに使われるサイトのメインカラーです。

ブランドカラーやイメージに合わせて色を設定すると、サイト全体に統一感が出ます。

迷ったときは、使う色を2〜3色に絞ると、すっきりしたデザインになります。

ロゴを設定する

ロゴとは、サイトやお店の名前を表すマークやデザインのことです。

ロゴを設定すると、ホームページの印象がより分かりやすくなります。

STEP

WordPressの管理画面から
外観 → カスタマイズ をクリックします。

STEP

カスタマイズ画面が開いたら、「 Lightning デザイン設定 」を選びます。

STEP

「ヘッダーロゴ画像」「画像を選択」 をクリックし、ロゴ画像をアップロードします。

ロゴがない場合は、サイト名の文字だけでも問題ありません。

あとからロゴを追加することもできるので、まずはシンプルな状態でも大丈夫です。

メニューを設定する

メニューを設定すると、訪問者が目的のページを見つけやすくなります。

メニューとは、ホームページの上部などに表示されるページの案内(ナビゲーション)のことです。

下の画像の赤枠で囲んだ部分がメニューです。

WordPress Lightning ヘッダー画面
STEP

WordPressの管理画面から
外観 → メニュー をクリックします。

STEP

メニュー名に「 グローバルナビ 」と入力し、
メニューの位置でHeader Navigationにチェックを入れ、「 メニューを作成 」をクリックします。

STEP

メニュー項目を追加から追加したい項目にチェックを入れ、「 メニューを追加 」をクリックします。
(※表示するページは事前に固定ページで作成しておきます。)

STEP

メニュー構造に追加されたことを確認し、
最後に「 メニューを保存 」をクリックします。

メニューには、次のようなページを入れておくと分かりやすくなります。

・ホーム
・サービス
・会社概要
・お問い合わせ

シンプルなメニューにすることで、訪問者が迷いにくいサイトになります。

フッターを設定する

フッターとは、ホームページの一番下に表示される部分のことです。

フッターには、補足情報やリンクなどをまとめて表示する場所として使われます。

STEP

WordPressの管理画面から
外観 → メニュー をクリックします。

STEP

メニュー名に「 フッターメニュー 」と入力し、
メニューの位置でFooter Navigationにチェックを入れ、「 メニューを作成 」をクリックします。

STEP

メニュー項目を追加から追加したい項目にチェックを入れ、「 メニューを追加 」をクリックします。
(※表示するページは事前に固定ページで作成しておきます。)

STEP

メニュー構造に追加されたことを確認し、
最後に「 メニューを保存 」をクリックします。

フッターには、次のような情報を入れることが多いです。

・お問い合わせ
・プライバシーポリシー
・サイトマップ
・コピーライト(©表記)

フッターを整えることで、ホームページ全体が見やすくなります。

まとめ

WordPressテーマ 「Lightning」 を使うと、初心者でもシンプルで見やすいホームページを作ることができます。

ここまでの流れをまとめると、次のようになります。

・Lightningテーマをインストールする
・固定ページを使ってトップページを作る
・トップページを固定表示に設定する
・トップページの内容を入力する
・サイトカラーやロゴなどのデザインを整える

最初は難しく感じるかもしれませんが、基本の流れが分かれば少しずつホームページの形になっていきます。

まずはシンプルな形で作り、あとから内容やデザインを整えていくのがおすすめです。

Lightningは初心者でも扱いやすいテーマなので、ぜひ試しながらホームページ作りに慣れていきましょう!

目次