【2021】Amazonタイムセール祭りでお得に買い物する方法

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

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

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

 

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

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

本記事はLightningの最新バージョン、G3(Ver.14~)を元に解説しております。
スポンサーリンク

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

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

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

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

Lightningテーマに限らず、全てのテーマに共通しています。

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

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

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

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

 

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

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

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

  • ①:サイト基本情報
  • ②:色
  • ③:背景画像
  • ④:メニュー
  • ⑤ウィジェット
  • ⑥:ホームページ設定
  • ⑦:追加CSS
  • ⑧:Lightning CSS最適化(高速化)設定
  • ⑨:Lightning 機能設定
  • ⑩:Lightning デザイン設定
  • ⑪:Lightning トップページスライドショー
  • ⑫:Lightning レイアウト設定
  • ⑬:Lightning モバイルナビ
  • ⑭:Lightning Font Awesome
  • ⑮:ExUnit 設定

上記のとおりです。

①:サイト基本情報

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

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

  • ①サイトのタイトル:WordPressの一般設定に移動しなくても、ここでサイトのタイトルを変更できます。
  • ②キャッチフレーズ:キャッチフレーズを変更できます。初期の「Just another~」は不要なので削除しましょう。
  • ③サイトアイコンを選択:サイトアイコンとは、ブラウザのタブや、ブックマークやお気に入りに入れた際に表示されるアイコン画像です。

 

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

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

②:色

背景色を変更できます。

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

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

③:背景画像

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

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

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

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

④:メニュー

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

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

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

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

  • Header Navigation → ヘッダーメニュー
  • Footer Navigation → フッターメニュー
  • Mobile Navigation → スマホでアクセスした際に表示するメニュー

⑤:ウィジェット

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

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

ページに表示されているウィジェットを編集しやすくするための仕様です。

 

⑥:ホームページ設定

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

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

⑦:追加CSS

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

CSSとは、HTMLで記述したサイトの見た目を装飾などで整えるためのマークアップ言語となります。文字の色・大きさ・フォントを定義します。

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

使用するテーマによっては追加CSSで書き加えた内容がうまく反映されない場合があります。もし、反映されない場合、直接CSSファイルを編集すると反映されます。

 

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

⑧:Lightning CSS最適化(高速化)設定

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

  • Tree shaking:不要な定義を振るい落とします。
  • Preload CSS:CSSのプリロード設定
CSSをカスタマイズしていない方は使うことは無いと思います(制作向け)。

⑨:Lightning 機能設定

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

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

  • 2021年5月11日以降:G3(Ver14) → 何もしない
  • 2021年5月10日以前:G2(Ver13) → 早めに切り替える必要あり(ただし、レイアウトが変わる可能性があるので要バックアップ)

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

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

⑩:Lightning デザイン設定

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

  • ①デザインスキン
  • ②ヘッダーロゴ画像
  • ③色設定:キーカラー

上記の順に紹介します。

デザインスキン

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

  • Origin III(デフォルト)
  • Plain(カスタマイズ用)

デフォルトは「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の設定変更を行います。

普通に運営していて、Font Awesomeの設定を変える事はないと思います(この記事を書いている筆者も、触った記憶がほとんど無いです)。

⑮:ExUnit 設定

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

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

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

  • SNSシェアボタンのカラー変更
  • お問い合わせ情報の設定

上記のとおりです。

SNSシェアボタンの色変更

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

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

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

お問い合わせ情報の設定

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

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

  • ①メッセージ:電話番号の上のメッセージを設定できます。
  • ②電話番号:お問い合わせ先の電話番号を設定します。
  • ③電話アイコン:アイコンを編集できます。
  • ④営業時間:電話番号の下の営業時間の表示を設定できます。
  • ⑤お問い合わせ先URL:お問い合わせページのURLを入力します(入力したURLはページ下部とサイドバーウィジェット共通設定となります)。
    ちなみに、お問い合わせフォームの作成方法は「【WordPress】お問い合わせフォームを簡単設置!Contact form 7の使い方」をどうぞ。
  • ⑥お問い合わせボタンに表示するテキスト:お問い合わせボタンのテキストを設定します。

  • ⑦お問い合わせボタンに表示するテキスト2(オプション):お問い合わせボタンの下にメッセージを追加できます(ページ下部・サイドバーウィジェット共通設定)。
  • ⑧お問い合わせボタンウィジェットに表示するテキスト:サイドバーウィジェットのお問い合わせボタンのタイトルを編集できます。
  • ⑨お問い合わせバナー画像:お問い合わせ情報のバナー画像を用意している場合、画像に差し替え可能です。
  • ⑩お問い合わせ情報として表示するHTML:任意のテキストやHTML情報を表示させたい場合、HTMLを入力すると、お問い合わせ情報を差し替え可能です。

 

まとめ

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

 

 

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

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

トップへ戻る
タイトルとURLをコピーしました