1.共通カラーとフォントの設定方法
このマニュアルでは、ウェブサイト全体の基本的な色(共通カラー)と文字のスタイル(共通フォント)を設定・変更する方法を解説します。
はじめに:共通設定でサイト全体のデザインを一括変更
共通カラーとは、ウェブサイト全体で使用される基本的な色合いをまとめて変更できる機能です。例えば、サイトのテーマカラーを青系やピンク系に変更したり、メインの色、サブの色、アクセントとして目立たせたい部分の色、そして文章の文字色などを統一感を持って設定できます。
共通フォントとは、ウェブサイト全体の文字の種類をまとめて変更できる機能です。初期設定ではパソコンに標準で入っているフォント(システムフォント)が使われていますが、Googleが提供している豊富な種類のフォント(Googleフォント)などに変更することで、サイトの印象を大きく変えることができます。
サイト共通のカラーとフォント設定画面へのアクセス方法
設定作業は、WordPressのカスタマイズ画面から行います。以下の手順でアクセスしてください。
- WordPressのダッシュボードにログインします。(ログイン方法がご不明な場合は、こちらをご参照ください。)
- ダッシュボードの左側メニューから「外観」にマウスカーソルを合わせるとサブメニューが表示されますので、その中の「カスタマイズ」をクリックします。
- カスタマイズ画面が表示されたら、左側のメニュー項目の中から「共通カラーとフォント」をクリックしてください。
共通カラーを設定する
「共通カラーとフォント」の項目内にある「カラー」をクリックすると、サイト全体の基本的な色を設定する画面に進みます。各項目の詳細は以下の通りです。
- メインカラー:サイト全体の基調となる色です。例えば、リンクの下線などにこの色が反映されます。
- アクセントカラー:サイトの中で特に訪問者の目を引きたい、強調したい部分に使用される色です。細部ですが、ここの色を変えるだけでもサイトの印象が変わります。
- 文字の色:ウェブサイト上の文章の基本的な色を変更できます。例えば、文字の色を濃いグレーから柔らかい黒に変更するなど、細かく調整できます。
各カラー項目の右側にある色見本をクリックすると、カラーピッカーが表示され、自由に色を選択できます。変更した色はリアルタイムで右側のプレビュー画面に反映されるので、確認しながら作業を進められます。
設定を初期状態に戻したい場合は、「クリア」ボタンをクリックしてください。
共通フォントを設定する
「共通カラーとフォント」の項目内にある「フォント」をクリックすると、サイト全体の文字フォントを設定する画面に進みます。
まずは、「サイト全体」のフォント設定から始めることをお勧めします。「固定ページ」や「投稿ページ」といった個別の設定項目もありますが、サイト全体のフォントを設定しておけば、基本的にすべてのページのフォントが統一されます。固定ページと投稿ページの違いが明確でない場合は、まず「サイト全体」の設定のみ行いましょう。
- フォントの選択:ここで希望のフォントを選びます。
- システムフォント:訪問者のコンピューターに最初からインストールされているフォントを使用します。表示速度が速く、サイトを軽量に保ちたい場合に適しています。
- Googleフォント:デザイン性の高いフォントを利用したい場合や、特定の書体でブランドイメージを統一したい場合に選択します。様々な種類のフォントが利用可能です。
- 日本語フォントの定番:日本語のウェブサイトでよく利用されるGoogleフォントとしては、「Noto Sans JP」が挙げられます。読みやすく、様々な太さに対応しています。
- フォントの太さ(ウェイト):文字の太さを調整できます。例えば、「900」のような大きな数値を設定すると、サイト全体の文字が非常に太字になります。サイトのコンセプトに合わせて、全体的に力強い印象にしたい場合などに活用できます。
- 推奨されるフォントの太さ:一般的に読みやすいとされるフォントの太さは「500」程度です。この太さであれば、視認性が高く、多くの方にとって快適に情報を読み取れるでしょう。
フォントの種類や太さを変更すると、共通カラーと同様に、サイト全体の表示フォントがリアルタイムでプレビューに反映されます。
これらの設定を色々と試してみて、あなたのウェブサイトに最適なカラーとフォントを見つけてください。