WordPress無料テーマLightningの特徴とホームページを自作する方法【初心者】

※記事内に商品プロモーションを含む場合があります。

悩める人
悩める人

wordpress無料テーマLightningの評判を教えてください。

lightningを使ってお店のホームページを作りたいです。

悩める人
悩める人
きつねコード
きつねコード

Lightningは超人気のwordpress無料テーマの一つです。特に店舗・会社・事務所など様々なホームページを作成するのによく使われています。

この記事を書いているきつねコードは、wordpressを10年以上前から触れており、多くのwordpressテーマも実際に試しています。

webディレクターである私が、無料テーマLightningの特徴と、その使い方について解説します。

またホームページを作成する具体的な手順も載せています。初心者の方でも挫折しないように、枝葉の部分は捨象して、肝となるような要素だけ残していますのでまずはプロトタイプとなるようなホームページを作ってみてください

すぐにホームページ作成手順へ飛ぶ人はこちら

wordpressテーマ「Lightning」とは

まずwordpress自体が初めてという方は、こちらの関連記事から先にご確認ください↓。

関連記事:wordpressとは?

wordpressには、「テーマ」という仕組みがあります。

wordpressテーマとは、着せ替え機能のようなものであり、それを変更するだけで、使える機能サイトのデザインなどがガラッと変わります。

Lightningは、無料で使えるwordpressテーマの一つであり、国内でトップクラスの人気を誇ります。昔からあるテーマですが利用者は今でも多いです。

Lightningの公式サイト

lightning公式サイト
出典:lightning公式サイト

店舗ホームページ、ネットショップのページ、個人サイト、業者ホームページ、法人ホームページ、求人ページ、各種団体のホームページ、学校ホームページ、事務所ホームページなどの用途でlightningは利用されています。

ブログもできますが、特にホームページを制作するのに向いているwordpressテーマと言えるでしょう。

もちろん100%GPLで商用利用も可能ですので安心して使えます。

ちなみに、基本的に無料のままずっと使えますが、もっと高機能を求める場合には有料ライセンスも存在しますよ。

