はじめに
第17章「テーマをインストールして有効化しよう」では、テーマをWordPressへ、
インストールして有効化する
ところまで進みました。
テーマを有効化すると、
「では、色を変えてみよう」
「ロゴを入れたい」
「ヘッダーを整えたい」
「メニューを作りたい」
と、いよいよホームページらしい見た目を作りたくなります。
ところが、WordPressの解説を検索すると、
- 「外観 → カスタマイズを開きます」
- 「外観 → エディターを開きます」
- 「テーマ設定を開きます」
など、説明がバラバラなことがあります。
自分の管理画面を見ると、
説明にあるメニューそのものが見つからない
ということもあります。
これは、必ずしも自分のWordPressがおかしいわけではありません。
使っているテーマの種類によって、
ホームページ全体を設定する場所が違う
ことがあるからです。
今回は、実際にデザインを変更する前に、
「どこを触れば、何が変わるのか」
を整理しておきましょう。
まず知っておきたい3つの編集場所
テーマを設定するときは、まずWordPressの編集場所を大きく3つに分けて考えると分かりやすくなります。
①投稿・固定ページの中身を編集する場所
②ホームページ全体を編集する場所
③テーマ独自の設定をする場所
それぞれ役割が違います。
1．投稿・固定ページの中身を編集する
これは、すでに第13章・第14章で使った、
ブロックエディター
です。
たとえば、
「初めての方へ」
という固定ページの、
- 見出し
- 文章
- 写真
- リスト
- ボタン
などを編集します。
つまり、
そのページに何を書くか
を編集する場所です。
2．ホームページ全体を編集する
こちらは、
- 全体の色
- 文字
- ヘッダー
- フッター
- ナビゲーション
- ページ全体のレイアウト
などに関係します。
ただし、
ここへ入る方法がテーマによって違います。
大きく分けると、
- クラシックテーマ
- ブロックテーマ
で違いがあります。
クラシックテーマでは「カスタマイザー」を使うことがある
クラシックテーマでは、
「外観」→「カスタマイズ」
から、
カスタマイザー
を利用するテーマがあります。
カスタマイザーでは、テーマが対応していれば、
- サイト基本情報
- ロゴ
- 色
- 背景
- メニュー
- ウィジェット
- ホームページ設定
- 追加CSS
などを設定できます。
変更内容をプレビューしながら調整できるのも特徴です。
ただし、
カスタマイザーに何が表示されるかはテーマによって異なります。
あるテーマには「色」があり、
別のテーマには同じ項目がない、
ということもあります。
ブロックテーマでは「サイトエディター」を使う
ブロックテーマでは、基本的に、
「外観」→「エディター」
から、
サイトエディター
を開きます。
WordPress公式では、サイトエディターを使って、
ヘッダーからフッターまで、サイト全体をブロックで編集できる
と説明しています。
サイトエディターには、現在、
- ナビゲーション
- スタイル
- 固定ページ
- テンプレート
- パターン
などを管理する場所があります。
つまり、ブロックテーマでは、
ページの中だけでなく、ホームページ全体をブロックで組み立てていく
考え方が強くなります。
ブロックテーマでは「カスタマイズ」が見つからないことがある
WordPressの古い解説記事を見ると、
「まず外観 → カスタマイズを開きましょう」
と書かれていることがあります。
しかし、ブロックテーマを使っている場合、
「カスタマイズ」が通常表示されないことがあります。
ブロックテーマでは、サイトエディターを使ってサイト全体を編集するためです。
そのため、
「自分のWordPressにはカスタマイズがない」
からといって、
設定を間違えたとは限りません。
まず、
自分が使っているテーマがクラシックテーマなのか、ブロックテーマなのか
を確認しましょう。
「スタイル」はサイト全体の見た目をそろえる場所
ブロックテーマでは、
サイトエディターの中に、
スタイル
という機能があります。
WordPress公式では、スタイルを使って、
- 色
- タイポグラフィ
- レイアウト
- 余白
- 背景
- 各ブロックの見た目
などを、
サイト全体のレベルで設定できる
と説明しています。
ここが重要です。
たとえば、すべてのページで使う本文の文字色を変更したいとき、
各ページを1枚ずつ開いて色を変えるより、
サイト全体のスタイルとして決める
方が管理しやすくなります。
「そのページだけ」と「サイト全体」を分けて考える
デザインを変更するときは、
どこまで変えたいのか
を考えます。
たとえば、
「このページだけボタンを目立たせたい」
のであれば、
そのページのボタンブロックを編集します。
一方、
「ホームページ全体のボタンを同じ形にしたい」
のであれば、
テーマやスタイル側で全体設定できる方が管理しやすい場合があります。
つまり、
変更したい範囲を先に考える
ことが大切です。
ヘッダーやフッターは1ページだけのものではない
ホームページの上部にある、
ヘッダー
や、
下部にある、
フッター
は、多くのページで共通して表示されます。
そのため、
固定ページの本文を編集する感覚で、
各ページへ同じヘッダーを毎回作るものではありません。
ブロックテーマでは、
ヘッダーやフッターなどの繰り返し使う部分を、
テンプレートパーツ
として管理できます。
現在のWordPressでは、サイトエディターの「パターン」から、こうしたテンプレートパーツを管理できます。
ここでは仕組みだけ理解できれば大丈夫です。
実際のヘッダー作成は、後の章で行います。
「テンプレート」はページの中身とは違う
WordPressでは、
テンプレート
という言葉も出てきます。
テンプレートは、
ページや投稿を、どんな構造で表示するか
を決めるものです。
たとえば、
ヘッダー
↓
ページタイトル
↓
本文
↓
フッターという全体構造です。
一方、
「初めての方へ」に書いた文章そのものは、
固定ページのコンテンツ
です。
初心者のうちは、
中身と、その中身を入れる枠は別
と考えると分かりやすいでしょう。
パターンという便利な仕組みもある
ブロックエディターやサイトエディターでは、
パターン
という言葉も登場します。
パターンは、
複数のブロックをあらかじめ組み合わせたレイアウトです。
たとえば、
- 写真＋文章
- 見出し＋説明＋ボタン
- お問い合わせ案内
- 料金案内
などを、まとまりとして利用できます。
ブロックテーマでは、テーマに付属するパターンが用意されている場合もあります。
しかし、
最初からパターンを全部理解する必要はありません。
今は、
「複数のブロックをまとめた便利なひな形もある」
程度に覚えておきましょう。
3．テーマ独自の設定画面がある場合もある
ここまで、
- カスタマイザー
- サイトエディター
を見てきました。
しかし、テーマによっては、それとは別に、
テーマ独自の設定画面
を持っていることがあります。
たとえば、
- テーマ設定
- デザイン設定
- Themeオプションs
- Theme設定
などの名前で表示されることがあります。
これはWordPress全体で共通の画面ではありません。
そのテーマを作った会社や開発者が用意した機能
です。
そのため、テーマ独自設定については、
WordPress全般の解説記事よりも、
利用しているテーマの公式マニュアル
を確認する方が正確です。
「WordPressの設定」と「テーマの設定」も違う
管理画面には、
「設定」
というメニューもあります。
これはテーマ設定とは別です。
WordPressの「設定」では、
- サイトタイトル
- URL
- 日付
- 表示
- コメント
- パーマリンク
など、
WordPressそのものの基本動作
に関係する設定を行います。
一方、テーマ設定は主に、
サイトの見た目やレイアウト
に関係します。
この2つを混同しないようにしましょう。
何かを変える前に「どの範囲へ影響するか」を考える
デザイン設定で最も大切なのは、
変更したらどこまで変わるのか
を確認することです。
たとえば、
- その文字だけ変わる
- そのページだけ変わる
- 同じ種類のブロック全部が変わる
- ホームページ全体が変わる
では、影響の大きさが違います。
設定項目を見つけたからといって、すぐ変更するのではなく、
「これはどこへ効く設定なんだろう？」
と一度考える癖をつけましょう。
デザインを始める前に決めておきたいこと
テーマの設定画面を開く前に、最低限、
- ロゴを使うか
- 基本となる色
- 文字の雰囲気
- ページの基本構成
- ヘッダーに何を置くか
- フッターに何を置くか
などを考えておくと、設定しやすくなります。
画面を開いてから、
「色はどうしよう」
「メニューは何を置こう」
と考えると、設定と設計が混ざってしまいます。
先に決める。\ そのあとWordPressで設定する。
この順番で進めましょう。
最初から細かく作り込みすぎない
テーマを設定し始めると、
- 色
- フォント
- 余白
- 枠線
- 影
- ボタン
- 背景
- アニメーション
など、細かな部分が気になります。
しかし、ホームページを作り始めた段階では、
細部より全体を先に作る
方が進めやすくなります。
まず、
- 基本の色
- 基本の文字
- ヘッダー
- フッター
- ナビゲーション
- 基本ページ
を作る。
そのあとで、
細かな余白や装飾を調整します。
テーマが違えば、画面も違う
ここまでの内容で一番大切なのは、
WordPressの操作画面は、テーマによって違って見えることがある
ということです。
だから、このシリーズでも、
「このボタンを必ず押してください」
だけではなく、
なぜその場所を設定するのか
を説明しながら進めます。
画面が少し変わっても、
仕組みが分かっていれば、
「今はサイト全体の色を変えようとしている」
「これはヘッダーを編集する画面だ」
と判断できます。
WordPressを長く使うためには、
画面を暗記するより、
役割を理解する方が強い
のです。
今回のポイント
- テーマの設定場所は、テーマの種類によって違う
- 投稿・固定ページの中身は主にブロックエディターで編集する
- クラシックテーマではカスタマイザーを使うテーマがある
- ブロックテーマではサイトエディターを使う
- ブロックテーマでは「外観 → カスタマイズ」が通常表示されない場合がある
- サイトエディターではナビゲーション・スタイル・固定ページ・テンプレート・パターンなどを管理できる
- スタイルではサイト全体の色・文字・レイアウトなどを設定できる
- 「そのページだけ変える」のか「サイト全体を変える」のかを考える
- ヘッダーやフッターは多くのページで共通する部分
- テンプレートはページ本文とは別に、ページの表示構造を決める
- テーマ独自の設定画面がある場合もある
- WordPress本体の「設定」とテーマ設定は別
- 変更する前に、どこまで影響する設定なのか確認する
- 細かい装飾より、まず全体の基本設定から作る
今回の視点
WordPressの使い方を検索すると、
自分と違う画面が出てくることがあります。
そんなとき、
「説明通りのボタンがないから分からない」
で止まらないことが大切です。
今、自分は、
ページの中身を変えたいのか。
サイト全体を変えたいのか。
テーマ固有の機能を設定したいのか。
ここを考えると、
見るべき場所が絞られます。
画面の場所ではなく、設定の役割から考える。
これが、WordPressの画面が将来変わっても使い続けられる考え方です。
Part 3｜ホームページの見た目と構造を作る