【企業ホームページの作成に】 Lightning Proの使い方

WordPress

【徹底解説】WordPressテーマLightning Proの使い方

投稿日:2019年9月1日 更新日:

WordPressの有名な無料テーマ「Lightning」の有料版テーマ「Lighting Pro(ライトニング プロ)」の使い方を解説していきます。
 

Lightning Proを購入したんですが、いまいち使い方がわからなくって・・・

Lightning Proは無料版よりも高機能なぶん、最初は使い方がいまいちわからないですよね。今回はLightning Proの使い方を説明していきますね。

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

次章の見方について

ホームページ Unavaiable(※)2019年8月時点の内容です。

記事執筆以降で、仕様変更や機能の追加や削除などがあったり、画面が異なっている場合などもあり得ますのでご了承ください。

最新の正確な情報・利用ルールは公式サイトをご確認いただけたらと思います。

 
 

はじめに。LightningProと無料版Lightningの違い

LightningPro」は無料の人気テーマ「Lightning」の有料版テーマです。Lightning Proでは、無料版Lightningよりもさらに高機能で、品質の高いビジネス系ホームページが簡単に構築できます。これから新規でホームページを作る方にも、すでにLightningを利用している方にもオススメのテーマです。
 

LightningとLightning Proの主な機能の違いとしては下記の通りです。

機能LightningLightning Pro備考
ページヘッダー機能×固定ページや投稿のヘッダー部分に任意の画像を設定できる機能
アーカイブページレイアウト変更機能×投稿(カスタム投稿)のアーカイブページを表示変更できる機能
Media Posts機能×投稿(カスタム投稿タイプも対応)をいくつかのレイアウトパターンでウィジェットとして挿入できる機能
スマホ時固定ナビ機能×スマートフォン表示で下部に固定メニューバーを表示する機能
見出しデザイン変更機能×見出しのデザインタイプを変更する機能
ヘッダー上部設定×ヘッダーの最上部にボタンや電話番号を表示する機能b
フォント切り替え機能×フォントタイプをゴシックや明朝体など変更する機能
フッターコピーライトカスタマイズ機能×フッターのコピーライト表記を任意の文言に変更する機能
Google Tag Manager連携機能×GoogleタグマネージャーのIDを設定する機能
ウィジェットの配置エリア◎(種類増)

(※注)2019年8月時点で確認した内容です。
 

無料版のLightningでも無料テーマの中ではかなり高機能ですが、Lightning Proは無料版に加えて、Media Posts機能、ページヘッダー機能やデザイン切り替えなど、さらにテーマとしての機能性が高くなっています。
 

Lightning Proを使ってみた感想については、「【Lightning Proってどう?】無料版との違いやデメリットも解説」をご参照ください。

【Lightning Proってどう?】無料版との違いやデメリットも解説


 
 

Lightning Pro(ライトニングプロ)を導入する

Lightning Proをインストールする

まずは、Lightning Proをインストールしましょう。公式サイトからLightning Proを購入後、会員ページにて、Lightning Proをダウンローしていてください。
 

ダウンロードと同時にライセンスキーを コピーしておきましょう。 (バージョンアップ設定で必要になります)
ダウンロードと同時にライセンスキーを コピーしておきましょう。 (バージョンアップ設定で必要になります)
 

ダウンロードしたlightning-pro.zip 解凍せずにzipのままにしておきます。
ダウンロードしたlightning-pro.zip 解凍せずにzipのままにしておきます
 

外観>テーマよりLightning Proをインストールしていきます。
WordPress 外観>テーマ

新規追加ボタンを押下します。
WordPress テーマ 新規追加
 

テーマをアップロードボタンを押下します。
テーマをアップロードボタンを押下します。
 

ダウンロードしたlightning-pro.zipを選択してアップロードします。
今すぐインストールを選択
 

有効化を選択します。
lighting-proを有効化
 

以上で完了です。トップページを開き、Lightning Proの画面に切り替わっているか確認しましょう。
Lightning Pro トップページ
 
 

Lightning Proのバージョンアップ設定をする

続いて、バーションアップのためにライセンスキーの設定をしていきます。トップページで「カスタマイズ」を選択します。
トップページで「カスタマイズ」を選択
 

Lightningライセンスキーを選択します。
カスタマイザー>Lightningライセンスキーを選択
 

LightningライセンスキーでLightning Proダウンロード時にコピーしたライセンスコードを入力して公開ボタンを押下します。
カスタマイザー>Lightningライセンスキーでライセンスコードを入力
 

以上でバージョンアップのための基本設定は完了です。
 

