はじめに：投稿は「6ステップ」で完成する
WordPressの無料テーマ「Cocoon（コクーン）」で、ブログ記事を1本公開するまでの手順を、管理画面のイラスト付きで解説します。
作業はログインしてから6ステップだけです。この記事の順番どおりに進めれば、WordPressを初めて触る方でも迷わずに公開まで進められます。
Cocoonで記事を公開するまでの全体の流れ
上の段から下の段へ順に進みます。STEP6のプレビューで気になる点があれば、編集画面に戻って直してから公開します。
所要時間の目安は、慣れるまでは1記事あたり60〜90分です。2本目以降は30分前後まで短縮できます。
管理画面で使う場所は3つだけ
| 左メニュー | 何をする場所か | この記事での出番 |
|---|---|---|
| 投稿 | 記事の新規作成・一覧・編集 | STEP1〜6すべて |
| メディア | 画像のアップロード・管理 | STEP3・4（画像、アイキャッチ） |
| Cocoon設定 | サイト全体の見た目・目次・SEOの初期設定 | 基本は初期値のままでOK |
最初に一度だけ：パーマリンクを「投稿名」にする
「設定」→「パーマリンク」で「投稿名」を選んでおくと、記事ごとにURLを自分で決められます。
STEP1 新規投稿を開く
左メニューの「投稿」→「新規投稿を追加」をクリックすると、記事の編集画面（ブロックエディタ）が開きます。
- 管理画面にログインする
- 左メニューの「投稿」にマウスを乗せる
- 「新規投稿を追加」をクリックする
初回はエディタの使い方ガイド（ようこそ画面）が表示されることがあります。右上の「×」で閉じて問題ありません。
書きかけの記事を再開するときは、「投稿」→「投稿一覧」から記事タイトルをクリックします。
STEP2 タイトルと本文を書く
編集画面は「上部ツールバー」「中央の編集エリア」「右の設定サイドバー」「画面下のCocoon設定欄」の4つに分かれています。記事は中央で書き、設定は右と下で行うと覚えておきましょう。
②で本文を書き、STEP4で③、STEP5で④を使います。①は保存・プレビュー・公開のときに使います。
ブロックエディタの考え方
文章・見出し・画像などの要素を、1つずつ「ブロック」として積み重ねて記事を作ります。段落1つ＝ブロック1つ、と覚えてください。
タイトルと本文の入力手順
- 一番上の「タイトルを追加」をクリックし、記事タイトルを入力する（目安は32文字前後）
- Enterキーを押すと本文の入力欄に移る
- そのまま文章を入力する。Enterキーで改行すると、次の段落ブロックが自動で作られる
- 段落の中で改行だけしたい場合は「Shift＋Enter」を押す
ブロックを追加・移動・削除する
| やりたいこと | 操作 |
|---|---|
| ブロックを追加 | 左上の青い「＋」ボタン、または空の行で「/」を入力してブロック名を検索 |
| ブロックを移動 | ブロックをクリック→ツールバーの「↑」「↓」 |
| ブロックを削除 | ブロックをクリック→ツールバーの「︙」→「削除」 |
| 操作を取り消す | 上部の「↶」ボタン、またはCtrl＋Z（MacはCommand＋Z） |
こまめに「下書き保存」する
STEP3 見出し・画像・Cocoonブロックで読みやすくする
読みやすい記事は「見出しで区切る→画像で見せる→ボックスで強調する」の3点で作れます。Cocoonは見出しから目次を自動で作るので、見出しを正しく使うだけで記事の質が上がります。
見出しを入れる（H2から使う）
- 「＋」→「見出し」を選ぶ
- ツールバーで「H2」を選び、見出し文を入力する
- H2の中をさらに分けたいときは「H3」を使う
H1は記事タイトルに使われているため、本文ではH2から始めます。「H2→H3→H4」の順を飛ばさないことがポイントです。
H2が「章」、H3が「節」にあたります。H2の下にいきなりH4を置かず、必ずH3を挟みます。
画像を入れる
- 「＋」→「画像」を選ぶ
- 「アップロード」でパソコンから選ぶ、またはファイルをドラッグ＆ドロップする
- 右サイドバーの「代替テキスト」に、画像の内容を短く書く（例：Cocoonの投稿画面）
画像はアップロード前に横幅1200px程度まで縮小しておくと、ページの表示が速くなります。
Cocoon独自ブロックで装飾する
「＋」でブロックを検索するか、ブロック一覧の「Cocoonブロック」の欄から選びます。
例として「吹き出し」を選んだ場合です。ほかのCocoonブロックも同じ手順で挿入できます。よく使うのは次の5つです。
| ブロック名 | 見た目・用途 | 使いどころ |
|---|---|---|
| 吹き出し | アイコン付きの会話形式 | 読者の疑問や筆者のひとことを入れる |
| アイコンボックス | 注意・ポイントなどのアイコン付き枠 | 「ここだけは覚えて」を目立たせる |
| 案内ボックス・白抜きボックス | 色付きの枠で文章を囲む | 補足・まとめ・手順の要約 |
| ブログカード | 記事のリンクをカード形式で表示 | 関連記事への誘導 |
| ボタン | クリックしやすいボタン | 申込みページ・お問い合わせへの誘導 |
- 吹き出しのアイコンは、事前に「Cocoon設定」→「吹き出し」で画像と名前を登録しておく
- ブログカードは、自分のサイトの記事URLを1行だけで貼り付けると自動でカードになる
- 文字の一部を目立たせたいときは、文字を選択してツールバーの装飾メニューからマーカーや太字を付ける
STEP4 カテゴリー・タグ・アイキャッチ・URLを設定する
本文が書けたら、右サイドバーの「投稿」タブで記事の分類と見た目を設定します。サイドバーが見えないときは、右上の「□（設定）」アイコンをクリックすると表示されます。
「ブロック」タブが開いているときは、上部の「投稿」タブをクリックして切り替えます。
| 設定項目 | 何を決めるか | 入れ方のコツ |
|---|---|---|
| URL（スラッグ） | 記事のURLの末尾 | 半角英数字とハイフンで短く。例：cocoon-post-howto |
| カテゴリー | 記事の大きな分類（本棚） | 1記事につき1つが基本。新規作成もここでできる |
| タグ | 記事のキーワード（付箋） | 2〜5個程度。カテゴリーと同じ言葉は避ける |
| アイキャッチ画像 | 一覧やSNSで表示される記事の顔 | 横長16:9（例：1280×720px）で作ると崩れにくい |
| 抜粋 | 記事一覧などに出る要約文 | 空欄でも可。STEP5のメタディスクリプションを優先 |
アイキャッチ画像の設定手順
- 右サイドバーの「アイキャッチ画像を設定」をクリック
- 画像をアップロード、またはメディアライブラリから選ぶ
- 「アイキャッチ画像を設定」ボタンで確定する
URL（スラッグ）の設定手順
- 右サイドバーの「URL」（またはパーマリンク）の欄をクリック
- 日本語のままになっている部分を、半角英数字に書き換える
STEP5 Cocoonの「SEO設定」を入力する
必ず入力するのは「メタディスクリプション」と「メタキーワード（3つ）」の2項目です。CocoonはSEO対策が標準で組み込まれているため、SEO用プラグインを追加する必要もありません。
SEO設定は、編集画面を一番下までスクロールした「SEO設定」欄にあります。見当たらない場合は、右上の「︙」→「設定」→「パネル」で表示をオンにします。
青い枠の2項目だけ入力すればOKです。それ以外は初期値のままにします。
| 項目 | 入力するか | 内容 |
|---|---|---|
| SEOタイトル | 基本は空欄 | 空欄なら記事タイトルが使われる。検索結果だけ別タイトルにしたいときに入力 |
| メタディスクリプション | 必ず入力 | 検索結果でタイトルの下に出る紹介文。120文字前後で、記事を読むと何が分かるかを書く |
| メタキーワード | 必ず3つ入力 | 記事の主要キーワードを3つ、半角カンマ区切りで入力。例：Cocoon,投稿,初心者 |
| noindex | 通常はチェックしない | チェックすると検索結果に表示されなくなる。お知らせ・テスト記事などに使う |
| nofollow | 通常はチェックしない | ページ内のリンクを検索エンジンにたどらせない設定 |
メタディスクリプションの例
WordPressテーマCocoonで、ブログ記事を作成して公開するまでの手順を初心者向けに図解で解説します。見出しや吹き出しの使い方、アイキャッチやSEO設定のコツまで、この1記事で分かります。
検索で狙う言葉（例：「Cocoon 投稿」）を、文の前半に自然に入れるのがコツです。
STEP6 プレビューで確認して公開する
公開ボタンを押す前に、必ずプレビューでパソコン表示とスマホ表示の両方を確認します。ブログ読者の多くはスマホで記事を読むためです。
プレビューの手順
- 右上の「プレビュー」アイコン（モニターの形）をクリック
- 「デスクトップ」「タブレット」「モバイル」を切り替えて表示を確認する
- 実際の見た目を確認したいときは「新しいタブでプレビュー」を選ぶ
- 気になる点があれば編集画面に戻って修正し、もう一度プレビューする
公開する
- 右上の「公開」ボタンをクリック
- 確認パネルが開くので、もう一度「公開」をクリック
- 「投稿を表示」で公開された記事を開き、表示を確認する
予約投稿する（日時を指定して公開）
- 右サイドバーの「公開」欄の「今すぐ」をクリック
- カレンダーで公開したい日付と時刻を選ぶ
- 右上のボタンが「予約投稿」に変わるので、クリックして確定する
公開後に修正したい場合は、記事を編集して右上の「更新」を押せば反映されます。公開をやめたい場合は、「公開」欄のステータスを「下書き」に戻します。
公開前チェックリスト
「公開」を押す直前に、上から順に確認してください。すべて当てはまれば公開してOKです。
- タイトルに、検索されたい言葉が入っている
- 本文の見出しがH2から始まり、順番が飛んでいない
- 誤字脱字がない（声に出して読むと見つけやすい）
- 画像に代替テキストが入っている
- カテゴリーが1つ選ばれている
- アイキャッチ画像が設定されている
- URL（スラッグ）が半角英数字になっている
- メタディスクリプションを入力した
- メタキーワードを3つ入力した
- noindexにチェックが入っていない
- スマホ表示のプレビューで、崩れや読みにくい箇所がない
- 本文中のリンクをクリックして、正しいページが開く
よくあるトラブルと対処法
| 困りごと | 原因 | 対処法 |
|---|---|---|
| 右側の設定サイドバーが出てこない | サイドバーが閉じている | 右上の「□（設定）」アイコンをクリック |
| 下部の「SEO設定」欄がない | パネルが非表示になっている | 右上「︙」→「設定」→「パネル」で表示をオン |
| 目次が表示されない | 見出しの数が少ない、またはCocoon設定で目次がオフ | 見出し（H2）を増やす。「Cocoon設定」→「目次」で表示設定を確認 |
| 吹き出しのアイコンが表示されない | 吹き出しの登録をしていない | 「Cocoon設定」→「吹き出し」で画像と名前を登録 |
| ブログカードにならず、URLが文字のまま | URLの前後に文字やスペースがある | URLだけを1行で貼り付け直す |
| アイキャッチが切れて表示される | 画像の縦横比が合っていない | 16:9の横長画像で作り直す |
| 書いた文章が消えた | 保存前に画面を閉じた・通信が切れた | 「投稿」→「投稿一覧」で下書きを確認。右サイドバーの「リビジョン」から過去の版を復元できる場合がある |
| 公開した記事がGoogleで出てこない | 公開直後は検索エンジンに登録されていない | 数日〜数週間待つ。noindexのチェックが外れているかも確認 |
ここにない不具合は、Cocoon公式サイトのフォーラムで同じ事例が見つかることが多いので、症状をそのまま検索してみてください。
まとめ
Cocoonでの記事作成は、「新規投稿を開く→本文を書く→装飾する→分類とアイキャッチを設定→SEO設定→プレビューして公開」の6ステップです。
最初は時間がかかっても、2〜3記事書けば手順は自然に身につきます。毎回の公開前には、この記事の「公開前チェックリスト」で確認する習慣をつけてください。