WordPress テーマカスタマイザー 外観>カスタマイズの使い方

本記事は広告が含まれる場合があります WordPress

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

ここでは、WordPressのテーマカスタマイザーの使い方について説明していきます。
 

WordPress テーマカスタマイザー
 

■WordPressテーマカスタマイザー(外観>カスタマイズ)の使い方(動画解説版)

 

 

テーマカスタマイザーとは

テーマカスタマイザーは、WordPressのテーマのレイアウトや表示に関する設定を行う機能です。
 
WordPress テーマカスタマイザー
 

テーマカスタマイザーから、下記のような設定を行うことができます。

テーマカスタマイザーで設定できること

  • サイトアイコン、サイトタイトル、キャッチフレーズの設定
  • 追加CSSの設定
  • ウィジェット、メニューの設定
  • トップページメインビジュアル、カラー、その他テーマが持つ各表示設定
    (※)カスタマイザーの設定項目は、ご利用のテーマによって設定項目が異なります。

 

カスタマイザーの設定項目は、ご利用のテーマによって設定項目が異なります。上記例では、表示されている設定項目は、「テーマ共通の設定項目」+「適用テーマ(ここではLightning)独自の設定項目」が表示されています。
 

下記はシンプルなテーマのカスタマイザーの設定項目です(テーマ自体に独自の設定項目を持たせていません)
WordPressカスタマイザー シンプルなテーマ「WEBST8」
 

設定項目が少ないですね

 

テーマ共通の設定としては、下記のような項目があります。

テーマ共通の設定項目 意味
サイト基本情報 サイトアイコン(ファビコン)や、サイト名、キャッチフレーズなど設定が可能な項目
メニュー メニューバーの設定できます。外観>メニューからでも設定可能
ウィジェット サイドバーやフッター領域のウィジェットが設定できます。外観>ウィジェットからでも設定可能
追加CSS CSSを独自に追記することが可能

(※)メニューとウィジェットについて外観>メニュー、外観>ウィジェットで設定できるので、次章以降の説明では割愛します。
 

(関連)あわせて読みたい記事

●メニューの使い方→「WordPress メニューバー(ナビゲーション)の作り方を徹底解説

●ウィジェットの使い方→「初心者でもわかるWordPressウィジェットの使い方を徹底解説

 
 
 

テーマカスタマイザーの使い方(テーマ共通の項目編)

テーマカスタマイザーの設定方法

カスタマイザーの設定は、外観>カスタマイズ、または、トップページを開いた状態で「カスタマイズ」のどちらかから行うことができます。
 

■外観>カスタマイズから、テーマカスタマイザーを開く
外観>カスタマイズ
 

■トップページ上部のバーの「カスタマイズ」から、テーマカスタマイザーを開く
トップページ>テーマカスタマイザー
 

任意の設定を変更した後は「公開」ボタンで反映することができます。
カスタマイザーの公開ボタンで反映されます
 

また右側のアイコンをクリックすると、下書きで保存したり、予約公開することもできます。
カスタマイザーの右上のアイコンをクリックして、下書き保存や予約公開ができます。
 

ここからは、テーマカスタマイザーの設定項目について、どのテーマでも共通で設定できる項目を中心に説明していきます。

 

ファビコン(サイトアイコン)を設定する

サイトアイコンは、WordPressのカスタマイザーから設定できます。「カスタマイズ」をクリックします。
カスタマイズをクリック
 

サイト基本情報を選択します。
サイト基本情報を選択
 

「サイトアイコンを選択」を押下します。
「サイトアイコンを選択」を押下
 

画像をアップロードまたは、メディアライブラリにある画像を選択して、「画像を選択」ボタンを押下します。
画像を選択して、「画像を選択」ボタン押下
 

このとき、長方形の画像サイズを選択した場合など、画像の切り抜き画面が表示されます。問題なければ切り抜かないを選択、画像を切り抜きたい場合は切り抜くを選択して次に進みましょう。
問題なければ切り抜かないを選択、画像を切り抜きたい場合は切り抜くを選択して次に進みましょう。
 

