未ログイン状態で閲覧中
  • 投稿日:2024/01/24
  • 更新日:2026/01/02
迷わずできる!ブログの初期設定 実践ガイド【#2:デザイン編】※Cocoon対応

迷わずできる!ブログの初期設定 実践ガイド【#2:デザイン編】※Cocoon対応

タカヒロ🧩ブログの設定サポーター

タカヒロ🧩ブログの設定サポーター

この記事は約13分で読めます
要約
ブログを始めるとき壁になるのが、WordPressの初期設定。 その設定手順を全5記事でまとめました。 本記事【#2:デザイン編】では、 固定ページ・カテゴリ・メニュー・ウィジェットに触ります。 ✅️最新情報に更新済み。 ブログ基礎講座の動画で止まっている方もぜひ参考ください

- ブログ初期設定(Cocoonテーマ)まとめ -
==============================
 STEP 1: 準備編
 STEP 2: デザイン編 👈本記事はここ
 STEP 3: プラグイン編
 STEP 4: スパム対策編
 STEP 5: 仕上げ編
==============================


記事のゴール

5記事で完結するノウハウ「#ブログの初期設定・実践ガイド」の【#2:デザイン編】です。

今一度、目標とするブログの構築イメージを確認しましょう。

📚 書評ブログ

blog-head.png


前回の記事【#1:準備編】では、「WordPressの開設」から「基本の設定」まで進めました。

本記事【#2:デザイン編】を実践すると、下記4パーツの作成・配置手順がわかります。

・固定ページ
・カテゴリー
・メニュー
・ウィジェット

これらの概念を理解しておくと、WordPressの構築・設定が格段に楽になりますよ。

それでは始めましょう!


【記事の制作環境】

WordPress:6.7.1
WordPress テーマ:Cocoon 2.8.3.3
レンタルサーバー:ConoHa WING

💬 専用の質問チャットあります

このノウハウ専用の質問チャットを設けました。つまずいた時になどに利用してくださいね。

[ブログの初期設定 実践ガイド専用] 質問チャット

1. 固定ページを作ろう

🖱️「固定ページ」

blog14-1.png

✅ WordPressの「固定ページ」とは?
固定ページとは、ブログ記事のように「日付順にどんどん増えていく投稿」とは違って、ずっと同じ場所に表示しておきたいページのことです。

WordPress 固定ページ|chatgpt.com

WordPress で記事を書く方法は、「投稿」と「固定ページ」の2種類に分類できます。

それぞれの特徴は次のとおりです。

●投稿

・通常の記事投稿で使う
・時系列で一覧表示できる
・カテゴリーやタグでグループ分けできる

●固定ページ

・単体で独立している
・あまり更新しないけど重要なページに使う

ここでは、ブログ運営に必要な以下のページを「固定ページ」で作成します。

【作成する固定ページ】

・プロフィールページ
・お問い合わせページ
・プライバシーポリシーページ(※デフォルトのは英文なので、削除して新規作成します)

デフォルトの固定ページ2つを削除する

🖱️画面左の「固定ページ」をクリックし、固定ページ一覧を開きましょう。

デフォルトの固定ページ2つ(「Privacy Policy ― 下書き」と「Sample Page」)は不要なので削除します。

blog15.png一覧の「Privacy Policy ― 下書き」にマウスを合わせると現れる操作メニューから、赤文字の「ゴミ箱へ移動」をクリックします。

同様に「Sample Page」もゴミ箱に移動しましょう。

固定ページを新規作成する

続いて「固定ページを追加」ボタンをクリックします。

blog16.pngタイトルを「プロフィール」、スラッグを「profile」にして公開する

記事の編集画面が開きます。以下の手順で固定ページを公開しましょう。

ℹ️ 右パネルが隠れている場合は、公開ボタンのすぐ左にあるアイコンをクリックすると表示できます

