「WordPress(ワードプレス)超入門」は、株式会社コミュニティコムが運営する「WordPressテーマ&プラグイン販売 コミュニティコムショップ」が、WordPress初心者のためにホームページを開設するまでの手順をわかりやすく解説するシリーズです。
WordPressには、ホームページの見た目をリアルタイムで変更して確認できるテーマカスタマイザーという機能が用意されています。テーマをインストールした後にテーマカスタマイザーを使えば、HTMLやCSSといった難しいコードを書かなくても手軽に見た目のカスタマイズが可能です。
テーマカスタマイザーを使ってカスタマイズできる内容は、テーマによって異なります。ここでは、WordPressテーマ&プラグイン販売 コミュニティコムショップで販売している「歯科医院・歯医者さん向け WordPress テーマ by Communitycom」を例に解説します。
カスタマイザーの画面を表示する
WordPressの管理画面にログインし、「外観」にマウスポインターを合わせ、表示された「カスタマイズ」をクリックします。WordPress管理画面へのログイン方法については「WordPress(ワードプレス)の管理画面にログインしよう」を参照してください。

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

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

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

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

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

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

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

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

ヘッダー画像を設定する
テーマの種類によって、ヘッダー画像を設定できるものがあります。ヘッダー画像とは、ホームページ上部の一番目立つところに設置される画像のことです。
ヘッダー画像を設定するには、カスタマイザーのメニューから「ヘッダー画像」をクリックします。

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

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

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

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

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

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

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

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

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

株式会社コミュニティコムが運営するWordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップでは、弁護士・法律事務所・士業向け WordPress テーマや、歯科医院・歯医者さん向け WordPress テーマなど、 業種・用途特化のWordPressテーマを販売しています。もちろん新エディター「Gutenberg(グーテンベルク)」対応です。
>> コミュニティコムショップのWordPressテーマ一覧
また、1ヶ月間無料の月額サポートプランでの継続的なサポートや、制作代行オプションもご提供しております。
>> コミュニティコムショップのオプション一覧