第6回 のんびり研究所構築日記｜カテゴリを作って、日記と神社の記事を公開してみよう

2026.07.22
この記事は約8分で読めます。

前回までは、WordPressへプラグインを追加し、記事内の用語へ説明を表示できるようにしました。

今回は、いよいよ実際の記事を作って公開します。

最初に記事を内容ごとに分けるための「カテゴリ」を作り、そのあとに「日記」と「神社」の記事を1件ずつ作成します。

今回は、カテゴリの作成、タイトルと本文の入力、見出し、画像、インフォボックス、スラッグ、公開までを一通り試します。

このシリーズについて

※実際の作業量によって、記事数や各回の内容を変更する場合があります。

今回行うこと

今回の作業は、大きく分けて次の4つです。

  1. 「日記」と「神社」のカテゴリを作る
  2. 日記の記事を作って公開する
  3. 神社の記事を作って公開する
  4. Cocoonで目次と読了時間を表示する

少し作業量がありますが、ここまで終わると、WordPressで記事を書く基本的な流れが分かるようになります。

カテゴリとは

WordPressでは、記事を内容ごとに分類するために「カテゴリ」を使います。

たとえば、日々の出来事を書く記事は「日記」、神社を紹介する記事は「神社」、パソコンの使い方を紹介する記事は「パソコン」というように分けられます。

記事が数件しかないうちは、カテゴリがなくても困らないかもしれません。しかし、記事が増えてくると、すべての記事が同じ場所へ並ぶため、読みたい記事を探しにくくなります。

カテゴリは、本棚の中にある「日記」「神社」「パソコン」などの仕切りだと考えると分かりやすいです。

「日記」と「神社」のカテゴリを作る

WordPressの管理画面から、左側のメニューにある「投稿」にマウスポインターを合わせ、「カテゴリー」をクリックします。

「日記」カテゴリを作る

新規カテゴリーを追加する画面で、次のように入力します。

  • 名前：日記
  • スラッグ：diary
  • 親カテゴリー：なし
  • 説明：空欄のままで構いません

入力できたら、「新規カテゴリーを追加」をクリックします。

画面右側の一覧に「日記」が追加されていれば成功です。

スラッグとは

スラッグは、カテゴリや記事を識別するためにURLの一部として使われる文字列です。

カテゴリ名は日本語の「日記」ですが、スラッグには半角英数字で「diary」と入力しました。

スラッグは、半角英小文字、数字、ハイフンを使った短い文字列にしておくと、URLが分かりやすくなります。

「神社」カテゴリを作る

同じ手順で、もう一つカテゴリを追加します。

  • 名前：神社
  • スラッグ：jinja
  • 親カテゴリー：なし
  • 説明：空欄のままで構いません

入力できたら、「新規カテゴリーを追加」をクリックします。

カテゴリ一覧に「日記」と「神社」の2つが表示されていることを確認します。

日記の記事を作る

最初に、操作を確認しながら簡単な日記の記事を作ります。

管理画面左側の「投稿」にマウスポインターを合わせ、「新規投稿を追加」をクリックします。

記事のタイトルを入力する

「タイトルを追加」と表示されている部分へ、次のタイトルを入力します。

カテゴリを「日記」にする

投稿画面右側の設定欄から「カテゴリー」を開き、「日記」にチェックを入れます。

初期状態で「未分類」にチェックが入っている場合は、「未分類」のチェックを外します。

記事の内容に合ったカテゴリへチェックを入れ忘れないようにしましょう。何も選ばないまま公開すると、「未分類」に入ることがあります。

記事のスラッグを設定する

投稿画面右側の設定欄から、URLまたはパーマリンクに関する項目を開きます。

スラッグには、次の文字を入力します。

blog-start

WordPressのバージョンや投稿画面の状態によっては、一度下書きを保存したあとにURLの設定欄が表示される場合があります。

本文を入力する

タイトルの下にある本文入力欄へ、次の文章を入力します。

今日からブログを始めることにしました。
まだ分からないことも多いですが、少しずつ記事を増やしていく予定です。
実際に試して分かったことや、途中で失敗したことも残していきたいと思います。

この文章は練習用なので、同じ内容を入力しても、自分の言葉へ変更しても構いません。

見出しを作る

文章が長くなると、どこに何が書かれているのか分かりにくくなります。

そこで、内容の区切りごとに見出しを入れます。

ブロックの追加ボタン「＋」をクリックし、「見出し2（H2）」を選びます。

今回は、次の2つの見出しを作ります。

  • ブログを始めた理由
  • これから書きたいこと

見出しの種類は「H2」を使います。

記事の大きな区切りにはH2、その中をさらに分ける場合はH3を使います。見た目を大きくするためだけに見出しを使うのではなく、文章の構造に合わせて選びます。

見出しと文章を組み合わせて、次のような内容にします。

入力例

H2

ブログを始めた理由

本文

自分が調べたことや、実際に試したことを忘れないように残すため、ブログを始めることにしました。同じことで困っている人の参考にもなればうれしいです。

H2

これから書きたいこと

本文

日々の出来事だけでなく、パソコン、WordPress、旅行、神社など、興味を持ったことを少しずつ書いていく予定です。

画像を入れる

次に、記事の中へ画像を1枚入れてみます。

画像を入れたい場所でブロックの追加ボタンをクリックし、「画像」を選びます。

