WordPressにLightningテーマをインストールしていて、外観のカスタマイズの使い方をお探しの方向け。
Webサイトの外観をカスタマイズする場合、通常、HTMLやCSS、PHP等の知識が必要となりますが、WordPressは管理画面からWebサイトの外観を簡単にカスタマイズできます。
この記事では、Lightningテーマの外観のカスタマイズの使い方を解説します。
好きなところから読めます
Lightningテーマの外観のカスタマイズ方法
WordPressで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を使用します。
使い方の事例を下記記事で紹介していますので、興味のある方は是非どうぞ。
⑧:Lightning CSS最適化(高速化)設定
LightningテーマのCSS最適化(高速化)設定を行います。
- Tree shaking:不要な定義を振るい落とします。
- Preload 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の打ち消し作業を軽減できます。
カスタマイズしない方は、スキンを変更することはありません。
ヘッダーロゴ画像
ロゴ画像を設定できます。
ロゴ画像を設定しない場合、Webサイトのタイトルがそのままテキストで表示されます(気にならない方はこのままで問題ありません)。
なお、ロゴ画像を設定される方は「【WordPress】Lightningテーマの使い方ガイド」で詳しく解説していますので、是非どうぞ。
色設定
色設定ではサイトのキーカラーを設定できます。
キーカラーは、見出しの色やサイドメニューの配色、ボタンのマウスオーバー時の配色が変更できます。
色を選ぶ際に参考になるサイト
サイトの配色を考える際に、参考になるサイトを6つ紹介します。
- 配色パターン見本40選:ベストな色の組み合わせを探せるツール:サルワカさんが運営されている、配色見本ツールです。40パターン用意されており、使用例もチェックできます。
- マテリアルデザインカラー:使用例までチェックできる配色見本集|サルワカ:こちらもサルワカさんが運営されています。マテリアルデザインの配色に特化してます。
- 配色パターン:シンプル・ダーク等といった印象別に配色パターンを掲載してあります。
- 配色の見本帳:ベースカラーを選択すると、色の法則から多彩な配色を提案してくれます。
- ウェブ配色ツールVer2.0:カラーピッカーを操作して色を選択し、プレビューでサイトイメージを確認できます。
- HUE/360:色相、彩度、明度を直感的に操作することで色の組み合わせが試せるサービス。
上記のサイトでお好みの配色を探してみましょう。
⑪: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シェアボタンの色ですが、下図のように配色を消すことができます。
カラーピッカーを使ってSNSシェアボタンの色を自由に変更できます。
お問い合わせ情報の設定
カスタマイザーを使ったお問い合わせ情報の設定方法を解説します。
各項目の設定方法は次のとおりです。
- ①メッセージ:電話番号の上のメッセージを設定できます。
- ②電話番号:お問い合わせ先の電話番号を設定します。
- ③電話アイコン:アイコンを編集できます。
- ④営業時間:電話番号の下の営業時間の表示を設定できます。
- ⑤お問い合わせ先URL:お問い合わせページのURLを入力します(入力したURLはページ下部とサイドバーウィジェット共通設定となります)。
ちなみに、お問い合わせフォームの作成方法は「【WordPress】お問い合わせフォームを簡単設置!Contact form 7の使い方」をどうぞ。 - ⑥お問い合わせボタンに表示するテキスト:お問い合わせボタンのテキストを設定します。
- ⑦お問い合わせボタンに表示するテキスト2(オプション):お問い合わせボタンの下にメッセージを追加できます(ページ下部・サイドバーウィジェット共通設定)。
- ⑧お問い合わせボタンウィジェットに表示するテキスト:サイドバーウィジェットのお問い合わせボタンのタイトルを編集できます。
- ⑨お問い合わせバナー画像:お問い合わせ情報のバナー画像を用意している場合、画像に差し替え可能です。
- ⑩お問い合わせ情報として表示するHTML:任意のテキストやHTML情報を表示させたい場合、HTMLを入力すると、お問い合わせ情報を差し替え可能です。
まとめ
以上、Lightningテーマの外観のカスタマイズの使い方を解説しました。