WordPressで最初の記事1本目を公開する手順【Cocoon・実践編】

こんにちは、プライム・ストラテジーのそまです。

「これからWordPressについて学んでいきたい」「WordPressを使えるようになって提案の幅を広げたい」と考えているWebデザイナーの方と一緒に学んでいければと思っています。 

さて、今回は前回の続きとして、Cocoonで最初の記事を公開する手順を解説していきます。

WordPressのインストール手順については、別の記事「ConoHa WINGで高速なWordPressサイトを構築」で紹介しています。まだインストールが済んでいない方は、先にそちらをご確認ください。

この記事は、Cocoonで記事を公開できる最低限の準備が完了してからご覧ください。今回も一緒に学んで行きましょう！

記事を書く場所：「投稿 → 新規投稿を追加」

WordPressの管理画面左メニューから、「投稿」→「投稿を追加」をクリックします。

ここが記事を書く場所です。「固定ページ」ではなく「投稿」を使う点に注意してください。固定ページは会社概要やプロフィールなど、更新頻度の低いページに使ってください。ブログの記事などは「投稿」から作成してください。

HTMLやCSSの知識は必要無し！簡単に記事が書けるブロックエディタ

投稿画面を開くと、3つのエリアが表示されます。

こちらはブロックエディタという「文章や画像などをブロック単位で管理する」現在WordPressに標準搭載されているエディタです。ブロックエディタの大きな特徴は、文章や画像の位置調整やレイアウトの変更を、HTMLやCSSの知識がなくても簡単に行えるという点です。

この機能のお陰で、直感的に記事の作成・公開が行えるようになりました。
ざっくりと各エリアの目的を説明します。

• 上部ツールバー（青）：ブロックの操作や、下書き保存・公開ボタンがある
• 左サイドバー（緑）：どのブロックが使われているか表示される
• 中央エリア（紫）：実際に文章や画像を入力する場所
• 右サイドバー（赤）：カテゴリ、URL、アイキャッチなどの設定欄

右サイドバーが表示されていない場合は、画面右上の「設定」アイコン（保存の左にあるマーク）をクリックすると開きます。

WordPressで記事を最速で公開する手順

「全部整ってから公開」と考えると、なかなか手が進みません。ここでは、最低限の作業に絞って進める順番を紹介します。

① タイトルを入れる

まず画面中央の「タイトルを追加」欄に、任意のタイトルを入力します。
「WordPressは自動保存が働いています。そのため、PCの電源が切れた、ブラウザを間違えて切り替えてしまった、などあっても大丈夫です。とはいえ、こまめに「下書き保存」ボタンを押す習慣をつけておくと安心です。

② 見出しを先に作る

記事を上手に書くコツは、「見出しを先に作る」ことだと上司が言っていました。最初に記事全体の見出しを決めておくことで、書くべき内容が整理され、まとまりのある記事になるそうです。

見出しの入れ方：

1. 本文エリアをクリックして「+」ボタンを押す
2. 「見出し」ブロックを選択する
3. 見出しテキストを入力する

試しに見出しを入力してみました。太枠グレーの見出しは「見出し2（H2）」、形が違うのが「見出し3（H3）」です。

見出し設定にはルールがあります。「大きい見出しの下に小さい見出しを入れること」です。

• 見出し2
  • 見出し3
  • 見出し3

• 見出し2
  • 見出し3
    • 見出し4
  • 見出し3

このような使い方はOKです。NGの使い方はというと

• 見出し3
  • 見出し2
  • 見出し2

• 見出し2
  • 見出し4

見た目的に小さい見出しにしたいから最初から「見出し3」を使う、ということを以前私もしてしまったのですが、こちらは記事を書く上のルールとして覚えていただきたい事項です◎大きい順から使っていく、を覚えておいてくださいね。

ちなみに、見出しの設定が誤っている場合、WordPress左サイドバー 「アウトライン」にアラートが出ます。
見出しの設定に自信がないときはこちらのチェックもおすすめです◎

ちなみに、見出しのサイズを変更するのはとっても簡単です。
見出しブロックを選んだときに出るメニューの、「H2」と書いてある部分を任意の数字に変更すればよいのです。
ぜひためしてみてください。

③ 本文を書く

見出しの間に「段落」ブロックで本文を入力します。段落ブロックはエンターキーで自動的に追加されます。
もしくは先ほどの見出し同様、+を押して追加することもできます。どちらでもお好きな方をお使いください。

また、「段落を追加したいのに見出しを入れてしまった！」そんなときは対象のブロックをクリックし、出てくるメニューの一番左側を押すと、ブロックを変更することができます。

入れるブロックを間違えてしまった、はあるあるなので、この方法もぜひ試してみてください。

④ 必要なブロックだけ使う

最初のうちは、使うブロックを絞るのがおすすめです。

よく使うブロック：