新しい画像を使う場合は「アップロード」、すでにWordPressへ登録している画像を使う場合は「メディアライブラリ」を選びます。

今回は、練習用の写真を1枚選択します。

画像を入れたら、必要に応じて代替テキストも入力します。

代替テキストには、画像が表示されない場合や、画面読み上げ機能を利用する人にも内容が伝わるように、その画像に何が写っているかを短く入力します。

Cocoonのアイコンボックスを入れる

Cocoonには、文章の中でポイントや補足を目立たせるためのブロックが用意されています。
ブロックの追加ボタンをクリックし、すべてを表示を押します。


左メニュー内の下のほうに「Cocoonブロック」があるので、その中からアイコンボックスを選びます。

アイコンボックスの中へ、次の文章を入力します。

このブログでは、うまくいったことだけでなく、失敗したことや迷ったことも記録していきます。

アイコンボックスは、読者に覚えておいてほしいこと、補足、ポイントなどを分かりやすく伝えたい場合に便利です。

下書きを保存してプレビューする

記事を公開する前に、一度下書きとして保存します。

画面右上の「下書き保存」をクリックします。

保存できたら、「表示」をクリックして、「新しいタブでプレビュー」をクリック。実際のページに近い状態で表示を確認します。

次の点を確認します。

  • タイトルが表示されているか
  • 見出しの大きさが正しいか
  • 文章の順番がおかしくないか
  • 画像が表示されているか
  • インフォボックスが表示されているか
  • 不要な空白がないか

公開後でも修正はできますが、誤字や画像の入れ間違いを減らすため、公開前にプレビューを確認する習慣を付けておくと安心です。

記事を公開する

内容に問題がなければ、画面右上の「公開」をクリックします。

確認画面が表示された場合は、もう一度「公開」をクリックします。

「ブログをはじめました　を公開しました」と表示されれば、最初の記事の公開は完了です。

神社の記事を作る

続いて、「神社」カテゴリの記事を作ります。

基本操作は日記の記事と同じなので、ここでは同じ説明を繰り返さず、確認しながら進めます。

新しい投稿を追加する

画面左上のWordpressロゴをクリックし、投稿一覧画面に戻ります。


管理画面から「投稿」→「新規投稿を追加」をクリックします。

タイトルには、次のように入力します。

近くの神社へ参拝しました

カテゴリとスラッグを設定する

カテゴリーは「神社」にチェックを入れ、「未分類」のチェックは外します。

スラッグには、次の文字を入力します。

shrine-visit

本文を入力する

今回は、次の文章を使って記事を作ります。

導入文

今日は、近くにある神社へ参拝しました。何度か訪れたことのある神社ですが、季節が変わると境内の雰囲気も少し違って見えます。

H2

境内の様子

文章

境内は静かで、ゆっくり参拝することができました。鳥居をくぐり、参道を進むと、普段の生活とは少し違う落ち着いた時間を感じられました。

H2

参拝して感じたこと

本文

短い時間でしたが、気持ちを切り替える良い機会になりました。次に参拝したときは、境内の建物や由緒についても、もう少し詳しく見てみたいと思います。

H2の見出しを2つ作り、その下へそれぞれ文章を入力します。必要であれば、境内や鳥居などの写真を1枚追加します。

保存・プレビュー・公開を行う

日記の記事と同じように、次の順番で進めます。

  1. 下書きを保存する
  2. 表示→新しいタブでプレビューで表示を確認する
  3. 問題がなければ公開する

これで、「日記」と「神社」に1件ずつ記事が作成されました。

同じ投稿画面から記事を作っても、カテゴリを分けておくことで、あとから内容別に整理して表示できます。

Cocoonで目次を表示する

今回作成した記事にはH2の見出しを入れました。

Cocoonでは、記事内の見出しをもとに目次を自動表示できます。

管理画面左側メニューの「Cocoon設定」をクリックし、「目次」タブを開きます。

「目次の表示」にある「目次を表示する」へチェックを入れ、目次表示の深さは「H2見出しまで」に設定します。

設定できたら、画面下にある「変更をまとめて保存」をクリックします。

目次は記事内の見出しをもとに作られます。記事にH2などの見出しがない場合は、目次が表示されないことがあります。

公開した日記の記事を開き、H2の見出しが目次として表示されていることを確認します。

記事を読む時間を表示する

Cocoonでは、記事を読むために必要なおおよその時間を表示できます。

管理画面から「Cocoon設定」を開き、本文に関する設定タブを確認します。

「記事を読む時間の目安を表示する」にチェックを入れます。（本文タブの一番下にあります）

設定を保存したら、公開した記事を開き、タイトル付近などに「この記事は約○分で読めます」と表示されることを確認します。

表示される時間は、記事の文字数などをもとに計算された目安です。

今回のまとめ

今回は、WordPressで実際に記事を作成し、公開するところまで進めました。

  • 「日記」と「神社」のカテゴリを作成した
  • カテゴリと記事のスラッグを設定した
  • タイトル、本文、H2見出しを入力した
  • 記事へ画像を追加した
  • Cocoonのインフォボックスを追加した
  • 下書き保存とプレビューを行った
  • 日記と神社の記事を公開した
  • CocoonでH2までの目次を表示した
  • 記事を読む時間を表示した

ここまでで、記事を書くための基本操作は一通り体験できました。

次回は、Cocoonの吹き出し機能を使い、記事の中で会話形式の説明ができるようにしていきます。