blog17.pngタイトルに「プロフィール」と入力
②「下書き保存」をクリック
③ 固定ページタブの 「スラッグ」右の文字列をクリック
スラッグ(=パーマリンク)を「profile」に変更(⚠️半角英小文字で入力
⑤「公開」ボタンをクリック

「公開してよいですか?」と問われたら、再度「公開」ボタンをクリックしましょう。

ℹ️ ひとまずページを公開する段階なので、本文は空のままでOKです

以上で、プロフィールページを作成・公開できました。

【作成したプロフィールページのURL】
https://(あなたのドメイン)/profile/

「お問い合わせ」「プライバシーポリシー」ページも同様に作成・公開する

続いて「固定ページを追加」ボタンをクリックし、残り2つの固定ページも作成・公開していきましょう。

blog19.pngタイトルとスラッグは、それぞれ下記のとおりです。

【タイトル / スラッグ】

お問い合わせ / contact
プライバシーポリシー / privacy

以上で、固定ページ3つ(プロフィール、お問い合わせ、プライバシーポリシー)の作成が完了しました!

プライバシーポリシーを作り、リライトする

プライバシーポリシーを作り、ページをリライトしましょう。

プライバシーポリシーの書き方は、エックスサーバー運営メディアの記事が参考になります。

参考:【ひな形あり】プライバシーポリシーと免責事項の作り方(外部リンク)

テンプレート(ひな形)を活用し、使うサービスやツールに合わせて、内容を適宜修正するのがおすすめです。

リライトをするには、固定ページ一覧の「プライバシーポリシー」のタイトルをクリックして、記事の編集画面を開きます。

blog21.png① 記事本文に、作ったプライバシーポリシーを貼り付けます。

② 編集画面の右上「保存」ボタンをクリックして、記事を更新します。

③ 同じく右上「固定ページを表示」アイコンをクリックして、文言が正しく表示されているか確認しましょう。

ℹ️ 編集画面の操作方法はリベシティセミナーを参考に

記事編集画面の詳しい操作方法は、リベシティセミナーが参考になります。

参考:[宿題リスト]アフィリエイト/ブログにチャレンジしよう → 〈セミナー〉 アフィリエイト/ブログ講座 動画一覧 → 2024.11.12 ブログ記事の書き方と操作方法を解説!

3e03a5b56fe2045c17aa593ec0bbaf8c-768x432.png

2. カテゴリー(ページ)を作ろう

🖱️「投稿」➡「カテゴリー」

blog23-1.png

✅️ WordPressの「カテゴリー」とは?
「カテゴリー」とは、ブログ記事をグループ分けするための仕組みです。初心者の方にもわかりやすく言うと、「本をジャンルごとに本棚に分けて並べるようなもの」です。

WordPress カテゴリー|chatgpt.com

カテゴリーを作成すると投稿記事のグループ分けができて、目的の記事を見つけやすくなります。

すでに発信の方向性が固まっている場合は、あらかじめカテゴリーを3~5個程度にしぼり、作成しておくといいでしょう。

ひとつの記事に複数のカテゴリーを設定できますが、できる限り「1記事1カテゴリー」の原則を守ることを推奨します。

ℹ️ ブログが初めての場合、カテゴリーは今すぐ作成しなくても問題ありません!むしろ、「運営する中で方針を決めよう」くらいの気持ちでOKです

ここでは、カテゴリーの作成方法を解説します。

カテゴリーの作成方法

🖱️画面左の「投稿」➡「カテゴリー」をクリックします。

カテゴリー作成の手順は次のとおりです。

blog24.png① メインエリアの左「名前」にカテゴリー名(日本語)を、「スラッグ」にそのカテゴリー名(半角英小文字)を、それぞれ入力します。

② 下部の「新規カテゴリーを追加」ボタンをクリックすると、

③ 右の「カテゴリー一覧」に追加されます。

ここでは「書評ブログ」ということで、書籍のジャンル3つをカテゴリーにしました。

【名前 / スラッグ(一例)】

文学作品 / literary-works
ビジネス書 / business-books
漫画 / manga

新規カテゴリーを追加すると、そのカテゴリーの記事一覧ページ(=カテゴリーページ)が自動で生成されます。

【カテゴリーページURL】
https://(あなたのドメイン)/category/(スラッグ)/

カテゴリー「uncategorized」の名前を日本語に変更する

投稿した記事は、デフォルトの設定では「uncategorized」カテゴリーに分類されます。

カテゴリー名が「uncategorized」では見た目がよくないので、カテゴリー一覧のクイック編集で、名前を「未分類」や「カテゴリーなし」などに変更しましょう(⚠️ スラッグはそのままです)。

blog25-1.png3. メニューを作成・配置しよう

🖱️「外観」➡「メニュー」

blog27-1.png

✅️ WordPressの「メニュー」とは?
「メニュー」とは、ブログやサイトのナビゲーション(案内板)のことです。訪問者がサイト内を移動しやすくするためのリンクの集まりです。

WordPress メニュー|chatgpt.com

これまでの手順で、必要な「固定ページ」と「カテゴリーページ」を作成しました。

次に、それらのページへの導線となる「ヘッダーメニュー」と「フッターメニュー」を作成・設置していきます。

▼ヘッダーメニュー設置イメージ(ブログ上部)

wp_menu.png▲フッターメニュー設置イメージ(ブログ下部)

ヘッダーメニューを作成する

🖱️画面左の「外観」➡「メニュー」をクリックします。

次の手順で、メニューを作成しましょう。

blog33.png① メニュー名を「ヘッダーメニュー」にします。

② メニューの位置は「ヘッダーメニュー」にチェックをして、

③「メニューを作成」ボタンをクリックします。

ヘッダーメニューに項目を追加する

メインエリアの左側「メニュー項目を追加」の「固定ページ」→「すべて表示」タブから、

・ホーム
・お問い合わせ
・プロフィール

にチェックをして、「メニューに追加」ボタンをクリックします。blog34.png「2.カテゴリー(ページ)を作ろう」でカテゴリーを作成した場合は、同様に「カテゴリー」→「すべて表示」タブから必要なメニュー項目を追加しましょう。

その他にも、投稿記事や、任意の URL(カスタムリンク)を追加できます。

blog35.pngメニュー項目を追加したら、ドラッグで順序を入れ替えて「メニューを保存」ボタンをクリックすると、ヘッダーメニューの作成は完了です。

blog36.png●作成したヘッダーメニュー

blog-head-1.pngフッターメニューも同様に作成する

ヘッダーメニューと同様の手順で、フッターメニューも作成してみましょう。

メニューを新規作成します。

blog64.png各設定は以下のとおり。

●メニュー名
・「フッターメニュー」と入力

●メニューの位置
・「フッターメニュー」にチェック

●追加するメニュー項目(一例)
・ホーム(固定ページ)
・プロフィール(固定ページ)
・お問い合わせ(固定ページ)
・プライバシーポリシー(固定ページ)

●作成したフッターメニュー

blog-foot-1.png以上で、各メニューの作成・設置が完了しました!

ブログのトップページを開いて、上部と下部にメニューが配置されているか、リンク先に問題がないかを確認してみましょう。

4. ウィジェットを配置しよう

🖱️「外観」➡「ウィジェット」

blog37-1.png

✅️ WordPressの「ウィジェット」とは?
ウィジェットとは、WordPressブログのサイドバーやフッターなどに、好きな機能や情報を追加できるパーツのことです。簡単にいうと、「ブログの横や下にちょっとした便利なパーツを置ける仕組み」です。

WordPress ウィジェット|chatgpt.com

パソコンでブログを開いたとき、右側に表示されるエリアがサイドバーです。

blog38.pngここでは、サイドバーにデフォルトで配置済みのウィジェット (「Recent Posts」「Recent Comments」など)をすべて削除し、ブログ運営に最適なウィジェットを再び配置します。

【配置するエリアとウィジェット】

●サイドバー(上から順に)
・検索
・[C]プロフィール
・[C]新着記事
・カテゴリー

●サイドバースクロール追従
・[C]目次

●投稿関連記事上
・[C]プロフィール

ℹ️ [C] が付くのは Cocoonテーマオリジナルのウィジェット、付いていないものは WordPress 標準のウィジェットです

「サイドバー」と「サイドバースクロール追従」のブロックを削除する

🖱️画面左の「外観」➡「ウィジェット」をクリックします。

メインエリア左側が「利用できるウィジェット」、右側がウィジェットを配置できる「ウィジェットエリア」です。

blog39.png「サイドバー」と「サイドバースクロール追従」にデフォルトで配置済みのブロックウィジェット(計5つ)は、今回使用しません。

5つすべての「ブロック」を削除して、空にしましょう。

blog40.png「サイドバー」に各ウィジェットを追加する

サイドバーを空にできたら、メインエリア左側の「利用できるウィジェット」から「検索」ウィジェットを探します。

ℹ️「検索」は、ブログ内検索フォームウィジェットですblog42.png①「検索」ウィジェットのタイトルをクリックすると、配置可能なウィジェットエリアとボタンが現れます。

②「サイドバー」を選択して、

③「ウィジェットを追加」ボタンをクリックしましょう。

ℹ️ 一連の操作は、ウィジェットのドラッグ&ドロップでも可能です

設定保存ボタンはありませんので、すぐブログの見た目に反映されます。

連続で操作しても差し支えないので、同じ要領で残り3つのウィジェットも追加しましょう。

blog-sidebar.png「サイドバースクロール追従」に [C]目次 を追加する

同様の手順で、ウィジェットエリア「サイドバースクロール追従」に [C]目次ウィジェットを配置してみましょう。

このエリアに目次を置くと、パソコンで記事を読むときに、読者が目的の見出しを見つけやすくなります。

blog62.png「投稿関連記事上」に [C]プロフィール を追加する

これはサイドバーではありませんが、ウィジェットエリア「投稿関連記事上」に [C]プロフィールウィジェットを配置してみましょう。

このエリアにプロフィール情報を掲載すると、読了した読者が、著者のプロフィールページへアクセスしやすくなります。

blog63.pngℹ️ [C]プロフィールウィジェットの中身は、【#5:仕上げ編】の「1. プロフィールを編集しよう」でプロフィール編集すると反映されます。安心してくださいね。

プロフィール画像を円形にする

ウィジェットエリア「サイドバー」を開き、[C]プロフィールウィジェットの「画像を円形にする」にチェックします。肩書きラベルは「ブログ運営者」などに設定しましょう。

widget-circle.png同様にウィジェットエリア「投稿関連記事上」を開き、[C]プロフィールウィジェットの「画像を円形にする」にチェックします。肩書きラベルは「この記事を書いた人」にするといい感じになります。

以上で、各ウィジェットの配置が完了しました!

もう一度トップページを開いて、配置の最終確認をしてみましょう。

STEP2:デザイン編 の完了です🎉 お疲れさまでした!

blog45.png今回は、WordPress ブログの初期設定【#2:デザイン編】をお伝えしました。

……………………………………………………
【この記事で作成した外観デザイン】
固定ページ
  ・プロフィールページ
  ・お問い合わせページ
  ・プライバシーポリシーページ
カテゴリー(ページ)
メニュー
  ・ヘッダーメニュー
  ・フッターメニュー
ウィジェット
  ・サイドバー
  ・サイドバースクロール追従
   ( [C]目次ウィジェット)
  ・投稿関連記事上
   ( [C]プロフィールウィジェット)
……………………………………………………

ここまでできれば、ほかのWordPressテーマで構築するときもバッチリです。

【#2:デザイン編】完了のご報告に、ぜひこの記事にいいね👍を送ってくださいね。お待ちしていますよ。

それでは次の記事【#3:プラグイン編】でお会いしましょう!


- ブログ初期設定(Cocoonテーマ)まとめ -
==============================
 STEP 1: 準備編
 STEP 2: デザイン編 👈本記事はここ
 STEP 3: プラグイン編 
 STEP 4: スパム対策編 
 STEP 5: 仕上げ編 
==============================

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

タカヒロ🧩ブログの設定サポーター

投稿者情報

タカヒロ🧩ブログの設定サポーター

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(109
  • 会員ID:EP7JZC9B
    会員ID:EP7JZC9B
    2026/02/15

    とてもわかり易くて助かりました。これからブログ作成頑張ります。

    タカヒロ🧩ブログの設定サポーター

    投稿者

    2026/02/15

    レビューありがとうございます! ともに頑張りましょう😊

    タカヒロ🧩ブログの設定サポーター

    投稿者

  • 会員ID:xCh4DfKQ
    会員ID:xCh4DfKQ
    2026/02/12

    知らなかったことが,ここにありました。 わかりやすい説明で進めてすんなりとここまでこれました。 感謝です。ありがとうございました。

    タカヒロ🧩ブログの設定サポーター

    投稿者

    2026/02/13

    わかりやすいとのお言葉、ありがとうございます! デザイン編を実践すれば、他のテーマに移行しても応用が効くと思いますよ~。 応援しております😊

    タカヒロ🧩ブログの設定サポーター

    投稿者

  • 会員ID:7lJRrxAL
    会員ID:7lJRrxAL
    2026/02/07

    すごくわかりやすかったです✨ 迷子になってたので助かりました😊 ありがとうございます!

    タカヒロ🧩ブログの設定サポーター

    投稿者

    2026/02/07

    レビューありがとうございます! ノウハウが参考になって良かったです😄

    タカヒロ🧩ブログの設定サポーター

    投稿者