デザインに関しては、Bootstrapベースで作られていますので良くも悪くも「一般的なデザイン」と言えます。(※Bootstrapとは、CSSでよく使われるフレームワークのことです。

整っていて綺麗なシンプルデザインですので、さまざまな方向にカスタマイズしていくことも可能です。

Lightningのメリットとデメリット

私が考えるLightningテーマのメリットとデメリットをご紹介します。

lightningの使用画像
lightningの使用画像
きつねコード
きつねコード

総じていうと、ホームページを自分で作りたいなら、きつねコードもめちゃくちゃオススメするテーマです。すごく良いですよ。

Lightningのメリット①無料で使えるのに高機能

一番の理由は、なんといっても無料だからです。

wordpressの無料テーマは無数に存在しますが、セキュリティ的に安心して利用できて、質も良い無料テーマは限られます

lightningは、無料テーマにしては異常なほどの高機能です。

できることはとても多く、有料テーマと比較しても遜色ないと言えるでしょう。

Lightningのメリット②初心者でもカスタマイズできる幅が広い

2つ目は、無料テーマなのにカスタマイズできる余地が広いことです。

無料テーマの中でカスタマイズ性も高いものはそう多くはありません。(というか、あまり思いつかない。)

lightningを使うと、色々なタイプのホームページを作成することが可能です。

lightningテーマの1番の特徴は、「パターン」と呼ばれる機能がたくさん用意されていることです。

具体的な使い方については後述しますが、要するに「レイアウト・テンプレート」みたいなものです。

素人でもすぐに利用できるパーツとして豊富に用意されているため、それらを組み合わせていくだけで様々な構成のホームページを実現できるようになっています。

そのおかげで、有料テーマと比較してみてもサイトのカスタマイズ性能はすごく高い方に分類できると思います。

Lightningのメリット③wordpress公式テーマに認定されている安心感

3つ目は、wordpress公式テーマになっているからです。

公式テーマになると、wordpress管理画面で直接テーマを調べた時に検索結果に出てくるようになります↓。Lightningがありますよね。

wordpress管理画面でのLightningテーマ

実は、国産の日本テーマで公式テーマになっているものはそう多くはありません。

検索しても出てくるのは海外産のテーマばかりで、日本のものはほとんど出てこないです。

公式テーマになるためには、wordpress(wordpress本体のことです。)の厳しい審査に通らなければいけません。また、時勢に合わせて常にアップデートしていく必要性も出てきます。

公式テーマになっているLightningは、それだけセキュリティ面でも質の面でもクオリティが担保されていると言えます。

加えて、「運営体制」についても非常に安心感を感じます。

一般的に、wordpressテーマは実質1人の開発者もしくは数人のチーム個人開発的に運営されているものも多いです。(運営元が法人だったとしても)

しかしLightningの場合は、株式会社ベクトルによって開発されており、おそらく関わっている人数も相当数いて組織的に運営されていると推測できます。

lightningの関連プラグインや、パターンの豊富さ、有料ライセンス、さらには学習サイトまで用意されており、テーマ本体に限らず周辺環境も手厚いです。

今後も長期的に安心して使っていけるテーマであると言えるでしょう。


きつねコード
きつねコード

次にデメリットも見てみましょう!

Lightningのデメリット①誰でも完成度の高いサイトを作れるわけではない

デメリットの1つ目は、「手間」についてです。

lightningは無料ではありえないぐらい超優秀なwordpressテーマですが、「全く手間をかけたくない人」には向いていません。

カスタマイズ性能が高くどんなホームページにしていくことも可能ですが、あくまでも自分の手で構成していく必要があります。

例えていうならば、「パズル」のような感覚に近いかもしれません。ピースはたくさん用意されているので、あとは組み合わせで試行錯誤しながら理想とする完成図を作っていきます。

初心者でも扱えることは間違いありませんが、センスの良いサイトになるかどうかは別問題です。

余談ですが、lightningテーマを使ってホームページを作り、お客さんに納品しているweb制作会社やフリーランスもいるぐらいです。

それぐらい高機能なテーマですが、ある程度の習熟具合とデザイン的なセンスで完成度が作用されることは認識しておくと良いかもしれません。

その試行錯誤の過程を楽しめる人には、これほど便利でコスパの良いテーマは他にないので向いています。

Lightningのデメリット②有料ライセンスにすると割高になる可能性

デメリットの2つ目は、「価格」についてです。

lightningは無料版でもずっと利用できますが、有料にアップグレードするとさらに機能が増えます。

出典:lightning公式サイト(※正確には公式サイトでご確認ください)

テーマを使っていく中で、

ここをこういう風に直したいな。あ、でもこれって有料機能なのか

そういうシーンがくることは結構多いと思います。
(ただし、カスタマイズに限界が来ることはどのwordpressテーマを使っていても共通して言えることです。)

無料版と有料版の違いについては次のセクションで解説を加えますが、結論だけ言うと有料版にする価値は大いにあります。

価値はありますが、、lightningの有料プランは「ライセンス制」なのでずっと更新料がかかってしまいます。

他の有料wordpressは一度買ったらずっと使える「買い切り制」であることが多いので、長期的なコスパで考えると費用がかさむ可能性も出てきます。

ここまでの話をまとめます。

lightningが向いている人

  • 自分のホームページを持ちたい個人、法人、団体など
  • お金をかけずに作りたい
  • 自分の手でやってみたい(社内に手の空いている人材がいる)
  • wordpress初心者〜上級者までOK

lightningが向いていない人

  • いっさい手間をかけずにホームページを作りたい
    • その場合は有料wordpressの中からデザインテンプレートをほぼそのまま使えるようなテーマを選ぶのがおすすめ。
  • 有料プランを使うことが想定される場合
    • その場合もちろんlightningも良いですが、他の買い切り型の有料wordpressテーマも併せて検討されると良いです。
関連記事
wordpressのおすすめテーマはこれ
ブログにおすすめのワードプレステーマ8選!素人でも集客力UP

この記事を書いているきつねコードは、10年以上wordpressに触れており、自身でもブログを運営しています。 当記事で紹介する以外にも、多くのwordpres ...

続きを見る

Lightningの無料版と有料版の違い

Lightningテーマの無料版と有料版の違いについて簡単に触れておきます。

一言で言うと、有料版の方が機能が増えて出来ることが多くなります。その結果、サイトの完成度が上がります。

色々と出来るようになりますが、いくつか機能を抜粋するとこんな感じです。

lightning有料版でできるようになること

  • サイト一番下フッターのコピーライト表示(powerd by wordpress〜lightning〜)を消すことができる
  • 効果の高いヘッダー部分に、問い合わせボタンや電話番号を設置できる
  • キャンペーンテキストを使えるようになる
  • モバイルで固定ナビゲーションを出せるようになる
  • 使える「パターンライブラリ」が増えるので、バリュエーションがぐんと広がる
  • 質問フォーラムに書き込みが可能となる

初めから見てもピンと来ないと思いますが、要するに「これあったらいいな」「これやったら効果高いだろうな」というような機能が使えるようになります。

無料版のlightningを使っていく中で、もし必要性を感じきたら有料版を検討してみましょう!

Lightningの使い方の学習法

lightningを開発しているベクトルでは、公式サイトにおいて「ベクトレ」という入門動画コンテンツも用意されています。

動画なのでわかりやすいですし、いつでも見ながら使い方を学ぶことができます。ここまで用意されているのも珍しいので、ありがたいですね。

動画で基本の使い方を勉強したい方は、一度見てみると良いと思います。

参考リンク:ベクトレ

無料テーマLightningでホームページを作成する方法【超初心者OK】

ここからは、wordpress無料テーマ「Lightning」を使って、ホームページを作成する事例を解説します。

きつねコード
きつねコード

「自前でホームページを作ってみたい」という方はぜひ挑戦してみてください!

この手順に沿って進めると、lightningの最低限の使い方をマスターできるように構成しているつもりです。

人によって設定状況や必要としているパートも異なると思いますので、不要だと思う項目に関しては読み飛ばしながら進めても構いません。

ご参考になれば幸いです。

作成手順

  1. wordpressサイトを作成する(未作成の方)
  2. lightningをインストールする
  3. lightningの関連プラグインをインストールする
  4. wordpressの初期設定を確認する
  5. lightningをカスタマイズする
きつねコード
きつねコード

今回は『もし私が古民家カフェのオーナーだったら』という設定でホームページを作ってみるよ!

まだそもそもwordpressサイトを作っていない方は、ここから始めましょう

webサイトを自分で持つ(自身の資産として管理する)ためには、サーバー(webサイトを置いておく場所)が必須です。自分でサーバーを用意するのは難しいので、レンタルサーバー会社と契約して借りるのが一般的です。(個人でも法人でもそう)

そして新たにwordpressサイトを作る場合には、エックスサーバーさんの「wordpressクイックスタート」と呼ばれる機能を使うのが一番簡単で、コスパも良いです。

ざっくりと月1000円ぐらいの費用で運営することが可能です。

費用は契約期間やキャンペーンなどによっても変わります。
エックスサーバーはレンタルサーバー会社の最大手です。

きつねコード
きつねコード

ちなみに、当サイトも全く同じ方法で作ったものですよ。

具体的な手順は下の記事で解説しているので、見ながら進めてみてください↓。

関連記事:【エックスサーバー】wordpressクイックスタートの手順

初めてやる方でも1時間ちょっとあれば完成します。
クイックスタート機能が使えるのは、サーバーを新規契約する時のみです。

なお、上のエックスサーバーwordpressクイックスタートを進める際には、wordpressテーマ「Lightning」を選べる画面が出てきます。後からでも入れられますが、楽なのでここで選択しておきましょう。

wordpressクイックスタートでテーマ「Lightning」を選択

無事にwordpressサイトが開設できたら、次へと進みましょう。


wordpressに、無料テーマlightningをまだインストールできていない人だけ対応しましょう。

ステップ1のwordpressクイックスタートで作成した人は、既にlightningをインストールできているはずですのでこのステップは飛ばして構いません。

まだの方は、テーマをインストールしていきましょう。やり方はとても簡単です。


  • lightningをインストール

    管理画面「外観」≫「テーマ」を開いて、「新しいテーマを追加」をクリックしましょう。

    wordpress管理画面「新しいテーマを追加」

    画面右上の検索ボックスで「lightning」と検索してください。
    雪山のようなホームページが出てきたらそれがLightningです。カーソルを合わせてインストール」次に「有効化」までクリックしてください。

    wordpressテーマを追加「lightning」と検索

    これだけで、Lightningのインストールは完了です。

    lightningは、wordpress公式テーマになっているので検索したらすぐに出てくるのでしたね。おかげで非常に簡単ですね!



まだlightningの関連プラグインを入れていない人は必ず入れましょう。

「プラグイン」とは、wordpressに入れられる「部品、パーツ」のようなもので、導入するだけで機能が増えていきます。プラグインは、巷に山ほどありますが、lightningテーマを作っている会社が同じく開発しているlingtning関連プラグインが、複数存在します。

wordpressテーマlightningでは、関連プラグインを使うと機能が足されていく仕組みとなっています。これがないとせっかく高機能なテーマのメリットを享受できないのでプラグインは必ずインストールしましょう。無料でいく方はfree版で大丈夫です。


  • lightningの関連プラグインをインストール

    lightningのテーマを有効化している人は、wordpress管理画面の画面上部に「次のプラグインを推奨します」のような通知が出ているはずです↓。そこから「プラグインのインストールを開始」をクリックしましょう。

    テーマlightningの専用プラグインを入れる

    3つのプラグインが出てくるはずです。それぞれインストール」次に「有効化」までクリックしましょう。

    今回の事例では無料版を使います。有料ライセンスを申し込む人は有料版pro unitをインストールしてください。
    参考記事:Lightning G3 Pro Unit のインストール

    テーマlightningの専用プラグインをインストール

    以上で、関連プラグインのインストールは完了です。


これでとりあえずは無料テーマLightningを使える状態になりました。一度サイト表示を確認してみましょう。

wordress管理画面でサイトを表示

大体こんな感じの見た目です。シンプルで綺麗なサイトですね。
※中身は設定によって異なります。

lightningテーマを適用した状態のサイト

次へ進みましょう!


最低限のworpressの初期設定を先に片付けましょう。

lightningを使ったホームページをカスタマイズしていく前に、まずは最低限ここは確認した方が良いであろう設定まわりをチェックすると良いと思います。

具体的なチェック項目は、下の記事で別途解説しているので開いてご確認ください↓。

関連記事:wordpressの初期設定について

解説記事で参考として載せている画像は別テーマcocoonになりますが、確認すべき項目としては大体同じです。飛ばせる部分も多いのでサラッと読みながら進めていただけると良いかと思います。

関連記事の目次を抜粋します↓

最低限やっておきたい初期設定(超初心者向け)

  1. 独自ドメインの確認
    • 自分のURLが設定できていればOK。
  2. SSL化の確認
    • URLが「https://独自ドメイン」とhttpの後ろにsがついていればOK
  3. 管理画面「ユーザー」
    • ログインIDとパスワードの管理を忘れずに。パスワードは必ず複雑なものを使うこと!お店や法人サイトは要注意です。侵入されますよ。
  4. 管理画面「設定」
    • サイトアドレス、noindex設定、コメント欄非表示、パーマリンク(重要)などを設定する
  5. 管理画面「カスタマイズ」
    • サイトタイトル、キャッチフレーズ、サイトアイコン(ファビコン)を設定する
  6. 管理画面「投稿」の「カテゴリー」
    • "ブログ"ではなく、"ホームページ"を作るのでカテゴリーの作成は後回しにして構いません

なお解説記事の中で、サイドバーメニュー固定ページ」に関しては当記事でも扱いますので飛ばしてOKです。それ以外は全て設定されることをお勧めします。

きつねコード
きつねコード

GoogleアナリティクスとGoogleサーチコンソールの連携などのSEO周りも別途後回しにしても良いかなと思います。まずはサイトを完成させましょう。


Lightningで自分好みのホームページにしていきましょう!

いよいよここから、ホームページの見た目を整えていきます。

実は、ライトニングの公式サイトでは「Lightning G3 クイックスタート」という、すぐにサンプルサイトを完成できる方法が公開されています。

それで作ると、下のようなの見た目になります↓。汎用的で結構なんでもいけそうですね。

手順通りに進めれば上のようなサイトがすぐ出来上がるので、やってみたい方はクイックスタートで進めても良いでしょう。

ファイル読み込み用プラグインを導入して、そのプラグインを使ってサンプルデータごと読み込めば完成です。10分ぐらいで終わります。

ただし、データを丸ごと上書きするわけですので「既存の設定や既存記事」などは消えます。初期状態の人だけが使える手法です。

参考リンク:Lightning クイックスタートの手順はこちら

しかし、クイックスタートだけだと

・デザインがめちゃくちゃ似かよる
・使い方を覚える機会を失う(どうせあとで覚えなきゃいけない)

というデメリットがあります。

「まんまこのサンプルサイトじゃん」という会社ホームページもまあまあ見かけます。

lightningは人気テーマですので、気にしない人は全然良いですが、他と被りたくない人は白紙の状態から自分でカスタマイズしていくやり方がお勧めです。

lightningを使いこなすと、かなり幅広く個性的にカスタマイズしていくことも可能です。少しずつでも良いので習熟度を上げていきましょう!楽しいですよ。

まず基本をマスターして、そこから自分なりにどんどんカスタマイズしてみてくださいね。

なお、ここから次に紹介するのは「lightningテーマのコアとなる部分の使い方」だと思ってください。

枝葉は扱いません。

lightningは超多機能で、できることはとても多いです。

初心者の人が初めから細部までこだわりすぎると挫折してしまう可能性があるので、まずはザックリと全体像を作っていきましょう。超初心者の方は、最初から完璧なサイトを作ろうとしなくて良いです。

それでなんとなく使い方のコツを掴んできたら、自分なりのカスタマイズを加えたり、未知の機能なども試してどんどんアップグレードしていけば良いと思いますよ!

1つ1つ理解を積み上げていくことが遠回りなようで最短距離となります。

それでは、いきましょう!

きつねコード
きつねコード

古民家カフェのホームページをそれっぽく作ってみます!完成度は低く、プロトタイプ的なものになるのでご自身で徐々にパワーアップさせてください!


カラー設定

まずは、「カラー設定」を覚えましょう!
サイト全体に統一感を出すための色の設定です。


  • step.1

    管理画面「外観」≫「カスタマイズ」をクリックします。

    wordpress管理画面「外観」≫「カスタマイズ」

    外観のカスタマイズで開くこの画面は、「テーマカスタマイザー」と呼ばれる画面です。頻繁に使いますので覚えておきましょう。

    今回は、カスタマイズメニューの」をクリックしましょう。

    lightningテーマの色のカスタマイズ

    キーカラーを、自分の好きな色に変更してください。いつでも変えられるので後からまた変えてもOKです。

    「キーカラー」は、サイト全体の細かい部分に反映されます。(ボタンやタグの色やプルダウンメニューの色、ボーダー色などが変わる)。ちなみに、「背景色」を変えるとサイト全体の背景に色がつきます。デザイン的なセンスが問われますがお好みでどうぞ。

    lightningのキーカラーを変更

サイトタイトルにヘッダーロゴ画像を設定

次は、サイトタイトル部分をオシャレに変更します。

画像素材を用意する必要があるので現時点でやらなくても良いですが、費用をかけずに出来ることですので方法としては知っておきましょう。

ちなみに、テキストを変更するだけであればテーマカスタマイザーの「サイト基本情報」のサイトタイトルから変更できます。(画像を設定しない人のみ)


  • step.1

    サイトのヘッダー部分にあるサイトタイトルですね。
    単なるテキストだけでも悪くはありませんが、味気ない感じはしますよね。

    lightningテーマのヘッダーサイトタイトル

    管理画面「外観」の「カスタマイズ」を開きましょう。
    今回は、サイトタイトル部分を修正したいです。テーマカスタマイザー画面に出ている横の鉛筆マークをクリックしてください。

    テーマカスタマイザー画面で「鉛筆マーク」を押すと、該当の設定箇所へと飛ぶことができます。便利なので覚えておきましょう。

    lightningテーマでサイトタイトルを修正

    そうするとLIghtningデザイン設定が開きました。「ヘッダーロゴ画像」が該当箇所です。ここにロゴ画像を入れてあげます。ロゴ画像の推奨サイズは、500×120pxです。

    ここで使うデザイン画像(ロゴ+テキストの入った画像)は自分で用意する必要があります。canvaというツールを使うとノンデザイナーの自分でも作れるのでオススメです。時間のある時にやってみてください。

    lightningテーマでサイトタイトルを修正

    今回は、canvaで自作したロゴデザイン画像を入れてみます↓。

    ロゴ画像のイメージ
    canvaで自作したデザイン画像

    サイトタイトルを変えると、だいぶ雰囲気が変わりますよね。

    lightningテーマでロゴ画像を設定

    実際に画像を入れてみて、おそらく大きさの微調整は必要になるかと思います。

    画像素材そのものの高さを変えたり、テキストやロゴの大きさを作り直してみて良き所を探してみてください。

    ヘッダー全体が伸びてしまいますが、「ロゴの最大高さ(pc・モバイル)」に数字を入れて調整しても構いません。

    (参考)canvaでデザインロゴ画像を自作する手順

    canvaを使うと素人でもそれっぽいデザイン画像を誰でも作れます。参考までに手順を載せておきますね。

    • canvaに会員登録する(無料)
    • 画面右上の「デザインを作成」≫「カスタムサイズ」から500×120pxで新規作成する
      • ちなみに一回試して文字が小さければ、500×100pxで作り直すなどの微調整は必要です。
    • 左側メニュー「テキスト」から、サイトタイトル(法人名やお店の名前)をまず入れる
      • 影や、湾曲などのエフェクトを入れたい人は、画面上部メニューの「エフェクト」から調整
    • ロゴを無料素材サイトから探してきて、左側メニュー「アップロード」からcanvaに取り込んで並べる
      • もしくはcanva有料プランにすると、AIでオリジナルロゴを作れます。左側メニュー「素材」の「独自のものを生成する」から可能です。有料プランも安いので全然アリだと思います。今回の事例もそれで5分ぐらいで作ったものです。
    • 完成したら、画面右上の「共有」の「ダウンロード」からPNG形式でダウンロードする
      • もし有料プランの人は、”透過画像にする"を選択できるので透過画像でダウンロードしましょう。

各固定ページを作成

次は、サイトの各ページを先に用意したいと思います。

サイト一番上のヘッダーメニューとなる部分です。ここの飛び先となるページだけ先に作ります。

lightningのメニュー

  • step.1

    ホームページの各ページは、『固定ページ』で作るのがオススメです。
    ニュースやスタッフブログなど更新性が高く、流れる内容は『投稿ページ』で作るのがオススメですが、不変的な内容は固定ページで作りましょう。。

    管理画面「固定ページ一覧」をクリックしてください。

    wordpress管理画面の「固定ページ一覧」

    新規固定ページを追加」をクリックしましょう。

    なお、デフォルトで最初から存在する固定ページはゴミ箱へ捨てて、ゴミ箱から完全に削除しても構いません。(もちろん編集して使っても良いです。)

    wordpressの新規固定ページを追加

    まずは、ページタイトルを書きましょう。中身は後から作れば良いのでとりあえず「現在準備中です。」とだけ入れておきます。

    今回はカフェのホームページを作っているので先ず「メニュー」を作ります。会社ホームページならば、会社案内、サービスの流れ、利用料金などご自身に必要なページをそれぞれ作りましょう。

    固定ページを作成する

    なお、必ずしも気にする必要はありませんが、wordpress初期設定の中でパーマリンクに『投稿名』を含めた設定にした人は、URLの編集が可能です。ここで、英語のurlに直してあげるのが一番オススメです。

    メニューならmenu、料金案内ならprice、会社案内ならabout(もしくはcompany)、アクセスならaccess、などのように書き換えてあげましょう。これがそのページのURLとなります。

    固定ページのパーマリンクを修正

    ※URLを編集できるのは、パーマリンク共通設定に『投稿名』を含んでいる場合です。
    ※URLを編集できるのは、記事を一度下書き保存もしくは公開したあとです。

    全て完了したら、右上の「公開」ボタンを押して構いません。

    同じ要領で固定ページを作り、最終的には例えばこんな感じになります↓。

    固定ページを作成

    ついでに、サイト一番下のフッターメニューに表示させたい固定ページも思いつけば作っておいても良いですね。「プライパシーポリシー」や「よくある質問」などでしょうか。

    各固定ページができたら、準備は完了なので次へと進みましょう!


ヘッダーメニューを設定

固定ページが用意できたので、サイト一番上のヘッダーメニューを設定します。

こちらの部分でしたね。

lightningのメニュー

  • step.1

    ヘッダーは、wordpressの「メニュー」機能を使うと簡単に完成します。便利な機能ですので必ず覚えましょう

    管理画面「外観」≫「メニュー」をクリックします。

    wordpress管理画面「メニュー」

    wordpressでメニューを扱うときには、必ずどのメニューを編集するのかを先に選んでから編集していきます。

    メニューは何個でも作れるので、今回はヘッダーメニュー用に1つ新規作成しま(既存のヘッダーメニューがある人は、それを編集しても良いです。)

    wordpressのメニュー作成

    まずはメニュー名だけ入力したら、一度「メニューを作成」を押して保存しましょう。

    wordpressのメニュー作成

    今編集しているのが「ヘッダーメニュー」であることを確認してから、

    画面の左側「固定ページ」から追加したいページにチェックを入れて「メニューに追加」をクリックします。
    そうすると、画面右側へと追加されます。

    wordpressのヘッダーメニュー作成

    画面右側のメニューでは、ブロックの順番を自由に動かすことができます。(クリックしながら動かす)

    また、下の事例のように階層構造も作れるのでお好きに組み替えてみてください。

    wordpressのメニュー作成

    そのほか各項目の三角マークを押して開くと、名称を変更することも可能です。

    wordpressのメニューのナビゲーションラベル

    もう1つぜひ覚えてほしい機能として、画面右上にある「表示オプション」をクリックしてみましょう。

    wordpressのメニューの表示オプション

    表示オプションの中の説明」にチェックを入れてください

    lightningテーマのメニューの表示オプション

    そうすると開いた各メニューの中で「説明」が書けるようになります。
    ここがキャプション(ホームページでよく見る形)になるので英語で入れてあげましょう。(任意です。)

    lightningテーマのメニューのキャプション設定

    メニューが完成したら、最後にメニューを表示する位置にチェックを入れます。今回はヘッダー用ですのでHeader Navigationにチェックをします。

    wordpressのメニュー作成

    サイト表示を確認してみましょう。

    きちんとヘッダーメニューができていますね↓。

    lightningテーマのヘッダーメニュー

    ちなみに、lightningテーマでは画面を下へとスクロールしたときに固定ヘッダーが現れる仕様となっています。これはすごく便利です。

    lightningテーマのヘッダー固定メニュー

    より一層大切な要素となるのでヘッダーメニューはぜひ設定しておくと良いでしょう。


フッターメニューを設定

次は、サイト一番下のフッターエリアを先にやっていきましょう。

lightningテーマのフッターエリア

補足:webサイトにおいて一番下のフッターエリアまでじっくり見る読者は少数派です。そういうユーザーは多くはいないので、正直後回しにしても大した影響はないです。時間が惜しい人は飛ばしても構いませんし、きっちり整えたい方は今やりましょう。もちろん綺麗に整えるに越したことはありません。

参考例として、2通りの方法をご紹介します。まずはお好きな方でやってみて、運営していく中でリッチにしていくのでも良いでしょう。

使う機能が異なりますので、初心者の方はパターン1パターン2にも目を通すとよろしいかと思います。


  • パターン1

    1つ目は、先ほどのヘッダーと同様に、フッターにも「メニュー」機能活用するやり方です。

    やり方は、さっきと一緒です。すぐにできます。

    管理画面「外観」≫「メニュー」から、フッター用のメニューを新たに作り、固定ページを自由に追加したら、Footer Navigationにチェックを入れましょう。

    lightningテーマでフッターメニューを設定

    これだけで、下のようにフッターメニューが表示されます。
    とてもシンプルな形ですが、ホームページとしてはこれだけでも十分ですよ。

    lihgtningテーマのフッターエリア

  • パターン2

    2つ目は、「ウィジェット」機能活用するやり方です。ウィジェットは今後も使うので必ず覚えましょう!

    管理画面「外観」≫「ウィジェット」をクリックします。

    wordpress管理画面「ウィジェット」

    ウィジェットを開くと、下のようにエリアごとに分かれていることがわかります。今回使うのはフッターですね。

    ウィジェットとは、特定の場所に、ブロックを挿入できる機能です。サイドバーやフッターなどの調整に便利です。

    lightningテーマのウィジェット

    試しにフッター部分の各ウィジェット段落ブロック(背景をつけたテキスト)を全て入れた状態をお見せします↓。

    lightningテーマのフッターウィジェット

    下部エリアは、3つに分かれているので使いやすいです。(ホームページのフッターでよく見かける形ですね。)

    それでは何かしらのブロックを入れてみましょう。
    まずフッターウィジェットエリア1で「ブロックを追加」プラスマークをクリックします。

    lightningテーマのウィジェット設定

    ブロックを追加のすべて表示」をクリックしましょう。

    lightningテーマのウィジェット追加

    すべて表示すると画面左側に使用できるブロックがズラーっと出てきます。

    これらのブロックは投稿ページや固定ページでも使えるブロックです。フッター向けではない要素もたくさんありますが、使えそうなブロックを探して好きなものを入れましょう

    lightningテーマのウィジェット設定

    今回はまず「ナビゲーションメニュー」というブロックを入れてみます。このブロックでは、自分で作成した「メニュー」を表示させることができます。

    ブロックによって中身の設定項目も異なります。どんなブロックなのかについては、1つ1つ実際に入れて使ってみることで試しながら学ぶしかありません。

    lightningテーマのウィジェット調整

    これで保存して確認すると、フッター左側にメニューが表示されていますね。

    lightningテーマのフッター調整

    同様に、フッターエリア2エリア3には、今回の事例ではそれぞれGoogleマップSNSアカウントを埋め込んでみましょう。

    MAPやSNSの埋め込み手順についてはここでは省略させて頂きます。実際にやりたい方は「wordpress Googleマップ埋め込み」などで別途ご検索ください。

    lightningテーマのフッターウィジェット調整

    保存したら、表示を確認してみましょう。

    ちなみに、ウィジェット機能は挙動がおかしくなる傾向(リアルタイム保存の影響で)もあるので、1つずつ保存していくのがオススメです。一気にやるのではなく。

    フッターエリアに、3つそれぞれ表示されましたね。

    lightningテーマのフッターウィジェット

    このようにウィジェットの組み合わせ次第でどのようにでも作れるのでお好みで設置してみてください。


(補足)フッター最下部にあるコピーライトpowered by wordpress〜〜Lightning〜〜の表記を消したい方もいるかもしれません。

lightningでは、有料ライセンスにすると簡単に消すことができます。

もし無料版で消したい方は、下記記事(事例は別のテーマですが)を参考にやってみてください。コードをいじるので専門的にはなります。

関連記事:wordpressでサイト下フッターの著作権表示powered by wordpressを消す方法

トップページメイン設定

次は、いよいよトップページのメインパートをさわっていきます。

lightning

このセクションでlightningテーマの核心的な使い方についても触れますので、初心者の方は必ず目を通してください。


  • 【トップスライドショー】

    まず先に、トップページ一番上の「スライドショー」部分について見ていきます。

    管理画面「外観」≫「カスタマイズ」の画面を開いたら、トップページスライドショー」をクリックしてください

    lightningテーマのカスタマイザー「トップページスライドショー」

    ここで、スライドを使わない人は非表示設定してください。
    スライドを利用する方は、表示テキストや、画像などの各種設定が下へと続いているので細かく見ていってください。

    lightningテーマのカスタマイザー「トップページスライドショー」設定

    今回の事例では、スライドショーは非表示にして進めますね。

    次へと進みましょう。


  • 【トップページに固定ページを表示】

    トップページのメインパートを作っていくのでしたよね。

    コツは、トップページに「固定ページ」を表示させる設定を使うことです。それによって自由度の高い構成を作ることができます。

    トップページ用の固定ページを1枚用意して、それを設定してあげます。順番に説明します。

    先に設定箇所だけ確認しますね。

    テーマカスタマイザー画面のホームページ設定」をクリックします。

    lightningテーマのカスタマイズ設定

    ホームページ設定を開くと、デフォルトでは「最新の投稿」になっていますが固定ページ」に変えると好きに選んで固定ページを表示することが可能です。

    lightningテーマのホームページ設定

    トップページ用の固定ページはまだ作っていないので、これから作りましょう!

    なお、もう1つ覚えておきたい設定としてテーマカスタマイザー画面のレイアウト設定」をクリックしてください。

    lightningテーマのレイアウト設定

    レイアウト設定のカラム設定へと進むと、「トップページ」を2カラムか1カラムか選ぶことができます。好みで決めて構いませんが、1カラムにすると画面を広く使えるのでホームページ作りにはオススメです。

    今回の事例では、1カラムの設定で進めますね。

    lightningのカラム設定

    それでは、トップページ用の固定ページを作っていきましょう!

    管理画面「固定ページ一覧」から新規固定ページを追加しましょう。

    lightningテーマで固定ページを作成

    タイトルだけ入力したら、先に2つだけ設定を行います。画面右上の黒い設定ボタン固定ページタブを開いて、レイアウト設定を1カラム(任意)、サイトコンテントの上下余白を無しにするにチェック(必ず)をしましょう。

    トップページに使用する固定ページなので上下余白は不要です。チェックを入れないと変な隙間が空いてしまいます。

    一度保存して「公開」ボタンを押しても構いません。

    lightningテーマの固定ページ設定

    次は、中身を入れていきます。プラスマークをクリックして、「すべて表示」を押しましょう。

    lightningテーマで記事制作

    ここが肝です。Lightningでは「パターン」という機能を使うことで初心者でもそれっぽいホームページをすぐに作ることができます。

    lightningテーマのパターン

    パターンとは、ブロックのかたまりテンプレート)です。部分的なレイアウトから、ページ丸ごとのレイアウトまで様々用意されているので、上から下までまずはざっと見てみてください。

    このように、パターンが用意されています↓。

    lightningテーマのパターン

    試しにどれかを入れてみてください。
    パターンを入れた後は、テキストを書き換え、画像を張り替え、ボタンリンクを入れるなど中身を変えるだけでOKです。

    なお、「プレビュー確認」ボタンは画面右上にあります!実際の画面を確認できます。

    lightningテーマのプレビュー確認

    パターンは、各ブロックによって構成されています。もちろん編集も可能です。

    各ブロックをクリックした状態で画面右側の設定メニューに目を通してみましょう。各所カスタマイズすることも可能ですよ。

    画面右側で用意されている設定項目は、各ブロックによって異なります。

    lightningテーマでパターンを使う

    基本的には、もうこれだけです。

    パターンを活用して、中身を変えて、組み合わせて好きに作っていくだけになります。

    とはいえ、上手なサイトを作るには結構センスもいりますが、とにかく試行錯誤を繰り返してみましょう。

    lightningテーマでパターンを活用して制作

    使えるパターンは、Lightning公式サイトでも多く公開されています

    参考リンク:Lightningのパターンライブラリ(公式サイト)

    ここにアクセスして、「Lightning」かつ「無料」で絞り込み検索すると良いと思います。

    ここからみても、”有料ライセンス”にすると何かと選択肢が増えることが分かりますね。有料版を使いたい方は要検討ですね〜。

    lightningテーマのパターンライブラリ

    パターンライブラリを使うには、「コピーする」ボタンを押して、wordpressで貼り付けをするだけです。

    好みのパターンを探してみましょう。

    lightningテーマのパターンライブラリ

    固定ページが完成したら、保存、公開をしてください。

    最後に、テーマカスタマイザー画面のホームページ設定で固定ページを選択するのでしたね。

    lightningテーマのホームページ設定

    そうすると、例えばこんな感じのトップページが完成します。


