WordPressにLightningテーマをインストールはしていて、外観のカスタマイズの使い方をお探しの方向け。
Webサイトの外観をカスタマイズする場合、通常、HTMLやCSS、PHP等の知識が必要となりますが、WordPressは管理画面からWebサイトの外観を簡単にカスタマイズする事ができます。
この記事では、Lightningテーマの外観のカスタマイズの使い方を解説します。
好きなところから読めます
WordPressの外観のカスタマイズ方法
WordPressでLightningテーマをお使いの方向けに、外観のカスタマイズ方法を解説します。
カスタマイザーを立ち上げる
まず最初に、サイトの外観をカスタマイズするために「カスタマイザー」を立ち上げます。
ダッシュボード＞外観＞カスタマイズ を選択します。
下図のように左側にカスタマイザーが表示され、右側にプレビューが表示されます。
カスタマイザーを使う事で、プレビュー表示をしたまま外観を変更する事ができます。
Lightningテーマで外観をカスタマイズできる項目は9つ
- ①：サイト基本情報
- ②：メニュー
- ③：ウィジェット
- ④：ホームページ設定
- ⑤：追加CSS
- ⑥：Lightning デザイン設定
- ⑦：Lightning トップページスライドショー
- ⑧：Lightning トップページPR Block
- ⑨：Ex Unit 設定
上記のとおりです。
①：サイト基本情報
サイト基本情報では、「サイトのタイトル」と「キャッチフレーズ」を編集する事ができます。
「サイトアイコン」はブラウザのタブや、ブックマークやお気に入りに入れた際に表示されるアイコン画像です。
今すぐ使う項目ではありませんので、アイコンを作成したら追加しましょう。
②：メニュー
メニューはカスタマイザーから「ナビゲーションメニュー」を編集する事ができます。
メニューの編集方法は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」をどうぞ。
「メニューの位置」は、カスタマイザーから2ヶ所のメニュー（ヘッダーとフッター）を選択する事ができます。
③：ウィジェット
ウィジェットでは、テーマに表示できるウィジェットを設定できます。
ウェジェットの設定方法は、「サイドバーに最新記事一覧を表示させよう」をどうぞ。
カスタマイザーで、ウィジェットの表示設定を変更できます。
④：ホームページ設定
ホームページ設定は、Webサイトのトップページを最新の投稿と固定ページの表示に切り替えることができます。
任意の固定ページをトップページに表示させたい場合は、「【WordPress】固定ページをトップページに表示させる方法」をどうぞ。
カスタマイザーでトップページの表示設定を変更する事ができます。
⑤：追加CSS
追加CSSは、WebサイトのCSSを設定する事ができます。
追加CSSでできる事は、例えば見出しの文字を太字にしたり、色を変えたり、装飾する等といった、簡易的なカスタマイズを行う場合は追加CSSを使用します。
⑥：Lightning デザイン設定
「Lightning デザイン設定」で設定できる項目は4つあります。
- デザインスキン
- ヘッダーロゴ画像
- キーカラー
- キーカラー（暗）
上から順に紹介します。
デザインスキン
Lightningテーマは有料スキンを購入することで、デザインを簡単に変更することができます。
Lightningテーマのデザインスキンは6種類あります。デザインスキンに興味のある方は「【Lightningテーマ】デザインスキンを変更するだけで業種に合ったサイトを簡単に構築」をどうぞ。
ヘッダーロゴ画像
あらかじめロゴ画像を作成されている方は、ここにロゴ画像をドラッグすることでロゴ画像をアップロードできます。
ロゴ画像を設定しない場合、Webサイトのタイトルがそのままテキストで表示されます（気にならない方はこのままで問題ありません）。
キーカラー
キーカラーを変更することで、Lightningテーマの配色を簡単に変更する事ができます。
見出しの色やサイドメニューの配色、マウスオーバー時の配色が変更されます。
キーカラー（暗）
キーカラー（暗）を変更すると、リンクテキストの配色やボタン枠の配色を変更できます。
「キーカラー」、「キーカラー（暗）」のいずれも、気に入らなければデフォルト（初期設定）ボタンをクリックすれば簡単に元の配色に戻せますので、いろいろ試してみましょう。
キーカラー変更例
カラーピッカーを操作するだけで、Webサイトの配色を簡単に変更できます。
色を選ぶ際に参考になるサイト
サイトの配色を考える際に、参考になるサイトを5つ紹介します。
- シーン別配色見本32パターン：配色の基礎について分かりやすい説明があります。
- 配色パターン：シンプル・ダーク等といった印象別に配色パターンを掲載してあります。
- 配色の見本帳：ベースカラーを選択すると、色の法則から多彩な配色を提案してくれます。
- ウェブ配色ツールVer2.0：カラーピッカーを操作して色を選択し、プレビューでサイトイメージを確認できます。
- HUE/360：色相、彩度、明度を直感的に操作することで色の組み合わせが試せるサービス。
上記のサイトでお好みの配色を探してみましょう。
キーカラーの下にあるその他の設定
キーカラーの下にあるその他の項目について解説します。
- その他の項目
- メニュータイプ（モバイル端末時）
- メニューボタンの位置（モバイルモード）
- サイドバーの位置（PC閲覧時）
上記のとおりです。
その他の項目
| トップページを１カラムにする | チェックを入れると、トップページにサイドバーが表示されません。 ※変更されるのはトップページだけです。 |
|---|---|
| トップページでデフォルトの投稿リストや固定ページを表示しない | チェックを入れると投稿リストや固定ページが表示されません。※任意の固定ページをトップページに設定していても、チェックを入れると表示されません（こちらの設定が優先されます）。 |
| ①投稿詳細ページで最終更新日を表示しない | チェックを入れると、投稿記事の最終更新日が表示されません。 |
| ②投稿詳細ページで投稿者名（ニックネーム）を表示しない | チェックを入れると、投稿記事の投稿者名（ニックネーム）が表示されません。 |
| サイドバーに表示されるページリストを全て表示せずにアクティブでない階層を非表示にする | チェックを入れると、固定ページなどを表示した際に、サイドバーに関連ページへのリンクが全て展開されるのを防ぐことができます。※チェックを入れる事をおすすめします。 |
| サイドバーを固定しない | チェックを入れるとサイドバーが固定されます。 |
メニュータイプ（モバイル端末時）
| VK Mobile Nav(推奨) | スマートフォンでアクセスした際に表示されるメニューを任意のウィジェットを表示させるようカスタマイズできます。 テーマ配布元サイト「VK Mobile Nav の特徴」 |
|---|---|
| 縦展開（Ligthning標準） | スマートフォンでアクセスし、メニューボタンを押すとメニューが縦に展開します。 |
| Side Slide(非推奨) | スマートフォンでアクセスし、メニューボタンを押すと、メニューが左から右に出現し（ページは右端に追いやられます）、メニューが縦に一覧表示されます。 |
※「VK Mobile Nav」は非常に使い勝手の良い機能ですが、WordPressに慣れるまでは、真ん中の「縦展開」にしておいた方が無難だと思います。
メニューボタンの位置（モバイルモード）
スマートフォンでアクセスした際のメニュー位置を決める事が出来ます。（初期設定では左）
サイドバーの位置（PC閲覧時）
パソコンでアクセスした際のサイドバーの位置を変更する事が出来ます。（初期設定では右）
⑦：Lightning トップページスライドショー
トップページスライドショーの使い方は「【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】」で解説していますので、是非どうぞ。
⑧：Lightning トップページPR Block
Lightning トップページPR Blockでは、トップページに配置してある「RP Block」を編集できます。
初期設定ではトップページに表示されるよう設定してありますが、チェックを外すと「PR Block」を消す事ができます。
「PR Block」の編集方法
「RP Block」の編集は、「アイコン」、「タイトル」、「テキスト」、「リンクURL」の４つを編集する事ができます。
| アイコン | アイコンを変更できます。 |
|---|---|
| タイトル | PR Blockのタイトルを編集できます。 |
| サブテキスト | タイトルの下に表示されるテキストを編集できます |
| リンクURL | リンクURLを設定すると、サブテキストにリンクを張る事が出来ます。 |
⑨：Ex Unit 設定
Ex Unit設定で設定できる項目は3つあります。
- SNS設定
- お問い合わせ情報
- 関連記事設定
上から順に紹介します。
SNS設定
SNS設定では、SNSボタンの配色を変更する事ができます。
初期設定では、SNSボタンは下図の配色がされています。
「背景なし」にチェックを入れると、SNSボタンの配色が消え、グレーの枠線表示と変化します。
「色を選択」をクリックし、カラーピッカーで色を指定すると、指定した配色にSNSボタンが変化します。
「背景なし」にチェックを入れると、上記配色が反転し、外枠とテキストに配色されます。
「カラーピッカー」の横にある「クリア」をクリックすると元のSNSボタンの配色に戻ります。
お問い合わせ情報
お問い合わせ情報を設定すると、本文下部とサイドバーにお問い合わせ情報を表示させる事ができるようになります。
この機能はコーポレートサイトを作成する際、非常に便利な機能です。
それでは、お問い合わせ情報の設定方法について解説します。
- ①メッセージ：メッセージを記載すると、電話番号の上にメッセージを表示させる事ができます。
- ②電話番号：お問い合わせ先の電話番号を記載します。
- ③営業時間：営業時間を入力すると、電話番号の下に営業時間が表示されます。
- ④お問い合わせ先URL：お問い合わせページのURLを入力します。入力したURLは、ページ下部とサイドバーウィジェット共通設定となります。
- お問い合わせフォームの作成方法は「【WordPress】お問い合わせフォームを簡単設置！Contact form 7の使い方」をどうぞ。
- ⑤お問い合わせボタンに表示するテキスト：ページ下部のお問い合わせ情報のお問い合わせボタンのタイトルを変更できます。
- ⑥お問い合わせボタンに表示するテキスト２：お問い合わせボタンの下にメッセージを追加する事ができます。入力したメッセージはページ下部とサイドバーウィジェット共通設定となります。
- ⑦お問い合わせボタンウィジェットに表示するテキスト：サイドバーウィジェットのお問い合わせボタンのタイトルを設定できます。
- ⑧お問い合わせバナー画像：お問い合わせのバナー画像を用意している場合、バナーを設定すると、お問い合わせ情報を差し替える事ができます。
- ⑨お問い合わせ情報として表示するHTML：プラグインで用意されているお問い合わせ情報を使用せず、任意のテキストやHTML情報を表示させたい場合、HTMLを入力すると、お問い合わせ情報を差し替えて表示させる事ができます。
関連記事設定
関連記事設定では、投稿記事の下に表示される「関連記事を表示」というタイトルを変更する事ができます。
下記のように、「タイトル」に任意の文章を入力すると、投稿記事の下にある関連記事のタイトルを変更する事ができます。
まとめ
以上、Lightningテーマの外観のカスタマイズの使い方について解説しました。
おわり。
