ここでは、WordPressのテーマカスタマイザーの使い方について説明していきます。
■WordPressテーマカスタマイザー(外観＞カスタマイズ)の使い方(動画解説版)
テーマカスタマイザーとは
テーマカスタマイザーは、WordPressのテーマのレイアウトや表示に関する設定を行う機能です。
テーマカスタマイザーから、下記のような設定を行うことができます。
テーマカスタマイザーで設定できること
- サイトアイコン、サイトタイトル、キャッチフレーズの設定
- 追加CSSの設定
- ウィジェット、メニューの設定
- トップページメインビジュアル、カラー、その他テーマが持つ各表示設定
(※)カスタマイザーの設定項目は、ご利用のテーマによって設定項目が異なります。
カスタマイザーの設定項目は、ご利用のテーマによって設定項目が異なります。上記例では、表示されている設定項目は、「テーマ共通の設定項目」＋「適用テーマ(ここではLightning)独自の設定項目」が表示されています。
下記はシンプルなテーマのカスタマイザーの設定項目です(テーマ自体に独自の設定項目を持たせていません)
テーマ共通の設定としては、下記のような項目があります。
| テーマ共通の設定項目 | 意味 |
|---|---|
| サイト基本情報 | サイトアイコン(ファビコン)や、サイト名、キャッチフレーズなど設定が可能な項目 |
| メニュー | メニューバーの設定できます。外観＞メニューからでも設定可能 |
| ウィジェット | サイドバーやフッター領域のウィジェットが設定できます。外観＞ウィジェットからでも設定可能 |
| 追加CSS | CSSを独自に追記することが可能 |
(※)メニューとウィジェットについて外観＞メニュー、外観＞ウィジェットで設定できるので、次章以降の説明では割愛します。
(関連）あわせて読みたい記事
●メニューの使い方→「WordPress メニューバー(ナビゲーション)の作り方を徹底解説」
●ウィジェットの使い方→「初心者でもわかるWordPressウィジェットの使い方を徹底解説」
テーマカスタマイザーの使い方(テーマ共通の項目編)
テーマカスタマイザーの設定方法
カスタマイザーの設定は、外観＞カスタマイズ、または、トップページを開いた状態で「カスタマイズ」のどちらかから行うことができます。
■外観＞カスタマイズから、テーマカスタマイザーを開く
■トップページ上部のバーの「カスタマイズ」から、テーマカスタマイザーを開く
任意の設定を変更した後は「公開」ボタンで反映することができます。
また右側のアイコンをクリックすると、下書きで保存したり、予約公開することもできます。
ファビコン(サイトアイコン)を設定する
サイトアイコンは、WordPressのカスタマイザーから設定できます。「カスタマイズ」をクリックします。
サイト基本情報を選択します。
「サイトアイコンを選択」を押下します。
画像をアップロードまたは、メディアライブラリにある画像を選択して、「画像を選択」ボタンを押下します。
このとき、長方形の画像サイズを選択した場合など、画像の切り抜き画面が表示されます。問題なければ切り抜かないを選択、画像を切り抜きたい場合は切り抜くを選択して次に進みましょう。
サイトアイコンを選択したら、「公開」ボタンを押下します。
右上にサイトアイコンが表示されるようになりました。
以上で、WordPressでサイトアイコン(ファビコン)の設定は完了です。
サイトアイコン(ファビコン)は、サイトのシンボルマークとなるアイコンのことで、ブラウザの左上に表示されたり、検索結果で表示されます。
サイトのオリジナルティが出るので、ブランディング・認知向上や、クリック率の向上につながるメリットがあります。
■サイトアイコン(ファビコン)の表示例
■PCの検索結果画面や、スマートフォンで検索した時にも表示されます。
サイトアイコンについての詳細は「WordPressでサイトアイコン(ファビコン)を設定する方法」をあわせてご参照ください。
サイトのタイトル・キャッチフレーズを設定する
サイトのタイトル・キャッチフレーズは、サイトアイコンと同様にサイト基本情報から設定できます。
(補足)サイトのタイトル・キャッチフレーズは、ダッシュボードの設定＞一般設定からでも変更することができます。
追加CSSを設定する
追加CSSは、WordPress4.7から追加された機能で、子テーマを作らなくても、自分で定義したCSSコードでページのスタイルを調整することができる機能です。
WordPressのカスタマイザーから設定できます。「カスタマイズ」をクリックします。
カスタマイザーの追加CSSから設定を行います。
CSS編集画面で任意のCSS設定を行うことができます。
また、この追加CSSで編集した内容はテーマのテンプレートを直接編集していないため、テーマが更新されても内容がクリアされることはありません。
追加CSSで設定した内容は、テーマを変更すると設定内容がクリアされますので注意してください。
追加CSSの使い方の詳細は「【追加cssとは】wordpressで追加CSSの使い方・CSS編集方法」をご参照ください。
合わせて読みたい記事
WordPressの子テーマによるカスタマイズのやり方については、「WordPressで子テーマを作成してカスタマイズする方法」をご参照ください。
テーマカスタマイザーの使い方(テーマ独自の項目編)
次に、「Lightning」を例に、テーマ独自の設定項目についても説明していきます。
下記は、無料テーマ「Lightning」のカスタマイザーの画面です。
それでは、具体的な使い方を説明していきます。
トップページスライドショーを変更する
Lightningの場合は、「Lightning トップページスライドショー」からスライドショーの設定変更ができます。
実際に変更してみましょう。下記のようにスライドショーの画像を変更して「公開」ボタンを押せば完了です。
メインカラー変更する
つづいて、メインカラーを変更してみましょう。「Lightning デザイン設定」を選択します。
早速色を変更してみましょう。ここでは、緑系統から赤系統の色に変更しました。
ロゴを変更する
同様に、「Lightning デザイン設定」から、ロゴの変更もできます。
まとめ WordPressテーマカスタマイザーの使い方
ここでは、WordPressのテーマカスタマイザーの使い方について、解説しました。
多くのテーマで、カスタマイザーからテーマの設定を行うことができますので、ご利用のテーマでどんな設定ができるのか確かめてみてください。
今回は以上になります。最後までご覧いただきありがとうございました。
あわせて読みたい記事
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
の使い方(動画解説版) ){kind=link}