実際にLightning Proをバージョンアップしたい場合は、ダッシュボード>更新から確認・更新することができます。
ダッシュボード>更新
 

Lightning Proの最新版がある場合は、チェックを入れて更新ボタンを選択してバージョンアップすることができます。更新版がある場合は初期の段階でバージョンアップしておきましょう。
lightning proにチェックを入れて更新ボタンを選択してバージョンアップします
(※)バージョンアップはバックアップをとって復旧できる状態にした上で実施しましょう。
 

(※)Lightning Proはライセンスキーを入力していないとバージョンアップ時にエラーが起きてバージョンアップできないので注意してください。
ライセンスキーを入れないとバージョンアップエラーがおきます。
 
 

VK All in one Expansion Unit (VK EXUnit)をインストールする

VK All in One Expansion Unit
 

Lightning系のテーマを利用する場合、無料のオプションプラグイン「VK All in One Expansion Unit(以下 VK EXUnit)」を入れるとさらに色々な機能を利用することができます。
 

EX Unitの主な機能抜粋

  • PR Block
  • 子ページインデックス表示機能
  • お問い合わせ先情報表示
  • コールトゥアクション(CTA)表示
  • 独自のウィジェットアイテム
  • HTMLサイトマップ出力

 

ここでは、VK ExUnitも導入しておきましょう。プラグイン>新規追加を選択します。
プラグイン>新規追加
 

VK All in One Expansion Unitを今すぐインストール&有効化します。
VK All in One Expansion Unit
 

インストール後はダッシュボード上部に「EXUnit」という項目が追加されていますのでここで設定を行なうことができます。

 

VK EXUnitの使い方はここでは割愛します。「WordPressテーマLightning(ライトニング)の使い方【VK All in one Expansion Unitも解説】」に詳しい設定を紹介していますので合わせてご覧いただけたらと思います。
 
 

Lightning Proの便利な機能を利用する

それでは、Lightning Proのよく使う便利な機能を紹介しながらホームページを完成させていきます。
 

事前に固定ページの作成とメニューバーの設定をしておきましょう。
Lightning Pro固定ページ作成とメニューバー設定
 

ページヘッダーを設定する

ページヘッダー機能は、固定ページや投稿のヘッダー部分に任意の画像を設定できる機能です。無料版のLightningに比べてよりデザイン性を高めることができます。
 

■有料版Lightning Proのページヘッダー機能
有料版Lightning Proのページヘッダー機能

■無料版Lightningのページヘッダー機能
無料版Lightningのページヘッダー機能%

 

ページヘッダーの基本設定は、トップページ>カスタマイズ>Lightningページヘッダー設定から設定できます。
カスタマイズ>Lightningページヘッダー設定
 

基本・固定ページ・投稿など各機能ごとに画像を選択できます。いくつか設定する箇所がありますが、ここでは固定ページに対して画像を選択しましょう。
カスタマイズ>Lightningページヘッダー設定>固定ページで画像を選択
 

同時に高さや文字の色・影などを必要に応じて設定して公開します。
Lightningページヘッダー設定>画像・文字・高さを選択
 

同様にして投稿のヘッダー画像も変更してみましょう。
Lightningページヘッダー設定>投稿欄に画像を設定
 


 

なお、固定ページの場合は、各ページ個別にもヘッダー画像を設定できるので、固定ページごとに画像を切り替えることができます。
Lightning Pro固定ページヘッダー機能
 

適用される画像の優先順位は下記の通りです。

  1. 固定ページ編集画面で個別に設定した画像
  2. Lightningページヘッダー設定で固定ページ欄に対して設定した画像
  3. Lightningページヘッダー設定で基本欄で設定した画像

 
 

アーカイブページのレイアウト表示を切り替える

アーカイブページの表示切り替え機能は、アーカイブページ(投稿一覧やカスタム投稿タイプ一覧)のレイアウトデザインを変更する機能です。
 

Lightningアーカイブ設定を選択します。
Ligntning アーカイブページレイアウト設定
 

ここでは、投稿に対してレイアウト「縦カード画像大3カラム」を選択して公開してみましょう。
Lightningアーカイブページレイアウト設定でレイアウトを選択
 

そのほか好み・運用に合わせて好きなレイアウトを設定して試してみてください。


 

なお、カスタム投稿タイプがある場合は、カスタム投稿タイプに対しても上記のアーカイブページレイアウトの設定ができます。

 

Media Postsを挿入して投稿一覧を挿入する

投稿をいくつかのレイアウトパターンでウィジェットとして挿入できる機能です。レイアウトパターンは前述のアーカイブページレイアウトで設定したレイアウトから選択できます。
 

