【WordPress】外観のカスタマイズの使い方【Lightningテーマ】

WordPressにLightningテーマをインストールしていて、外観のカスタマイズの使い方をお探しの方向け。

Webサイトの外観をカスタマイズする場合、通常、HTMLやCSS、PHP等の知識が必要となりますが、WordPressは管理画面からWebサイトの外観を簡単にカスタマイズできます。

この記事では、Lightningテーマの外観のカスタマイズの使い方を解説します。

Lightningテーマの外観のカスタマイズ方法

WordPressでLightningテーマをお使いの方向けに、外観のカスタマイズ方法を解説します。

カスタマイザーを立ち上げる

カスタマイザーはダッシュボード左側メニューにある「カスタマイズ」という項目を選択すると立ち上がります。

ダッシュボード＞外観＞カスタマイズ を選択します。

下図のようにカスタマイザーが立ち上がります。

カスタマイザーを使うと、プレビュー表示をしたまま外観を変更できます。

各項目の詳しい設定方法は、次のパートで解説していきます。

Lightningテーマの外観のカスタマイズの使い方を15項目解説

Lightningテーマの外観のカスタマイズ項目は、上図にも記載されているとおり、15項目あります（G3/Ver14）。

項目ごとに何ができるかを以下の順に解説していきます。

上記のとおりです。

①：サイト基本情報

サイト基本情報では、「サイトのタイトル」と「キャッチフレーズ」を編集できます。

各項目の詳細は次のとおりです。

なお、Lightningテーマはキャッチフレーズを設定しても、サイト内で表示されることはありません。

検索結果、SNS（Twitter、Facebookなど）でシェアされた際にキャッチフレーズが表示されます。

②：色

背景色を変更できます。

カラーピッカーを使って、自由に背景色を変更できます。

元に戻したい時は、「クリア」をクリックすれば初期状態（白）に戻せます。

③：背景画像

背景画像を設定できます。

「画像を選択」をクリックして、背景画像にしたい画像を選択します。試しに、テクスチャ画像を設定してます。

下図のように、サイトの背景に画像が設定できます。

カスタマイザーのメニューで、画像の位置、画像サイズ、背景画像の栗明史、ページと一緒に繰り返しなど、自由に設定できます。

④：メニュー

メニュー項目では、メニューの新規作成やメニュー位置を設定できます。

なお、メニューの作成方法が分からない方は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」という記事で解説していますので、ぜひ参考にして下さい。

設定可能なメニュー位置は3ヶ所

カスタマイザーで設定可能なメニュー位置は3ヶ所です。

⑤：ウィジェット

カスタマイザーで表示を確認しながらウィジェットを設定できます。

なお、ここで表示されるウィジェットは、右側のプレビュー画面で表示されているウィジェットのみ表示されます。

⑥：ホームページ設定

ホームページ設定は、カスタマイザーでトップページの表示設定をできます。

設定＞表示設定 に移動しなくても、トップページの表示を確認しながら投稿・固定ページの切り替えが可能です。

⑦：追加CSS

追加CSSは、テーマエディタのCSSを使用せずにCSSを追加できる機能です。

簡易的なカスタマイズを行う場合は追加CSSを使用します。

使い方の事例を以下の記事で紹介していますので、興味のある方は是非どうぞ。

⑧：Lightning CSS最適化（高速化）設定

LightningテーマのCSS最適化（高速化）設定を行います。

• Tree shaking：不要な定義を振るい落とします。
• Preload CSS：CSSのプリロード設定

⑨：Lightning 機能設定

Lightning機能設定ではテーマの世代設定を行います。

世代設定は、Lightningテーマのインストールを行った時期によって異なります。

2021年5月11日以降にLightningテーマを使い始めた方は、何もする必要はありません。

それ以前に使っていた方はテーマを最新バージョンにアップデートした上で、G3に切り替えるようにしましょう（切り替えるとレイアウトが大きく変わる可能性があるので、事前にバックアップを取得しておきましょう）。

⑩：Lightning デザイン設定

Lightning デザイン設定で設定可能な項目は3つあります。

上記の順に紹介します。

デザインスキン

デザインスキンは2つあります。

デフォルトは「Origin III」がセットされています。

「Plain」は、公式サイトの解説を見ると、カスタマイズ用のスキンとなっています。

Lightning G3ではデフォルトのスキン「Origin III」以外に独自デザイン用の「Plain」をご用意しました。「Plain」を選択していただくと、独自でデザインを変更したい場合に不要になりやすいCSSを予め省いてあるため、CSSの打ち消し作業を軽減できます。

参照：Lightning G3 | 2021年5月リリース！

カスタマイズしない方は、スキンを変更することはありません。

ヘッダーロゴ画像

ロゴ画像を設定できます。

ロゴ画像を設定しない場合、Webサイトのタイトルがそのままテキストで表示されます（気にならない方はこのままで問題ありません）。

なお、ロゴ画像を設定される方は「【WordPress】Lightningテーマの使い方ガイド」で詳しく解説していますので、是非どうぞ。

色設定

色設定ではサイトのキーカラーを設定できます。

キーカラーは、見出しの色やサイドメニューの配色、ボタンのマウスオーバー時の配色が変更できます。

色を選ぶ際に参考になるサイト

サイトの配色を考える際に、参考になるサイトを6つ紹介します。

上記のサイトでお好みの配色を探してみましょう。

⑪：Lightning トップページスライドショー

Lightningテーマのヘッダー画像を設定します。

具体的な設定方法は「【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】」という記事で解説していますので、是非どうぞ。

⑫：Lightning レイアウト設定

Lightningレイアウト設定で行える設定はカラム設定・サイドバー設定の2つです。

各設定項目を個別に解説します。

上記の順に解説します。

カラム設定（PC閲覧時）

PC閲覧時のカラム設定をページタイプごとに設定できます。

サイドバー設定

サイドバーの位置（左・右）、サイドバーの固定表示を設定します。

⑬：Lightning モバイルナビ

モバイルアクセス時に表示される、メニューボタンの表示設定を行います。

メニューボタンの位置や、メニューのスライド方向を設定できます。

⑭：Lightning Font Awesome

Font Awesomeの設定変更を行います。

⑮：ExUnit 設定

Lightning推奨プラグイン「VK All in One Expansion Unit（ExUnit）」の設定変更をカスタマイザーでプレビュー表示しながら設定できます。

なお、ExUnitの使い方は「【WordPress】ExUnitの使い方を解説【Lightningテーマ】」をどうぞ。

ちなみに、本記事では、以下2つの設定方法を解説します。

上記のとおりです。

SNSシェアボタンの色変更

カスタマイザーでソーシャルボタンのスタイル設定ができます（カスタマイザーのみの機能です）。

上図は通常のSNSシェアボタンの色ですが、下図のように配色を消すことができます。

カラーピッカーを使ってSNSシェアボタンの色を自由に変更できます。

お問い合わせ情報の設定

カスタマイザーを使ったお問い合わせ情報の設定方法を解説します。

各項目の設定方法は次のとおりです。

まとめ

以上、Lightningテーマの外観のカスタマイズの使い方を解説しました。

人気記事【無料あり】メール配信システムおすすめ比較7選【選び方・比較表】

人気記事簡単にネットショップを開業できるおすすめツール6選【無料あり】