サイトアイコンを選択したら、「公開」ボタンを押下します。
公開ボタンを押下します。
 

右上にサイトアイコンが表示されるようになりました。

 

以上で、WordPressでサイトアイコン(ファビコン)の設定は完了です。
 

サイトアイコン(ファビコン)は、サイトのシンボルマークとなるアイコンのことで、ブラウザの左上に表示されたり、検索結果で表示されます。

サイトのオリジナルティが出るので、ブランディング・認知向上や、クリック率の向上につながるメリットがあります。
 

■サイトアイコン(ファビコン)の表示例
サイトアイコンの表示例
 

■PCの検索結果画面や、スマートフォンで検索した時にも表示されます。
サイトアイコン(スマートフォン)
 

サイトアイコンについての詳細は「WordPressでサイトアイコン(ファビコン)を設定する方法」をあわせてご参照ください。
 

サイトのタイトル・キャッチフレーズを設定する

サイトのタイトル・キャッチフレーズは、サイトアイコンと同様にサイト基本情報から設定できます。


 

(補足)サイトのタイトル・キャッチフレーズは、ダッシュボードの設定>一般設定からでも変更することができます。
設定>一般設定で、サイトタイトルやキャッチフレーズを変更することもできます。
 
 

追加CSSを設定する

追加CSSは、WordPress4.7から追加された機能で、子テーマを作らなくても、自分で定義したCSSコードでページのスタイルを調整することができる機能です。
 

WordPressのカスタマイザーから設定できます。「カスタマイズ」をクリックします。
カスタマイズをクリック
 

カスタマイザーの追加CSSから設定を行います。
WordPress カスタマイズ>追加CSS
 

CSS編集画面で任意のCSS設定を行うことができます。
WordPress カスタマイズ>追加CSSからCSSの編集する
 

また、この追加CSSで編集した内容はテーマのテンプレートを直接編集していないため、テーマが更新されても内容がクリアされることはありません。

追加CSSで設定した内容は、テーマを変更すると設定内容がクリアされますので注意してください。
 

追加CSSの使い方の詳細は「【追加cssとは】wordpressで追加CSSの使い方・CSS編集方法」をご参照ください。
 

合わせて読みたい記事

WordPressの子テーマによるカスタマイズのやり方については、「WordPressで子テーマを作成してカスタマイズする方法」をご参照ください。

 
 

テーマカスタマイザーの使い方(テーマ独自の項目編)

次に、「Lightning」を例に、テーマ独自の設定項目についても説明していきます。
 

下記は、無料テーマ「Lightning」のカスタマイザーの画面です。
 

Lightning利用時のテーマカスタマイザーの設定項目
 

Lightning 〇〇〇〇と書いてあるのが、テーマ独自のカスタマイザー設定項目ですね。

ご利用のテーマによって、ここの表示項目や設定のやり方は異なりますのでご注意ください。

 
それでは、具体的な使い方を説明していきます。
 

トップページスライドショーを変更する

Lightningの場合は、「Lightning トップページスライドショー」からスライドショーの設定変更ができます。
Lightning トップページスライドショー
 

実際に変更してみましょう。下記のようにスライドショーの画像を変更して「公開」ボタンを押せば完了です。


 
 

メインカラー変更する

つづいて、メインカラーを変更してみましょう。「Lightning デザイン設定」を選択します。
カスタマイザー > Lightning デザイン設定
 

早速色を変更してみましょう。ここでは、緑系統から赤系統の色に変更しました。


 

ロゴを変更する

同様に、「Lightning デザイン設定」から、ロゴの変更もできます。


 

まとめ WordPressテーマカスタマイザーの使い方

ここでは、WordPressのテーマカスタマイザーの使い方について、解説しました。
 

WordPress テーマカスタマイザー
 

多くのテーマで、カスタマイザーからテーマの設定を行うことができますので、ご利用のテーマでどんな設定ができるのか確かめてみてください。

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-WordPress