Media Postsをウィジェットとして追加することで、投稿一覧を下記のようにビジュアライズに表示することができます。
LTG MediaPostsの説明
 

このMedia Postsは、カスタム投稿タイプでも利用できるので、付属の無料オプションプラグイン「VK All in one Expansion Unit」でカスタム投稿タイプを作り、カスタム投稿をMedia Posts機能で表示させることで、商品一覧や人物一覧もビジュアライズに表示することができます。
 

ここでは、基本的な使い方を説明します。外観>ウィジェットを選択します。
外観>ウィジェット
 

ウィジェット画面が表示されます。Lightning Proでは、「LTG Media Posts」というウィジェットがあるので、任意のエリアに挿入できます。ここでは、トップページコンテンツエリア上部に挿入しましょう。
LTG Media Postsを任意のエリアに挿入する
 

MediaPostsの設定を行い保存します。
LTG Media Postsの設定
 
■LTG Media Postsの主要な設定項目

  • タイトル:任意のタイトル(見出し)を入力します。
  • 表示形式:レイアウトのパターンを1つ選択します。
  • 表示件数:一覧で表示したい表示件数を設定します。
  • 表示させたい投稿タイプのスラッグ:通常(投稿)の場合はそのまま(post)でOK。カスタム投稿タイプの場合は投稿タイプIDを入力します。
  • カテゴリー(ターム)ID:通常は空白のままでOKです。カテゴリーを絞って一覧表示することもできます。絞る場合は、対象のカテゴリーIDを設定します(スラッグではないので注意)

 


 

Media Posts機能は、カスタム投稿タイプも対応しているので、商品一覧や人物一覧などを運用したい場合に非常に便利な機能です。
 

(補足)カスタム投稿タイプとは

新着情報・コラム記事・製品一覧といったように、投稿以外にも複数別のジャンルで投稿のように一覧作成したい場合もでてきます。そのようなニーズに適しているのが「カスタム投稿タイプ」です。カスタム投稿タイプは、「固定ページ」「投稿」のほかに新たに別の「投稿」を作成する機能になります。
 

カスタム投稿についての詳しい説明や作り方は「WordPress カスタム投稿タイプとカスタムタクソノミー(カスタム分類)を徹底解説」をあわせてご参照ください。
 
カスタム投稿タイプの例 「WEBST8動物園」

 

ページビルダーを使って任意のページにMedia Postsを挿入する

「Page Builder By Site Origin」というプラグインを利用すれば、LTG Media Postsを任意の固定ページや投稿のページにウィジェットとして挿入することができます。
 

(※)レイアウト作成に便利なプラグイン「Page Builder(ページビルダー)」で、HTMLやCSSの知識がなくても、ブロック感覚でページを作成できます。主にホームページ型のサイト作成時に重用できる非常に便利なプラグインです。
 


 

ページビルダーの説明図 ブロック感覚でコンテンツを作っていく
 

ページビルダーを使い方については「【WordPress ページビルダー】Page Builder By SiteOriginの使い方を徹底解説」をご参照ください。
 

下記は、ページビルダーを使って、LTG Media Postsを挿入する方法です。


 
 

スマホ時固定ナビを使う

スマホ時固定ナビ機能は、スマートフォン表示で下部に固定メニューバーを表示する機能です。


 

カスタマイズ>Lightningモバイル固定ナビを選択します。
カスタマイズ>Lightning モバイル固定ナビ
 

「モバイル固定ナビを表示しない」にチェックを入れます。スマホ・タブレット表示の際に下部分に固定ナビゲーション(メニューバー)が表示されます。
Lightning モバイル固定ナビの設定
 

最近では、スマートフォンの方がアクセスが多いので、スマホでの利便性を高めるのに良い機能ですね

 
 

見出しデザインを変更する

見出しデザイン変更機能は、見出しのデザインをいくつかのパターンから選択する機能です。


 

カスタマイズ>Lightningデザイン設定を選択します。
カスタマイズ>Lightningデザイン設定
 

見出しの設定をいくつかのデザインパターンから選択することができます。
Lightningデザイン設定>見出しの設定
 

たしか、以前は見出しデザイン変更機能はなかったんですが、最近新しく実装された機能のようです。

こんなかんじで、どんどん新機能が追加されていっているんですね!

 
 

ヘッダー上部にボタンと電話番号を表示する

ヘッダー上部設定は、ヘッダーメニューバーの上部にキャッチコピーや電話番号、お問い合わせボタンなどを表示する機能です。
Lightning ヘッダー上部設定
 

