広告
はじめに
第10回の記事では、ブログ画面を作り始める前の準備として、
- あらかじめ用意しておきたい画像の種類
- フリー画像と生成AI画像の考え方
- 画像サイズをそろえる重要性
について解説しました。
画像の準備ができたら、次はいよいよ ブログの見た目そのもの を整える段階に入ります。
今回のテーマは、
👉 カスタマイザーの設定
です。
カスタマイザーは、
- サイト全体の雰囲気
- 文字の大きさや読みやすさ
- ヘッダーやフッターの構成
- トップページや記事ページの表示方法
など、ブログの「外観」に関わる部分をまとめて調整できる場所です。
「デザインは難しそう」「設定変更したら壊れそう」
そんな不安を感じる方も多いかもしれませんが、心配はいりません。
この記事では、
- 最初に設定しておくべきポイント
- 後回しでも問題ないポイント
をはっきり分けながら、初心者の方でも迷わず進められるように解説していきます。
カスタマイズとカスタマイザーの違い
- カスタマイズ
- ブログの見た目や使い勝手を自分好みに整えていく作業全体のことを指します。
- カスタマイザー
- カスタマイズを行なうための、WordPressに用意された設定画面のことです。
※ この記事では、カスタマイザーだけを使って、最低限の見た目を整える方法に絞って解説します。
第11回で解説する内容
この記事では、以下の項目を順番に説明します。
- カスタマイザーとは何か
- サイトアイコンの設定
- サイト全体設定（色・文字・余白）
- ヘッダーの設定
- フッターの設定
- トップページの設定
- SNS情報の設定
💡 最初からすべて完璧に設定する必要はありません。
この記事のゴールは、
👉 「安心して公開できる見た目を整えること」
です。
カスタマイザーとは？
カスタマイザーとは、
- 実際のサイト画面を見ながら
- 設定を変更し
- その結果をすぐ確認できる
とても便利な機能です。
開き方
カスタマイズ をクリック
カスタマイズ画面が表示される
- 左側の設定項目を変更すると、右側に表示されているサイトのプレビュー画面に、その変更内容がリアルタイムに反映されます
- 公開ボタンを押すまでは実際のサイトには反映されません。
WordPress設定（サイトアイコン）
WordPress設定では、タイトルやキャッチフレーズ、ホームページの表示方法、サイトアイコンなど、
サイトの基本情報や表示方式を設定します。
今回は、この中からサイトアイコンのみを設定します。
サイトアイコンとは、
- ブラウザのタブに表示される小さなアイコン
- ブックマークしたときに表示されるアイコン
です。
設定手順
WordPress設定 をクリック
サイト基本情報 をクリック
「サイトアイコンを選択」をクリック
「ファイルをアップロード」タブを選択後、「ファイルを選択」をクリック
① 「サイトアイコン」画像をクリック
② 「開く」をクリック
選択 をクリック
公開 をクリック（設定内容が保存されます）
① タブにサイトアイコンが表示されていることを確認
② 「＜」を2回クリックして、カスタマイズ画面に戻る
サイト全体設定
ここでは、サイト全体のデザインルールを決めていきます。
色・文字・余白など、「全ページに共通する部分」なので、シンプルさを最優先に考えましょう。
サイト全体設定 をクリック
基本カラー
設定の考え方はとてもシンプルです。
・メインカラー：サイトの雰囲気
・テキストカラー：読みやすさ重視
・リンクカラー：一般的な青色でOK
・背景色：白〜薄い色がおすすめ
設定手順
基本カラー をクリック
① メインカラー の 色を選択 をクリック
② 色のカラーコードを直接入力（例:#ad9a70）または 希望の色をクリック
① 同様にテキストカラーの色を設定（例：#333333）
② 同様にリンクカラーの色を設定（例：#0000ee）
③ 同様に背景色の色を設定（例：#f8fcf5）
④ 公開 をクリック（設定内容が保存されます）
⑤ 「＜」をクリックして、サイト全体設定に戻る
基本デザイン
ここでは、読みやすさを最優先します。
設定手順
基本デザイン をクリック
① コンテンツの背景を白にする：オフを選択します
② フォントを4種類の中から選択します（例：Noto Sans JP）
③ PCのフォントサイズを選択します（例：大（17px））
④スマホのフォントサイズを選択します（例：デバイス可変：小）
⑤ 必要に応じて、プレビュー画面を切り替えながら確認します（PC、タブレット、スマホ）
⑥ 公開 をクリック（設定内容が保存されます）
⑦ 「＜」をクリックして、サイト全体設定に戻る
お知らせバー
最初のうちは使う場面が少ないため、いったん「表示しない」に設定しておきます。
設定手順
① お知らせバー をクリック
① 「表示しない」を選択
② 公開 をクリック（設定内容が保存されます）
③ 「＜」を2回クリックして、カスタマイズ画面に戻る
ヘッダー
「ヘッダー」は、サイト上部に表示されるロゴ・メニューなどの見た目や配置を設定する項目です。
色は、サイト全体設定と統一感が出るように意識しましょう。
設定手順
① ヘッダー をクリック
① ヘッダー背景色を設定（例：#ad9053）
② ヘッダー文字色を設定（例：#ffffff）
③ 公開 をクリック（設定内容が保存されます）
④ 「＜」をクリックして、カスタマイズ画面に戻る
フッター
「フッター」は、サイト最下部に表示される著作権表記・メニュー・ウィジェットエリアなどの見た目や配置を設定する項目です。
ここもヘッダーと色をそろえると、全体が引き締まります。
設定手順
① フッター をクリック
① フッター背景色を設定（例：#ad9053）
② フッター文字色を設定（例：#ffffff）
③ コピーライトのテキストを設定（サイトのタイトルを指定）
④ 公開 をクリック（設定内容が保存されます）
⑤ 「＜」をクリックして、カスタマイズ画面に戻る
トップページ
「トップページ」は、サイト全体のデザインや外観を設定する項目です。
最初から作り込みすぎる必要はありません。
トップページ をクリック
メインビジュアル
「メインビジュアル」は、サイトの第一印象を決める大きな画像やキャッチコピーのデザインや外観を設定する項目です。
設定手順
メインビジュアル をクリック
① 「画像」 を選択
② 「画像を選択」をクリックして、PC用のスライド画像を選択します。
・前回記事で作成した「トップページ用のイメージ画像」を選択
・設定手順は、「サイトアイコン」と同じ操作でOK
③「画像を選択」をクリックして、スマホ用のスライド画像を選択します。
・前回記事で作成した「トップページ用のイメージ画像」を選択
・設定手順は、「サイトアイコン」と同じ操作でOK
※ 好みに応じて縦長の画像など作成・設定してみてください
④ メインテキストを入力（例：60代・初心者に向けたブログ運営）
⑤ サブテキストを入力（必要に応じて設定してください）
⑥ PC用画像の高さを調整（例：25vw）
⑦ スマホ用画像の高さを調整（例：30vh）
⑧ 公開 をクリック（設定内容が保存されます）
⑨ 「＜」をクリックして、トップページ画面に戻る
記事スライダー
「記事スライダー」は、指定した記事を自動で横に切り替えながら表示し、トップページに動きと注目ポイントを作るための機能です。
最初のうちは使う場面が少ないため、いったん「設置しない」に設定しておきます。
設定手順
記事スライダー をクリック
① 「設置しない」を選択
② 公開 をクリック（設定内容が保存されます）
③ 「＜」をクリックして、トップページ画面に戻る
その他
「その他」は、メインビジュアル・記事スライダーの部分と、その下のコンテンツ部分との間の余白量を設定します。
設定手順
その他 をクリック
① なしを選択
② 公開 をクリック（設定内容が保存されます）
③ 「＜」を2回クリックして、カスタマイズ画面に戻る
SNS情報
「SNS情報」は、サイトに表示する各SNSアカウントのリンクやIDをまとめて設定する項目です。
SNSを使っていない方は、すべて空欄にしてください。
設定手順
SNS情報 をクリック
① あなたが運用している各SNSアカウントのプロフィールページ等があれば設定します。
（URLを設定すると、設定したSNSはフッターに自動表示されます）
② 公開 をクリック（設定内容が保存されます）
③ 「＜」をクリックして、サイト全体設定に戻る
カスタマイザーは一度で完成させなくていい
最後に、いちばん大切なことをお伝えします。
👉 カスタマイザー設定は、あとから何度でも変更できます。
- 最初は仮でOK
- 記事が増えてから見直してOK
完璧を目指す必要はありません。
まとめ
第11回のポイントをまとめると、
- カスタマイザーは画面を見ながら調整できる
- 最初は最低限の設定で十分
- 色・文字・余白はシンプルに
- 盛りすぎない、置きすぎない
という考え方です。
デザインは、
👉 ブログを続けながら少しずつ育てるもの
です。
次回予告｜固定ページとトップページを作ろう
次回は、
- プロフィールページ
- お問い合わせページ
- プライバシーポリシーページ
- トップページ構成
といった、
👉 ブログの中身を作る作業
に入っていきます。
今回の設定ができていれば、 驚くほどスムーズに進みます。
一緒に、少しずつ完成させていきましょう。
