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

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

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

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

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

 

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

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

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

 

設定項目が少ないですね

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

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

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

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

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

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

 

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

 

任意の設定を変更した後は「公開」ボタンで反映することができます。

 

また右側のアイコンをクリックすると、下書きで保存したり、予約公開することもできます。

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

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

 

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

 

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

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

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

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

 
 

追加CSSを設定する

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

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

 

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

 

CSS編集画面で任意のCSS設定を行うことができます。

 

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

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

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

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

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

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

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

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

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

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

 

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

メインカラー変更する

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

 

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

ロゴを変更する

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

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

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

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

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

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

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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

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