• 段落：通常の文章
• 見出し：H2・H3の見出し
• 画像：記事内の画像挿入
• リスト：箇条書き・番号付きリスト

ブロックは「+」ボタンから追加できます。使いこなせていないブロックは、無理に使わなくてかまいません。
記事を何本か公開し、操作に慣れてきたら、装飾のできるブロックも試してみてください◎

公開前に右サイドバーで設定する項目

記事の本文ができたら、公開前に右サイドバーの設定を確認します。

カテゴリ

記事のジャンル分けに使います。右サイドバーの「カテゴリー」欄で選択または新規追加できます。まだカテゴリを決めていない場合は「未分類」のまま公開してもかまいません。後から変更できます。

いろんなカテゴリを追加したい！という場合は、「カテゴリーを追加」ボタンから追加することができます。
自身のサイトにあったカテゴリを設定してみてください。

タグ

記事に関連するキーワードを任意で設定できますが、最初は無理に設定しなくてよいでしょう。

URL（スラッグ）

スラッグとは、記事のURLの末尾部分のことです。 例：https://example.com/first-article

デフォルトでは日本語タイトルが自動変換されることがあり、URLが長い文字列になる場合があります。
英数字（例：first-article）に変更しておくのが一般的です。

文字列にしたい、数字にしたいなどスラッグのルールを変更したい場合は、前回の記事で解説した、「パーマリンク」という項目から変更することが可能です。

アイキャッチ画像

記事一覧や SNS でシェアされたときに表示されるメイン画像です。右サイドバーの「アイキャッチ画像」欄から設定します。用意できていない場合は、後から設定しても問題ありません。

WordPress 記事公開前のプレビューの確認と公開

プレビューで確認する

公開前に、実際の表示を確認できます。画面上部の「プレビュー」をクリックし、「新しいタブでプレビュー」を選ぶと、読者が見る状態の画面が別タブで開きます。

スマートフォン表示の確認もここでできます。

記事を公開する

問題なければ、画面右上の「公開」ボタンをクリックします。確認ダイアログが出たら、もう一度「公開」を押すと公開完了です。

なお、日時を指定して公開したい場合は、「公開」の横にある日時欄を変更することで予約投稿に設定できます。

よくあるつまずきポイント

WordPressの記事を公開する際に躓くポイントを整理しました。

• 「公開」を押したつもりが下書きのまま → 確認ダイアログで「公開」を2回押す必要があります。1回目は確認画面が出るだけです。

• 右サイドバーが表示されない → 画面右上の設定アイコン（公開の左側）をクリックすると表示されます。また、「投稿」タブと「ブロック」タブが切り替わる場合があるので、「投稿」タブになっているかも確認してみてください。

• スラッグが自動で文字化けしている → パーマリンク設定が「投稿名」になっていると、日本語タイトルがそのままURLに変換されることがあります。スラッグ欄を手動で英数字に変更してください。

まとめ：記事公開最短ルート

1. 「投稿 → 投稿を追加」を開く
2. タイトルを入れる
3. 見出しを先に並べる
4. 本文を書く（段落・リスト・画像のみで作成）
5. 右サイドバーでカテゴリ・URL・アイキャッチを設定する
6. プレビューで表示を確認する
7. 「公開」を2回押して完了

最初の1本は、完成度よりも、まず「公開する」ことを目標にしてみましょう◎
Cocoonの見た目の細かい調整や、SEOの設定などは、記事を公開してから少しずつ整えていけます。

次のステップとして、カテゴリの整理やCocoonのスキン設定を確認してみるとよいかもしれません。

読まれる記事にするために

一生懸命書いた記事を誰も見てくれない…もしかしたらページの表示速度遅くなってないですか？
読みやすい記事にするために、高画質な画像をたくさん掲載したい！気持ちはとっても分かるのですが、Webサイトにおける画像設定にはルールがあります。

以下の記事で画像設定について解説していますので、「画像をたくさん掲載する記事を書きたい」、という方は是非ご覧ください。

デザインは完璧。でも、誰も見てくれない DTPの常識とは違う、Webでの“画像の正解”とは？
https://kusanagi.biz/webdesigner/webdesigner_dtp_20260129/

お気軽にお問合せを！

Webデザイナー向けWebシステム/CMS入門ページでは、Webデザイナーさんへのお役立ちコンテンツをご紹介していきます。

• Webについての知識（Webアプリケーション、サーバ知識など）
• WordPressの構築や制作の基本知識
• WordPressを超高速化する「KUSANAGI」を利用するためのノウハウ

まだまだできたばかりのページではございますが、Webデザイナーさんと一緒に課題を解決していく、という気持ちでコンテンツ制作をしてまいります。

そこで、「これが知りたい！」「これが見たい！」などご希望あればコンテンツ依頼フォームよりご連絡ください！
フォームはちょっと…という方は私のX（https://x.com/risako0917_）へご連絡いただいても大丈夫です！