WordPressにLightningテーマをインストールしていて、外観のカスタマイズの使い方をお探しの方向け。
Webサイトの外観をカスタマイズする場合、通常、HTMLやCSS、PHP等の知識が必要となりますが、WordPressは管理画面からWebサイトの外観を簡単にカスタマイズする事ができます。
この記事では、Lightningテーマの外観のカスタマイズの使い方を解説します。
好きなところから読めます
Lightningテーマの外観のカスタマイズ方法
WordPressでLightningテーマをお使いの方向けに、外観のカスタマイズ方法を解説します。
カスタマイザーを立ち上げる
WordPressのテーマは、ダッシュボード左側メニューにある「カスタマイズ」という項目を選択すると、「カスタマイザー」が立ち上がります。
ダッシュボード＞外観＞カスタマイズ を選択します。
下図のようにカスタマイザーが立ち上がります。
カスタマイザーを使うと、プレビュー表示をしたまま外観を変更する事ができます。
各項目の詳しい設定方法は、次のパートで解説していきます。
Lightningテーマの外観のカスタマイズの使い方を17項目解説
Lightningテーマの外観のカスタマイズ項目は、上図にも記載されているとおり、17項目あります（Ver13）。
項目ごとに何ができるかを以下の順に解説していきます。
- サイト基本情報
- 色
- 背景画像
- メニュー
- ウィジェット
- ホームページ設定
- 追加CSS
- Lightning 機能設定
- Lightning CSS最適化（高速化）設定
- Lightning デザイン設定
- Lightning レイアウト設定
- Lightning トップページスライドショー
- Lightning トップページPR Block
- 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 機能設定
「Lightning 機能設定」で設定できる項目は、新しい機能に置き換わる予定なので、使う事はありませんので割愛します。
Lightning CSS最適化（高速化）設定
LightningテーマのCSS最適化（高速化）設定を行います。
普通に運営している分には、使うことは無いと思います。
Lightning デザイン設定
Lightning デザイン設定で設定可能な項目は5つあります。
- デザインスキン
- ヘッダーロゴ画像
- 色設定
- キーカラー
- リンクテキストカラー
- その他の設定
上記の順に紹介します。
デザインスキン
Lightningテーマは有料スキンを購入することで、デザインを簡単に変更できます。
有料スキンに興味のある方は以下の記事をどうぞ。
ヘッダーロゴ画像
ロゴ画像を設定できます。
ロゴ画像を設定しない場合、Webサイトのタイトルがそのままテキストで表示されます（気にならない方はこのままで問題ありません）。
ちなみに、ロゴ画像をこれから用意するという方は、以下の記事でロゴ画像を用意する方法を解説していますので、興味のある方は是非どうぞ。
色設定
色設定では、サイトの以下の色を設定できます。
- キーカラー
- リンクテキスト
上記のとおりです。
キーカラー
キーカラーでは、見出しの色やサイドメニューの配色、ボタンのマウスオーバー時の配色が変更できます。
キーカラー（暗）
キーカラー（暗）を変更すると、リンクテキストの配色やボタン枠の配色を変更できます。
色を変更しみて、気に入らなければデフォルト（初期設定）ボタンをクリックすれば元の配色に戻せますので、いろいろ試してみましょう。
色を選ぶ際に参考になるサイト
サイトの配色を考える際に、参考になるサイトを5つ紹介します。
- シーン別配色見本32パターン：配色の基礎について分かりやすい説明があります。
- 配色パターン：シンプル・ダーク等といった印象別に配色パターンを掲載してあります。
- 配色の見本帳：ベースカラーを選択すると、色の法則から多彩な配色を提案してくれます。
- ウェブ配色ツールVer2.0：カラーピッカーを操作して色を選択し、プレビューでサイトイメージを確認できます。
- HUE/360：色相、彩度、明度を直感的に操作することで色の組み合わせが試せるサービス。
上記のサイトでお好みの配色を探してみましょう。
その他の設定
その他の設定で設定できる項目は次のとおりです。
- トップページでデフォルトの投稿リストや固定ページを表示しない：チェックを入れると投稿リストや固定ページが表示されません。任意の固定ページをトップページに設定していても、チェックを入れると表示されません（こちらの設定が優先されます）。
- 投稿詳細ページで最終更新日を表示しない：チェックを入れると、投稿記事の最終更新日が表示されません。
- 投稿詳細ページで投稿者名を表示しない：チェックを入れると、投稿記事の投稿者名（ニックネーム）が表示されません。
- 固定ページのサイドバーに非アクティブな孫ページを表示しない：固定ページのサイドバーに非アクティブな孫ページが表示されなくなります。
Lightning レイアウト設定
「Lightning レイアウト設定」では、カラム設定やサイドバーの設定ができます。
- カラム設定 ( PC閲覧時 )：ページタイプごとにカラムを設定します。
- サイドバーの設定：サイドバーの位置（左・右）、サイドバーの固定表示を設定します。
Lightning トップページスライドショー
Lightningテーマのヘッダー画像を設定します。
具体的な設定方法は「【WordPress】ヘッダー画像を設定する方法【Lightningテーマ】」という記事で解説していますので、是非どうぞ。
Lightning トップページPR Block
トップページに表示する3PRを編集できます。
具体的な設定方法は「【WordPress】Lightningの3PRエリアの設定方法」という記事で解説していますので、是非どうぞ。
Lightning フッター設定
Lightning フッター設定では、フッター上部のウィジェットの余白と、フッターウィジェットエリアの数を設定できます。
フッターウィジェットエリアは、初期設定では3つに設定してありますが、最大6つまで増やせます。
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の使い方」をどうぞ。 - ⑥お問い合わせボタンに表示するテキスト：お問い合わせボタンのテキストを設定します。
- ⑦お問い合わせボタンに表示するテキスト２（オプション）：お問い合わせボタンの下にメッセージを追加できます（ページ下部・サイドバーウィジェット共通設定）。
- ⑧お問い合わせボタンウィジェットに表示するテキスト：サイドバーウィジェットのお問い合わせボタンのタイトルを編集できます。
- ⑨お問い合わせバナー画像：お問い合わせ情報のバナー画像を用意している場合、画像に差し替え可能です。
- ⑩お問い合わせ情報として表示するHTML：任意のテキストやHTML情報を表示させたい場合、HTMLを入力すると、お問い合わせ情報を差し替え可能です。
まとめ
以上、Lightningテーマの外観のカスタマイズの使い方を解説しました。
