好奇心の赴くままに。気になったことを、気ままに深掘り

WordPressの記事の書き方|投稿と固定ページの違い・カテゴリーとタグの使い分け

管理画面までたどり着いた。でも、左のメニューには「投稿」と「固定ページ」が並んでいて、どちらを押せばいいのか分からない——。

WordPressを初めて開いたとき、多くの人がここで止まります。このページでは、記事を1本、最後まで書いて公開するところまでを順番にご案内します。上から読み進めてもらえれば、そのまま1記事が仕上がる並びにしてあります。

「投稿」と「固定ページ」はどう違う?

管理画面の左メニューに、「投稿」と「固定ページ」が並んでいます。最初の関門はここです。

ざっくりしたイメージは、こうです。

  • ブログを書きたい → 投稿
  • お店や会社のホームページを作りたい → 固定ページ

まずはこれで合っています。ただし、ブログでも固定ページは使います。プロフィール、お問い合わせなどです。

もう少し正確に言うと、こうなります。

  • 投稿 … 日記帳のページ。書けば書くほど増えていき、新しい順に一覧へ並びます
  • 固定ページ … 玄関の案内板。増えることを前提としていない、単独で立っているページです

どんどん増えていくものが投稿、増えないものが固定ページ。この線引きで覚えておくと、後々まで迷いません。

なぜ2種類あるの?(仕組みの話)

「書くだけなら同じやん」と思いますよね。私も最初、ここで引っかかりました。

違いは、書いたあとにWordPressがどう扱うかにあります。

投稿を公開すると、WordPressはそれを自動的にあちこちへ流し込みます。トップページの新着一覧、カテゴリーごとの一覧、タグの一覧、月別の一覧。何もしなくても、勝手に並べてくれます。

固定ページは、流れません。そこに置かれたまま、じっと立っています。一覧にも出てこないし、日付順にも並びません。

つまり2種類あるのは、「一覧に乗せるか、乗せないか」を分けるためです。

考えてみると、これは自然なことです。「お問い合わせ」が新着記事の一覧にまぎれ込んでいたら困りますよね。

WordPressは、この2つを別の型紙(テンプレート)で表示しています。投稿は投稿用の型紙、固定ページは固定ページ用の型紙。だから、投稿だけサイドバー付き、固定ページは1カラム、といった作り分けができるわけです。この「型紙」の正体は、あとの章(テーマの自作)でそのまま出てきます。いまは、中身の入れ物が2種類あるとだけ分かっていれば十分です。

表で見るとこうなります

投稿固定ページ
一覧に並ぶ並ぶ並ばない
カテゴリー・タグ使える使えない
日付表示される基本は表示しない
向いているものブログ記事、お知らせプロフィール、まとめ、問い合わせ

カテゴリーやタグが固定ページで使えないのも、同じ理由です。一覧に流れないものに、分類札を付ける意味がないからですね。

迷ったら投稿でOK

ブログの中身は、ほとんどが投稿になります。固定ページは、サイト全体で5枚も10枚も作るものではありません。

「これはどっちだろう」と迷ったら、投稿にしておいてください。あとから固定ページへ変えることもできます。

AD – 読み進める前のひとやすみ

記事を書く画面の使い方

WordPressの編集画面は「ブロックエディター」と呼ばれます。名前のとおり、レゴブロックを積んでいく感覚です。

文章も、見出しも、画像も、ぜんぶが同じ「ブロック」という部品。それを縦に積んでいくと、1つの記事になります。

新しいブロックを足すときは、左上の「+」ボタンを押します。たくさん種類がありますが、最初に覚えるのは3つだけで十分です。

  • 段落 … ふつうの文章。何も選ばずに書き始めると、これになります
  • 見出し … 文章のまとまりに付ける「小さなタイトル」
  • 画像 … 写真やイラストを入れる

残りのブロックは、必要になったときに探せば大丈夫です。

右側のパネルは2つある

画面の右側に、設定を並べたパネルがあります。ここに「投稿」と「ブロック」の2つのタブがあるのに気付いてください。この切り替えを知らないと、「説明どおりの項目が見つからない」と迷子になります。

  • 投稿タブ … 記事ぜんたいの設定。カテゴリー、タグ、アイキャッチ画像、URLなど
  • ブロックタブ … いま選んでいる1つのブロックだけの設定。文字サイズ、色、画像の代替テキストなど

