無料のElementorだけで作ったヨガのコミュニティのLPのテンプレート

Elementorの新しい
無料テンプレートサイトが追加されました!

WordPressの使い方
WordPressの使い方『テーマのカスタマイズ方法』

WordPressのテーマをカスタマイズする方法

この記事では、テーマの外観のカスタマイズで一体何ができるのかを説明します。
また選択するテーマによってもカスタマイズでいる部分は大きく異なります。
こちらでは、全てのテーマにおいて共通しているカスタマイズ機能を主に紹介していきます。

WordPressのことをもっと知りたい場合はWordPressの使い方のページを見てください。

テーマのカスタマイズページへの行き方

テーマのカスタマイズページへの行き方

画面左側のバーの中の『外観』にカーソルを当てると出てくるボックスの中の『カスタマイズ』をクリックします。

カスタマイズの編集ページのサンプル画像

すると、この様な画面表示になります。
画面左側にテーマのカスタマイズタブがあり、その横には実際のサイトのページが表示されます。

テーマによりカスタマイズできる部分が異なる!

テーマとは、サイトを構築するテンプレートの様なものです。
インストールしているテーマにより、カスタマイズできる部分は異なります。
この記事では、『Astra』をインストールしています。

Astraでできるカスタマイズ

アストラでできるカスタマイズ機能の紹介

こちらが『Astra』でカスタマイズできる部分です。

  • 全般
  • ヘッダー
  • パンくずリスト
  • ブログ
  • サイドバー
  • フッター
  • メニュー
  • ウィジェット
  • ホームページ設定
  • 追加CSS

例:Twenty Sventeenでできるカスタマイズ

(例)トィウェンティセブンティーンでできるカスタマイズ機能の紹介

こちらは、テーマを『Twenty Seventeen』にした場合の表示画面です。
ページのレイアウトも変更し、可能なカスタマイズが以下の様になりました。

  • サイト基本情報
  • ヘッダーメディア
  • メニュー
  • ウィジェット
  • ホームページ設定
  • 追加CSS

全てのテーマで共通しているカスタマイズ機能

全てのテーマでできるカスタマイズ機能の紹介

全てのテーマで

  • サイト基本情報(Astraの場合はヘッダーの中に有り)
  • メニュー
  • ウィジェット
  • ホームページ設定
  • 追加CSS

共通してできるカスタマイズです。

それぞれのセクションで何ができるかは使用しているテーマに大きく左右されるので、こちらの記事では共通している部分以外の説明は割愛します。

サイト基本情報でできること

サイト基本情報でできること
ロゴの追加の仕方

ロゴをサイトに追加したい場合は『ロゴの選択』をクリックします。

ロゴの選択

すると、上記画面の様にメディアライブラリが表示されるので、そこから追加したいロゴを選択し、画面右下の『選択』をクリックします。
また、新たにファイルをアップロードする場合は『メディアライブラリ』の左側の『ファイルをアップロード』をクリックし、そこから追加してください。

ロゴを追加しサイトに反映された時のサンプル画像

こちらはロゴを追加した時のサンプル画像です。
サイト名の横に追加したロゴが反映されました。
※Astraのテーマを使用しています。

ロゴのサイズ変更

ロゴのサイズ変更

『ロゴ幅』のセクションのカーソルバーを横スライドでロゴの大きさが変更できます。
※デフォルトでは150の値に設定されています。

サイトのタイトル

サイトのタイトルの編集の仕方

サイトのタイトルでは、サイト名の変更が行えます。
変更する場合はテキストバーに新しいサイト名を入力してください。
また『サイトタイトルを表示』のチェックを外すとサイト名が非表示になります。

サイトタイトル編集の「インラインロゴ&サイトタイトル」のチェックを外すとどうなるか

また『インラインロゴ&サイトタイトル』のチェックを外すと、サイト名の配置がロゴの下に変わります。

タイトルのタイポグラフィ

タイトルのタイポグラフィの編集の仕方

こちらのタイポグラフィでは、サイトのタイトルの大きさが編集できます。
編集するには、『タイポグラフィ』の横のペンのマークをクリックします。

タイポグラフィの値を大きくした時のサンプル画像

デフォルトは文字サイズは35の値で、フォントサイズの単位は『PX』に設定されています。
サイズを変更するには値を直接入力(半角数字)するか、▲▼のボタンで変更できます。

フォントサイズの値の変更の仕方

またフォントサイズの単位は、『PX』の右側の▽をクリックすると

  • PX
  • EM

から選択することができます。

フォントサイズの単位の設定については、なんだかよくわからないという方はPXの設定で良いかと思います。
また、より詳しく知りたい方は『CSSの単位の違いを説明した記事』を参考にしてください。

サイトのキャッチフレーズ

キャッチフレーズをサイトに表示させる方法

サイトのキャッチフレーズはデフォルトではなしになっていますが、表示させたい場合は『サイトのキャッチコピーを表示する』にチェックを入れます。
すると、サイト名の下に表示されます。

キャッチフレーズのタイポグラフィ

キャッチスレーズのタイポグラフィの編集の仕方

こちらのタイポグラフィでは、キャッチフレーズの文字の大きさが変更できます。
編集の仕方は先ほどの『タイトルのタイポグラフィ』と全く同じですので、そちらを参考にしてください。

サイトアイコンの設定

サイトアイコンの設定の仕方

サイトにアイコンを追加したい場合は『サイトアイコン選択』をクリックします。
このアイコンが一体どこに表示されるのかは以下で説明します。

サイトアイコンの画像選択

アイコンの画像選択のやり方はサイトの『ロゴの追加』の設定の時と同じです。

サイトアイコンを追加した後の編集セクションの表示画面
編集セクションの表示画面
サイトアイコンがタブに表示された実際の画像
タブに表示された実際の画像

サイトアイコンはブラウザーのタブやブックマークバー、WordPressモバイルアプリで表示されます。
また、アイコンは512×512ピクセル以上の正方形に設定します。
画像の正方形への設定は、メディアライブラリで画像を選択した後に編集できます。

その他の共通設定について

メニュー/ウィジェット/ホームページ設定/追加CSSの設定につて
  • メニュー
  • ウィジェット
  • ホームページ設定
  • 追加CSS

上記の設定については別の記事にて改めて説明したいと思います。


テーマのカスタマイズは前途説明した通り、テーマによって何がカスタマイズできるのかが大きく変わります。
ひととおり操作し、プレビューをしてどのように表示されるのかを見比べながら自分好みのサイトを構築してくださいね!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通