細かい部分は徐々にこだわって修正していけば良いので、まずはざっくりと全体像を完成させると良いです。

なお、パターンを使用してもなかなかうまいこといかないケースも多いと思います。私自身もデザインには非常に疎いので、センス良く作るのは難しいです。

そのような場合には、既存のホームページを見て学ぶのがおすすめです。

こういう構成は使えるな、こういう組み合わせが綺麗だな、と他の人のサイトを眺めていると非常に勉強になります。

同じくLightningを使っているサイトや、自身と同じジャンルのホームページなどを検索して参考にさせて頂きながら作ってみると良いかもしれませんね。もちろん、丸パクリはダメですよ!あくまで参考にです。

参考リンク:Lightningのサイト事例はこちらから検索できます

残りの各固定ページの中身やウィジェット(サイドバーなど)の調整

あとは、残していた各固定ページの中身も編集していきましょう。
(メニュー、アクセス、会社案内など各ページの中身は空の状態でしたね。)

トップページ用固定ページを作ったのと同じ要領で、パターン機能を活用しながら進めると、簡単でかつ綺麗に作れると思います。

各固定ページの場合は、必ずしも1カラムでなくても良いでしょう。

その場合は、「サイドバー」が表示されますが、サイドバーは管理画面「外観」≫「ウィジェット」のサイドバーから編集できます。これも既にやっているのでウィジェット機能で調整してください。