家にたとえると、投稿タブが「家全体の設計図」、ブロックタブが「いま手に持っている部品の説明書」です。

ここで戸惑いやすいのが、ブロックタブの中身は、選ぶブロックによって毎回変わるという点。画像ブロックを選べば画像の設定が、見出しを選べば見出しの設定が出てきます。さっきまであった項目が消えても、故障ではありません。別の部品を手に取っただけです。

「あるはずの設定が見つからない」と思ったら、まずタブが合っているか、次に目的のブロックを選べているかを確認してください。だいたいこのどちらかです。

なお、右側のパネルが見当たらないときは、画面右上の設定マークで開いたり閉じたりできます。

AD – 読み進める前のひとやすみ

見出しの使い方(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です。

見出しは、装飾ではなく目次の材料です。検索エンジンは見出しを読んで「この記事は何がどういう順番で書かれているか」を判断しています。飾りのつもりで使うと、話の構造が伝わらなくなってしまいます。

文字を大きくしたいだけなら、段落ブロックのまま文字サイズを変えれば済みます。

AD – 読み進める前のひとやすみ

リンクと画像を入れる

リンクの張り方

文章の中でリンクにしたい部分を選択して、上に出てくるツールバーのリンクマークをクリック。URLを貼り付ければ完了です。

同じ画面で「新しいタブで開く」を選べます。他所のサイトへ送るリンクは、新しいタブで開くのがおすすめです。自分のサイトから読者がいなくなってしまうのを防げます。自分のサイト内へのリンクは、そのままで構いません。

画像を入れる

画像ブロックを追加して、写真をドラッグするか、パソコンから選びます。入れるときに、2つだけ気を付けてください。

① ファイル名は英数字にする

「旅行写真.jpg」のような日本語のファイル名は、環境によって不具合の原因になります。アップロードする前に「kyoto-temple.jpg」のように英数字へ変えておくと安心です。

② 代替テキスト(alt)を書く

画像を選ぶと、右側のブロックタブにある『代替テキスト』という欄があります。ここに、その画像に何が写っているかを短く書きます。目の見えない方が音声で読み上げるときに使われますし、検索エンジンも画像の内容をここで判断しています。

「京都・清水寺の本堂」くらいの簡単な説明で十分です。

なお、スマホで撮った写真はそのままだと重すぎることがあります。表示が遅くなるので、画像を軽くする方法(WebP)もあわせてどうぞ。

AD – 読み進める前のひとやすみ

カテゴリーとタグの使い分け

投稿には「カテゴリー」と「タグ」を付けられます。似ているようで、役割がまったく違います。

  • カテゴリー … 本棚の「棚」です。1つの記事は、1つの棚に置きます
  • タグ … 本に貼る「付箋」です。1つの記事に何枚貼っても構いません

棚は動かしません。付箋は自由に足せます。この感覚をつかんでおくと、迷わなくなります。

タグは便利ですが、1記事につき3〜5個を目安にしてください。付箋を貼りすぎた本は、かえってどこに何があるか分からなくなります。

AD – 読み進める前のひとやすみ

公開する前に見ておく4か所

書き終わったら、公開ボタンを押す前にここだけ確認します。

① パーマリンク(URL)

右側の投稿タブにある「スラッグ」です。何もしないと日本語のタイトルがそのままURLになってしまい、リンクを貼ったときに長い記号の羅列になります。英数字とハイフンで、短く書き換えてください。

例:wordpress-post-basics

② アイキャッチ画像

記事の一覧やSNSでシェアされたときに表示される、代表画像です。設定しておくと見栄えがまったく違います。

③ 抜粋

記事の一覧に表示される短い紹介文です。空欄でも自動で作られますが、自分で書いたほうが読者に伝わります。

④ プレビュー

「プレビュー」から、スマホ表示を必ず確認してください。読者の多くはスマホで読みます。パソコンで整って見えても、スマホでは画像がはみ出していた、ということがよくあります。

確認が済んだら、公開ボタンを押しましょう。おつかれさまでした。

次は「見た目」を変えてみる

ここまでで、記事を書いて公開する流れはひととおり身に付きました。あとは同じことの繰り返しです。書いているうちに、自然と手が覚えます。

次に気になってくるのは、たぶん「見た目」です。文字の大きさ、色、ヘッダーの形——このあたりを自分好みに変えていく仕組みが、いまのWordPressには用意されています。

最後まで読んでいただき、ありがとうございました🍵