【2021】Amazonファッションタイムセールでお得に買い物する方法

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

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

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

 

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

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

スポンサーリンク

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

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

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

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

これは、Lightningテーマに限らず、全てのテーマに共通して言いますので、もし、テーマを変更して、見た目を変更したい時は、ここからカスタマイズしましょう。

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

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

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

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

 

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

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

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

 

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

Lightning 機能設定

「Lightning 機能設定」で設定できる項目は、新しい機能に置き換わる予定なので、使う事はありませんので割愛します。

今までのバージョンアップの傾向から考えると、次のバージョンアップで無くなる項目だと思います。

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

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

普通に運営している分には、使うことは無いと思います。

Lightning デザイン設定

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

  • デザインスキン
  • ヘッダーロゴ画像
  • 色設定
    • キーカラー
    • リンクテキストカラー
  • その他の設定

上記の順に紹介します。

デザインスキン

Lightningテーマは有料スキンを購入することで、デザインを簡単に変更できます。

有料スキンに興味のある方は以下の記事をどうぞ。

【Lightning】有料デザインスキンで業種に合ったおしゃれなサイトを構築
Lightningテーマのデフォルトのデザインから、業種にあったサイトデザインに変更したい方向け。 Lightningテーマは拡張デザインスキンのプラグインをインストールするだけで、初心者でも簡単にデザインのバリエーションを変更する事...

ヘッダーロゴ画像

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

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

 

ちなみに、ロゴ画像をこれから用意するという方は、以下の記事でロゴ画像を用意する方法を解説していますので、興味のある方は是非どうぞ。

【WordPress】タイトルをロゴ画像に変更する方法【Lightning】
WordPressのLightningテーマでロゴ画像を設定する方法をお探しの方向け。 Lightningテーマのサイトタイトルは、初期状態ではテキストで表示されますが、ロゴ画像をアップロードすることで、ロゴ画像を設定できます。 こ...

色設定

色設定では、サイトの以下の色を設定できます。

  • キーカラー
  • リンクテキスト

上記のとおりです。

キーカラー

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

キーカラー(暗)

キーカラー(暗)を変更すると、リンクテキストの配色やボタン枠の配色を変更できます。

 

色を変更しみて、気に入らなければデフォルト(初期設定)ボタンをクリックすれば元の配色に戻せますので、いろいろ試してみましょう。

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

サイトの配色を考える際に、参考になるサイトを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の設定変更を行います。

普通に運営していて、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テーマの外観のカスタマイズの使い方を解説しました。

 

 

人気記事【Lightning】有料デザインスキンで業種に合ったおしゃれなサイトを構築

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

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