カスタマイズ>Lightningヘッダー上部設定を選択します。
カスタマイズ>Lightningヘッダー上部設定
(※)JpnStyleなどデザインオプションによっては利用できない場合があります。
 

Lightningヘッダー上部設定
 

なお、ヘッダー上部設定の左側の「Just another WordPress site」は、設定>一般設定のキャッチフレーズ欄から変更することができます。
キャッチフレーズの変更方法は「【1分設定】WordPressのサイト名とキャッチフレーズを変更する」をご参照ください。
 
 

フォントファミリーを切り替える

フォント切り替え機能は、本文やタイトルのフォントを明朝体やゴシック体などに変更する機能です。利用シーンは少ないかもしれませんが、必要に応じて設定しましょう。
 


 
 

フッターコピーライトを設定する

フッターコピーライト機能は、フッターのコピーライトを任意の文言に変更する機能です。
Lightning pro フッターコピーライト設定
 

コピーライトの変更は、無料版LightningでもCSSや子テーマを利用すれば削除・変更することはできますが、Lightning Proでは管理画面から簡単に変更することができるようになっています。
 
 

Google Tag ManagerのIDを入力する

Google Tag Manager連携機能は、GoogleタグマネージャーのIDを設定する機能です。
Lightning pro Google タグマネージャー機能
 

使う人は限定されると思いますが、タグマネージャーを利用する人は利用してみましょう。
 

(補足)ウィジェットの配置エリアの種類の追加

Lightning Proでは、無料版のLightningよりもウィジェットの配置エリアが増えています。
 

ウィジェットで、無料版にはないトップページコンテンツエリア左・右・下が追加されます。必要に応じて使いましょう。
Lightning オプション和風デザインスキン JPNStyle 拡張ウィジェット トップページコンテンツエリア
 

(補足)無料版Lightningでも利用できる設定

ここでは、補足として、無料版Lightningでも利用できる設定をご紹介します。
 

トップページスライドショーを変更する

Lightningの場合は、「Lightning トップページスライドショー」からスライドショーの設定変更ができます。
Lightning トップページスライドショー
 

実際に変更してみましょう。下記のようにスライドショーの画像を変更して「公開」ボタンを押せば完了です。


 
 

メインカラー変更する

つづいて、メインカラーを変更してみましょう。「Lightning デザイン設定」を選択します。
カスタマイザー > Lightning デザイン設定
 

早速色を変更してみましょう。ここでは、緑系統から赤系統の色に変更しました。


 

ロゴを変更する

同様に、「Lightning デザイン設定」から、ロゴの変更もできます。


 

トップページを1カラムにする

同様に、Lightning デザイン設定から、トップページを1カラムに変更することもできます。


 

ここでは割愛しますが、そのほかにも色々な設定ができますので、ぜひ試してみてください。
 

まとめ Lightning Proを使いこなそう

いかがでしたでしょうか。今回は、WordPressの有料テーマ「Lighting Pro(ライトニング プロ)」の主要な使い方について説明しました。
 

LightningとLightning Proの主な機能の違いとしては下記の通りです。

機能LightningLightning Pro備考
ページヘッダー機能×固定ページや投稿のヘッダー部分に任意の画像を設定できる機能
アーカイブページレイアウト変更機能×投稿(カスタム投稿)のアーカイブページを表示変更できる機能
Media Posts機能×投稿(カスタム投稿タイプも対応)をいくつかのレイアウトパターンでウィジェットとして挿入できる機能
スマホ時固定ナビ機能×スマートフォン表示で下部に固定メニューバーを表示する機能
見出しデザイン変更機能×見出しのデザインタイプを変更する機能
ヘッダー上部設定×ヘッダーの最上部にボタンや電話番号を表示する機能b
フォント切り替え機能×フォントタイプをゴシックや明朝体など変更する機能
フッターコピーライトカスタマイズ機能×フッターのコピーライト表記を任意の文言に変更する機能
Google Tag Manager連携機能×GoogleタグマネージャーのIDを設定する機能
ウィジェットの配置エリア◎(種類増)

(※注)2019年8月時点で確認した内容です。
 

結論としては、非常に使い勝手が良くホームページを作成するのにおすすめのテーマです。なお、デザインオプションも利用すると多彩なテイストのホームページも作れますので、合わせて参考にしてみてください。

 

 

 

 

 

本記事を読む前に読んでおきたい記事

●WordPressの基本的な使い方:【2019年版WordPress(ワードプレス)の使い方総まとめ】

●無料テーマLightningの使い方:WordPressテーマLightning(ライトニング)の使い方【VK All in one Expansion Unitも解説】/

 

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, , ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.