| このガイドの内容 STEP 1 WordPress管理画面にログインする STEP 2 記事（投稿）を作成・編集する STEP 3 Cocoonでデザインをカスタマイズする STEP 4 画像をアップロードして挿入する STEP 5 記事を公開・確認する |
初心者でも安心！画面を見ながら操作できます
STEP 1 WordPress管理画面にログインする
WordPress管理画面にログインする サイト編集の起点となる管理画面へのアクセス方法を覚えましょう
ログインURL
管理画面にアクセスするには、ブラウザのアドレスバーに以下のURLを入力します：
| https://あなたのドメイン名/wp-admin/ |
ログイン手順
| ① URL入力 | ブラウザのアドレスバーにログインURLを入力してEnterキーを押す |
| ② ユーザー名 | WordPress設定時に決めたユーザー名またはメールアドレスを入力 |
| ③ パスワード | 設定済みのパスワードを入力（忘れた場合は「パスワードをお忘れですか？」から再設定可） |
| ④ ログイン | 「ログイン」ボタンをクリックして管理画面へ進む |
管理画面（ダッシュボード）の見方
ログイン後に表示される画面が「ダッシュボード」です。左側のメニューから各機能にアクセスします。
| 投稿 | ブログ記事の作成・管理 |
| 固定ページ | 会社概要・お問い合わせなど |
| メディア | 画像・動画ファイルの管理 |
| 外観 | テーマやウィジェットの設定 |
| Cocoon設定 | Cocoonテーマ専用の設定メニュー |
| 💡 ログインできない場合のチェックポイント • 大文字・小文字を確認する（パスワードは大文字小文字を区別します） • Caps Lockキーがオンになっていないか確認する • ブラウザの自動入力が古いパスワードを入れていないか確認する • それでも解決しない場合はサイト管理者に問い合わせる |
STEP 2 記事（投稿）を作成・編集する
記事（投稿）を作成・編集する ブログ記事や投稿コンテンツを作成・更新する方法を学びましょう
新しい記事を作成する
| ① メニュー選択 | 左メニューの「投稿」→「新規追加」をクリック |
| ② タイトル入力 | 「タイトルを追加」欄に記事のタイトルを入力 |
| ③ 本文入力 | 「+」ボタンをクリックしてブロックを追加し、テキストを入力 |
| ④ 一時保存 | 「下書き保存」ボタンをクリックして途中保存する |
| ⑤ 公開 | 準備ができたら「公開」ボタンをクリック |
ブロックエディターの基本操作
WordPressは「ブロックエディター（Gutenberg）」を使って記事を作成します。コンテンツは「ブロック」の集まりで構成されます。
| ブロックの種類 | 用途・説明 |
| 📝 段落 | 通常のテキスト文章を入力するブロック（最も基本的） |
| 📌 見出し | H2・H3などの見出しを作成（記事の構成を整理） |
| 🖼️ 画像 | 写真・イラストなどの画像を挿入 |
| 📋 リスト | 箇条書き・番号付きリストを作成 |
| 📊 テーブル | 表組みを作成 |
| 💬 引用 | 引用文を整形して表示 |
既存記事を編集する
| ① 記事一覧を開く | 左メニューの「投稿」→「投稿一覧」をクリック |
| ② 記事を選択 | 編集したい記事のタイトルをクリック（または「編集」をクリック） |
| ③ 内容を変更 | テキストや画像を修正する |
| ④ 更新する | 右上の「更新」ボタンをクリックして変更を保存 |
| 💡 カテゴリーとタグの設定 • 右側パネルの「カテゴリー」で記事のジャンルを分類できます • 「タグ」は記事に関連するキーワードを設定できます • カテゴリー・タグは記事の見つけやすさ（SEO）に影響します |
STEP 3 Cocoonでデザインをカスタマイズする
Cocoonでデザインをカスタマイズする Cocoonテーマの設定を使ってサイトの見た目を調整しましょう
Cocoon設定メニューの開き方
左メニューの「Cocoon設定」をクリックすると、Cocoon専用の設定パネルが開きます。
| 💡 Cocoonとは？ • 無料で使える高機能なWordPressテーマです • SEO対策・高速化・スマホ対応が最初から組み込まれています • 専門知識がなくても豊富な設定でサイトをカスタマイズできます |
よく使うCocoon設定項目
| スキン | サイト全体のデザインテンプレートを変更（ワンクリックで見た目が変わる） |
| 全体 | サイトの基本色・フォント・レイアウト幅などを設定 |
| ヘッダー | サイト名・キャッチフレーズ・ヘッダー画像を設定 |
| メインカラム | 記事エリアのデザインを調整 |
| フッター | フッターのテキスト・背景色を設定 |
| SNS | SNSシェアボタンの表示設定 |
| SEO | メタディスクリプション等のSEO基本設定 |
スキン（デザインテンプレート）の変更手順
| ① Cocoon設定 | 左メニュー「Cocoon設定」をクリック |
| ② スキンタブ | 上部タブから「スキン」を選択 |
| ③ スキン選択 | 一覧からお好みのスキンにチェックを入れる（プレビュー画像を参考に） |
| ④ 変更を保存 | ページ下部の「変更をまとめて保存」をクリック |
| ⑤ 確認 | 実際にサイトを表示して見た目を確認する |
サイトカラーの変更
「全体」タブ→「メインカラー」から、サイトのメインカラー（アクセントカラー）を変更できます。
| 💡 カスタマイズ後は必ず確認しましょう • 「変更をまとめて保存」後、必ずサイトをブラウザで開いて確認 • スマートフォンでの表示も確認することをおすすめします • 変更が気に入らない場合は元の設定に戻せます |
STEP 4 画像をアップロードして挿入する
画像をアップロードして挿入する 写真やイラストをサイトに追加する方法を学びましょう
メディアライブラリへのアップロード
| ① メディアを開く | 左メニューの「メディア」→「新規追加」をクリック |
| ② ファイル選択 | 「ファイルを選択」ボタンをクリックし、パソコンから画像を選ぶ |
| ③ アップロード確認 | アップロード完了後、メディアライブラリに画像が追加される |
記事へ画像を挿入する手順
| ① ブロック追加 | 記事編集画面で「+」をクリックし「画像」ブロックを選択 |
| ② 画像を選ぶ | 「メディアライブラリ」をクリックして、使いたい画像をクリック |
| ③ 選択を確定 | 「選択」ボタンをクリックして記事に挿入 |
| ④ サイズ調整 | ブロックの設定パネルからサイズや配置を調整 |
| ⑤ 代替テキスト | 右パネルの「代替テキスト」欄に画像の説明を入力（SEO・アクセシビリティに重要） |
対応している画像形式
| 形式 | 特徴 | おすすめの用途 |
| JPEG / JPG | 写真に最適・ファイルサイズ小 | 風景・人物・商品写真 |
| PNG | 透明背景に対応 | ロゴ・アイコン・イラスト |
| WebP | 高圧縮・高画質 | なるべくWebPを使うと高速化 |
| GIF | アニメーションに対応 | シンプルな動くイラスト |
| 💡 画像に関する大切なポイント • ファイルサイズは1MB以下に抑えると、ページ読み込みが速くなります • 著作権のある画像を無断使用しないよう注意しましょう • フリー素材サイト（Unsplash・pixabay等）を活用すると安全です • 代替テキストは検索エンジンが画像内容を理解するために重要です |
STEP 5 記事を公開・確認する
記事を公開・確認する 完成した記事を世界に公開し、正しく表示されているか確認しましょう
公開前のチェックリスト
| ✅ タイトル | 記事のタイトルは適切か（読者が内容をイメージできるか） |
| ✅ 本文 | 誤字・脱字がないか、内容は正確か |
| ✅ 画像 | 画像は正しく表示されているか、代替テキストは設定したか |
| ✅ カテゴリー | 適切なカテゴリーを設定したか |
| ✅ アイキャッチ画像 | 記事の顔となるメイン画像を設定したか（右パネル「アイキャッチ画像」） |
| ✅ プレビュー確認 | 「プレビュー」ボタンで実際の表示を確認したか |
記事の公開手順
| ① プレビュー確認 | 右上の「プレビュー」→「新しいタブでプレビュー」で表示を確認 |
| ② 公開日時設定 | 右パネルの「公開」設定で、即時公開か予約投稿かを選択 |
| ③ 公開ボタン | 右上の「公開」ボタンをクリック |
| ④ 確認ダイアログ | 「公開してもよいですか？」のダイアログで再度「公開」をクリック |
| ⑤ サイトで確認 | 「投稿を表示」リンクをクリックして実際の公開ページを確認 |
公開後の修正方法
公開後でも記事はいつでも編集できます。修正後は「更新」ボタンをクリックするだけで変更が即時反映されます。
記事の状態について
| 下書き | まだ公開されていない状態。自分だけが見られる |
| レビュー待ち | 管理者の承認待ち（複数人で運用する場合） |
| 公開済み | サイトに公開されている状態 |
| 予約投稿 | 指定した日時に自動で公開される |
| 非公開 | ログインユーザーのみ閲覧可能 |
| 💡 スマートフォン表示も必ず確認しましょう • 閲覧者の多くがスマートフォンからアクセスします • Cocoonはスマホ対応（レスポンシブ）ですが、実機での確認も大切です • Chromeの開発者ツール（F12）でスマホ表示をシミュレーションできます |
5ステップ まとめ
| STEP | 内容 | ポイント |
| STEP 1 | ログイン | 管理画面にアクセスし、サイト編集の準備をする |
| STEP 2 | 記事の作成・編集 | ブロックエディターで記事を作成・更新する |
| STEP 3 | Cocoonカスタマイズ | スキンやカラーでデザインを整える |
| STEP 4 | 画像のアップロード | 写真・イラストを適切なサイズで挿入する |
| STEP 5 | 公開・確認 | チェックリストを確認してから公開する |
困ったときは…
📖 公式ドキュメント WordPress.org サポートフォーラム Cocoon公式サイト（wpcocoon.com）
🔍 検索のコツ 「WordPress ＋ 困っていること」で検索 「Cocoon ＋ やりたいこと」で検索
コメント