管理画面までたどり着いた。でも、左のメニューには「投稿」と「固定ページ」が並んでいて、どちらを押せばいいのか分からない——。
WordPressを初めて開いたとき、多くの人がここで止まります。このページでは、記事を1本、最後まで書いて公開するところまでを順番にご案内します。上から読み進めてもらえれば、そのまま1記事が仕上がる並びにしてあります。
「投稿」と「固定ページ」はどう違う?
管理画面の左メニューに、「投稿」と「固定ページ」が並んでいます。最初の関門はここです。
ざっくりしたイメージは、こうです。
- ブログを書きたい → 投稿
- お店や会社のホームページを作りたい → 固定ページ
まずはこれで合っています。ただし、ブログでも固定ページは使います。プロフィール、お問い合わせなどです。
もう少し正確に言うと、こうなります。
- 投稿 … 日記帳のページ。書けば書くほど増えていき、新しい順に一覧へ並びます
- 固定ページ … 玄関の案内板。増えることを前提としていない、単独で立っているページです
どんどん増えていくものが投稿、増えないものが固定ページ。この線引きで覚えておくと、後々まで迷いません。
なぜ2種類あるの?(仕組みの話)
「書くだけなら同じやん」と思いますよね。私も最初、ここで引っかかりました。
違いは、書いたあとにWordPressがどう扱うかにあります。
投稿を公開すると、WordPressはそれを自動的にあちこちへ流し込みます。トップページの新着一覧、カテゴリーごとの一覧、タグの一覧、月別の一覧。何もしなくても、勝手に並べてくれます。
固定ページは、流れません。そこに置かれたまま、じっと立っています。一覧にも出てこないし、日付順にも並びません。
つまり2種類あるのは、「一覧に乗せるか、乗せないか」を分けるためです。
考えてみると、これは自然なことです。「お問い合わせ」が新着記事の一覧にまぎれ込んでいたら困りますよね。
WordPressは、この2つを別の型紙(テンプレート)で表示しています。投稿は投稿用の型紙、固定ページは固定ページ用の型紙。だから、投稿だけサイドバー付き、固定ページは1カラム、といった作り分けができるわけです。この「型紙」の正体は、あとの章(テーマの自作)でそのまま出てきます。いまは、中身の入れ物が2種類あるとだけ分かっていれば十分です。
表で見るとこうなります
| 投稿 | 固定ページ | |
|---|---|---|
| 一覧に並ぶ | 並ぶ | 並ばない |
| カテゴリー・タグ | 使える | 使えない |
| 日付 | 表示される | 基本は表示しない |
| 向いているもの | ブログ記事、お知らせ | プロフィール、まとめ、問い合わせ |
カテゴリーやタグが固定ページで使えないのも、同じ理由です。一覧に流れないものに、分類札を付ける意味がないからですね。
迷ったら投稿でOK
ブログの中身は、ほとんどが投稿になります。固定ページは、サイト全体で5枚も10枚も作るものではありません。
「これはどっちだろう」と迷ったら、投稿にしておいてください。あとから固定ページへ変えることもできます。
記事を書く画面の使い方
WordPressの編集画面は「ブロックエディター」と呼ばれます。名前のとおり、レゴブロックを積んでいく感覚です。
文章も、見出しも、画像も、ぜんぶが同じ「ブロック」という部品。それを縦に積んでいくと、1つの記事になります。
新しいブロックを足すときは、左上の「+」ボタンを押します。たくさん種類がありますが、最初に覚えるのは3つだけで十分です。
- 段落 … ふつうの文章。何も選ばずに書き始めると、これになります
- 見出し … 文章のまとまりに付ける「小さなタイトル」
- 画像 … 写真やイラストを入れる
残りのブロックは、必要になったときに探せば大丈夫です。
右側のパネルは2つある
画面の右側に、設定を並べたパネルがあります。ここに「投稿」と「ブロック」の2つのタブがあるのに気付いてください。この切り替えを知らないと、「説明どおりの項目が見つからない」と迷子になります。
- 投稿タブ … 記事ぜんたいの設定。カテゴリー、タグ、アイキャッチ画像、URLなど
- ブロックタブ … いま選んでいる1つのブロックだけの設定。文字サイズ、色、画像の代替テキストなど
家にたとえると、投稿タブが「家全体の設計図」、ブロックタブが「いま手に持っている部品の説明書」です。
ここで戸惑いやすいのが、ブロックタブの中身は、選ぶブロックによって毎回変わるという点。画像ブロックを選べば画像の設定が、見出しを選べば見出しの設定が出てきます。さっきまであった項目が消えても、故障ではありません。別の部品を手に取っただけです。
「あるはずの設定が見つからない」と思ったら、まずタブが合っているか、次に目的のブロックを選べているかを確認してください。だいたいこのどちらかです。
なお、右側のパネルが見当たらないときは、画面右上の設定マークで開いたり閉じたりできます。
見出しの使い方(H2とH3)
見出しには、H2・H3・H4…と番号が付いています。これは本の「章」と「節」の関係と同じです。
- H1 … 本のタイトル
- H2 … 第1章、第2章
- H3 … 1-1、1-2という節
ここで大事なポイントが1つ。記事のタイトルが、すでにH1として使われています。なので、本文の中で使う見出しはH2から始めてください。
そして、H2の中をさらに分けたいときにH3を使います。
H2 見出しの使い方
H3 H2から始める理由
H3 やってはいけない使い方
H2 リンクと画像を入れる
こういう入れ子になっていれば正解です。H2を飛ばしていきなりH3、という使い方はしません。
⚠️ やりがちな失敗
「文字を大きくしたいから見出しにする」——これはNGです。
見出しは、装飾ではなく目次の材料です。検索エンジンは見出しを読んで「この記事は何がどういう順番で書かれているか」を判断しています。飾りのつもりで使うと、話の構造が伝わらなくなってしまいます。
文字を大きくしたいだけなら、段落ブロックのまま文字サイズを変えれば済みます。
リンクと画像を入れる
リンクの張り方
文章の中でリンクにしたい部分を選択して、上に出てくるツールバーのリンクマークをクリック。URLを貼り付ければ完了です。
同じ画面で「新しいタブで開く」を選べます。他所のサイトへ送るリンクは、新しいタブで開くのがおすすめです。自分のサイトから読者がいなくなってしまうのを防げます。自分のサイト内へのリンクは、そのままで構いません。
画像を入れる
画像ブロックを追加して、写真をドラッグするか、パソコンから選びます。入れるときに、2つだけ気を付けてください。
① ファイル名は英数字にする
「旅行写真.jpg」のような日本語のファイル名は、環境によって不具合の原因になります。アップロードする前に「kyoto-temple.jpg」のように英数字へ変えておくと安心です。
② 代替テキスト(alt)を書く
画像を選ぶと、右側のブロックタブにある『代替テキスト』という欄があります。ここに、その画像に何が写っているかを短く書きます。目の見えない方が音声で読み上げるときに使われますし、検索エンジンも画像の内容をここで判断しています。
「京都・清水寺の本堂」くらいの簡単な説明で十分です。
なお、スマホで撮った写真はそのままだと重すぎることがあります。表示が遅くなるので、画像を軽くする方法(WebP)もあわせてどうぞ。
カテゴリーとタグの使い分け
投稿には「カテゴリー」と「タグ」を付けられます。似ているようで、役割がまったく違います。
- カテゴリー … 本棚の「棚」です。1つの記事は、1つの棚に置きます
- タグ … 本に貼る「付箋」です。1つの記事に何枚貼っても構いません
棚は動かしません。付箋は自由に足せます。この感覚をつかんでおくと、迷わなくなります。
タグは便利ですが、1記事につき3〜5個を目安にしてください。付箋を貼りすぎた本は、かえってどこに何があるか分からなくなります。
公開する前に見ておく4か所
書き終わったら、公開ボタンを押す前にここだけ確認します。
① パーマリンク(URL)
右側の投稿タブにある「スラッグ」です。何もしないと日本語のタイトルがそのままURLになってしまい、リンクを貼ったときに長い記号の羅列になります。英数字とハイフンで、短く書き換えてください。
例:wordpress-post-basics
② アイキャッチ画像
記事の一覧やSNSでシェアされたときに表示される、代表画像です。設定しておくと見栄えがまったく違います。
③ 抜粋
記事の一覧に表示される短い紹介文です。空欄でも自動で作られますが、自分で書いたほうが読者に伝わります。
④ プレビュー
「プレビュー」から、スマホ表示を必ず確認してください。読者の多くはスマホで読みます。パソコンで整って見えても、スマホでは画像がはみ出していた、ということがよくあります。
確認が済んだら、公開ボタンを押しましょう。おつかれさまでした。
次は「見た目」を変えてみる
ここまでで、記事を書いて公開する流れはひととおり身に付きました。あとは同じことの繰り返しです。書いているうちに、自然と手が覚えます。
次に気になってくるのは、たぶん「見た目」です。文字の大きさ、色、ヘッダーの形——このあたりを自分好みに変えていく仕組みが、いまのWordPressには用意されています。
