2-03 カスタマイザーで見た目をカスタマイズしよう

WordPress(ワードプレス)超入門 テーマカスタマイザーで見た目をカスタマイズしよう

「WordPress(ワードプレス)超入門」は、株式会社コミュニティコムが運営する「WordPressテーマ&プラグイン販売 コミュニティコムショップ」が、WordPress初心者のためにホームページを開設するまでの手順をわかりやすく解説するシリーズです。

WordPressには、ホームページの見た目をリアルタイムで変更して確認できるテーマカスタマイザーという機能が用意されています。テーマをインストールした後にテーマカスタマイザーを使えば、HTMLやCSSといった難しいコードを書かなくても手軽に見た目のカスタマイズが可能です。

テーマカスタマイザーを使ってカスタマイズできる内容は、テーマによって異なります。ここでは、WordPressテーマ&プラグイン販売 コミュニティコムショップで販売している「歯科医院・歯医者さん向け WordPress テーマ by Communitycom」を例に解説します。

カスタマイザーの画面を表示する

WordPressの管理画面にログインし、「外観」にマウスポインターを合わせ、表示された「カスタマイズ」をクリックします。WordPress管理画面へのログイン方法については「WordPress(ワードプレス)の管理画面にログインしよう」を参照してください。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

カスタマイザーの画面が表示されました。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ここからは、「サイトロゴ画像」「ヘッダー画像」「キーカラー」の設定方法を、WordPressテーマ&プラグイン販売 コミュニティコムショップで販売している「歯科医院・歯医者さん向け WordPress テーマ by Communitycom」を例に解説します。 カスタマイズできる内容と設定方法はテーマによって異なりますので、ご注意ください。

サイトロゴ画像を設定する(サイト基本情報)

歯科医院・歯医者さん向け WordPress テーマ by Communitycom」では、サイトロゴとして画像を設定することができます。サイトロゴ画像が無い場合は、サイトタイトルがテキストで表示されます。(サイトロゴとサイトタイトルの併用はできません)

サイトロゴ画像を設定するには、カスタマイザーのメニューから「サイト基本情報」をクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

「サイト基本情報」の画面が表示されました。「ロゴを選択」ボタンをクリックしてください。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ロゴ画像ファイルをアップロードする

「ロゴを選択」の画面が表示されました。「ファイルをアップロード」をクリックしてください。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ロゴに使いたい画像ファイルをドロップするか、ファイルを選択して、アップロードします。ロゴ画像の推奨サイズは、お使いのテーマによって異なります。「歯科医院・歯医者さん向け WordPress テーマ by Communitycom」の推奨ロゴ画像サイズは330×30ピクセルです。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

アップロードされた画像ファイルにチェックを入れて、「選択」をクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ロゴ画像を切り抜く

必要に応じて画像の切り抜きを行い、「画像の切り抜き」をクリックします。画像の切り抜きは、画面上に表示されるダイアログボックス(点線)を動かして大きさを決定します。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ロゴ画像を反映する

サイトロゴ画像の設定ができました。「公開」をクリックして反映します。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ヘッダー画像を設定する

テーマの種類によって、ヘッダー画像を設定できるものがあります。ヘッダー画像とは、ホームページ上部の一番目立つところに設置される画像のことです。

ヘッダー画像を設定するには、カスタマイザーのメニューから「ヘッダー画像」をクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ヘッダー画像をアップロードする

「現在のヘッダー」に現状の画像が表示されているので、この画像を変更しましょう。「新規画像を追加」をクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

「画像の選択」画面が表示されました。ヘッダー画像に使いたい画像ファイルをドロップするか、ファイルを選択して、アップロードします。 ヘッダー画像の推奨サイズは、お使いのテーマによって異なります。「歯科医院・歯医者さん向け WordPress テーマ by Communitycom」の推奨ヘッダー画像サイズは2000×1000ピクセルです。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

アップロードされた画像ファイルにチェックを入れて、「選択して切り抜く」をクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ヘッダー画像を切り抜く

必要に応じて画像の切り抜きを行い、「画像切り抜き」をクリックします。切り抜かない場合は「切り抜かない」をクリックします。画像の切り抜きは、画面上に表示されるダイアログボックス(点線)を動かして大きさを決定します。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

ヘッダー画像を反映する

ヘッダー画像の設定ができました。「公開」をクリックして反映します。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

キーカラーを設定する(デザインの設定)

「キーカラー」という、ホームページの基調となる色を選択することができます。カスタマイザーの画面から「デザインの設定」メニューをクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

キーカラーの色を選択する

「デザインの設定」画面が表示されました。「歯科医院・歯医者さん向け WordPress テーマ by Communitycom」では、キーカラーとキーカラー(明)の2色が設定できます。設定したいキーカラーの「色を選択」をクリックします。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

キーカラーに設定する色をカラーパレットから選ぶか、数値(16進数)で入力します。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

キーカラーを反映する

「公開」をクリックすると、キーカラーの変更がホームページに反映されます。

WordPress(ワードプレス)超入門 カスタマイザーで見た目をカスタマイズしよう

株式会社コミュニティコムが運営するWordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップでは、弁護士・法律事務所・士業向け WordPress テーマや、歯科医院・歯医者さん向け WordPress テーマなど、 ご購入から30日間の無料サポート付きWordPressテーマを販売しています。もちろん新エディター「Gutenberg(グーテンベルク)」対応です。
>> コミュニティコムショップのWordPressテーマ一覧

また、テーマをご購入いただいたお客様に向けて、テーマに関する単発または継続的なサポートプランもご用意しております。
>> コミュニティコムショップのサポートサービス一覧