以上で、Lightningの超基本的な使い方に関してはおおよそマスターできているかと思います。

やりながら細かい部分でわからないことが出てきたら、都度調べながら設定を進めてみましょう。「lightning やりたいこと」で検索すると大体出てくるかと思います。

まとめ

lightningテーマを使って、ホームページの形はできましたでしょうか?

初めて触る人にとっては、難しい部分も出てくるかもしれませんが、1つ1つ理解していくことが遠回りなようで近道です。

無料なのにこれほど高機能なホームページ向け無料テーマは他にないので、ぜひマスターして素敵なサイトを完成させてください!

  • この記事を書いた人

きつねコード

webディレクター/プログラマー。 web系の経験が10年以上あり、webサービスの立ち上げやメディア運営などをやっていました。若い時に起業していた時期もあるので、守備範囲は結構広めです。パソコンが苦手な人からの質問も受けるので、参考になればとの想いで当ブログを始めました。

人気記事

wordpressのおすすめテーマはこれ 1

この記事を書いているきつねコードは、10年以上wordpressに触れており、自身でもブログを運営しています。 当記事で紹介する以外にも、多くのwordpres ...

おすすめのASP 2

登録必須のおすすめASP(ブログ初心者〜上級者) ブログやサイトを作成したら、まずASPヘの登録は行いましょう。 結論を言うと、初心者でも上級者でも下記の王道5 ...

ラッコキーワードの使い方を徹底解説! 3

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

cocoonからaffinger6への移行手順 4

他のテーマからaffinger6へ移行する場合もチェック項目は大体同じですので、参考にしてみてください。 結論:cocoonとaffingerどっちが良い?移行 ...

cocoonからswellに移行する全手順 5

他のテーマからswellへ移行する場合でも、確認することとしては大体同じ手順となります。ご参考にしてみてください。 結論:cocoonとswellどっちが良い? ...

AFFINGERタグ管理マネージャーとPVモニター 6

この記事でわかること 初心者に、「タグ管理マネージャー&PVモニター」が良い理由 Affinger6の専用プラグイン「タグ管理マネージャー」の使い方 Affin ...

-テーマ, ブログ・wordpress運営
-, ,