Cocoon初期設定ガイド|外観・固定ページ・メニュー・ウィジェットの設定方法

blog
記事内に広告が含まれています。
WordPressダッシュボード画面

ConoHa WINGへの申し込みとWordPressのインストールが完了したら、次は初期設定です。

Cocoonのデザインを整えて、プロフィール・お問い合わせなど必要なページを作り、メニューとサイドバーを配置する。ここまで済ませれば、記事を書き始める準備が整います。

この記事でわかること

  • パーマリンクの設定方法
  • Cocoon子テーマの有効化とスキンの選び方
  • ヘッダー画像・ロゴの設定方法
  • 固定ページ・カテゴリー・メニュー・ウィジェットの作り方

制作環境

  • WordPress:6.9.4
  • WordPressテーマ:Cocoon 2.9.1.1
  • レンタルサーバー:ConoHa WING

ConoHa WINGへの申し込みとWordPressのインストール方法は、こちらの記事で解説しています。

WordPressの管理画面にログインする

まずはWordPressの管理画面(ダッシュボード)にログインします。ログイン方法は2つあります。

  • ConoHa管理画面から:サイト管理 → サイト設定 → 管理画面URLをクリック
  • URLを直接入力:ブログURLの末尾に /wp-admin を追加する
    (例:https://〇〇.com/wp-admin)

ユーザー名とパスワードを入力してログインすると、ダッシュボードが表示されます。「ログイン状態を保存する」にチェックを入れておくと、次回から自動的にログインした状態になります。

ログインするとダッシュボードが表示されます。左側のメニューから各設定画面に移動できます。

ログインできない・URLが分からなくなった場合はこちら
ConoHa WINGでWordPress管理画面にログインできない時の対処法【原因別まとめ】

パーマリンクを設定する

パーマリンク設定画面

パーマリンクとは、各記事に割り当てられるURLのことです。後から変更すると検索エンジンの評価がリセットされてしまうので、記事を書き始める前に必ず設定しておきます。

設定 → パーマリンク をクリックして設定画面を開きます。

共通設定で「投稿名」を選択すると、カスタム構造欄に /%postname%/ と入ります。ページ左下の「変更を保存」をクリックして完了です。

記事のスラッグを変更する

記事のスラッグ変更ポップアップ

スラッグとはURLの末尾に表示される文字列です。記事を作るときに、右側の設定パネルにある「スラッグ」をクリックするとポップアップが表示され、好きな文字列に変更できます。

WordPress投稿編集画面

日本語はURLに適さないため、英語またはローマ字で設定します。例:cocoon-setteiwakuwaku-kaomoji など、記事の内容が分かる単語を使いましょう。

Cocoon子テーマを有効にする

Cocoon適用前のWordPressサイト

WordPressをインストールした直後のサイトはこのような状態です。Cocoonを適用すると、デザインが大きく変わります。

ConoHa WINGの申し込み時にCocoonを選んだ場合、テーマはすでにインストール済みです。外観 → テーマ をクリックして確認しましょう。

テーマ一覧画面でCocoon Childを有効化する

テーマ一覧に「Cocoon」と「Cocoon Child」が表示されます。必ず Cocoon Child(子テーマ) の「有効化」ボタンをクリックしてください。

親テーマ(Cocoon)を直接有効化してしまうと、Cocoonのアップデート時にデザインやカスタマイズ内容がすべて消えてしまいます。子テーマを使うことでアップデートの影響を受けずに設定を維持できます。

スキンを選ぶ

スキン適用後のサイト表示例

スキンはCocoonのデザインテンプレートです。色・フォント・レイアウトをまとめて変更できます。

Cocoon設定 → スキン タブをクリックすると、スキン一覧が表示されます。各スキンにカーソルを合わせるとプレビューが確認できるので、気に入ったものを選んで「変更をまとめて保存」をクリックします。

スキンは後から何度でも変更できるので、まずは気に入ったものを選んでおけば大丈夫です。

※スキン一覧に目当てのものがない場合は、一度Cocoon(親テーマ)を有効化して最新バージョンに更新してから、再びCocoon Childを有効化します。その後スキンタブを確認すると新しいスキンが追加されています。

ヘッダーを設定する

ヘッダーはサイト上部に表示されるエリアです。背景画像やロゴを設定することで、ブログの印象がぐっと変わります。

Canvaでヘッダー画像を作る

Canvaでカスタムサイズのヘッダー画像を作成する

Canvaの +ボタン → カスタムサイズ を選び、1280 × 640px で新しいデザインを作成します。

テンプレートから好みのデザインを選び、色・フォント・画像を変更して仕上げます。完成したら右上の「共有」ボタンからダウンロードします。

作成した画像は Cocoon設定 → ヘッダー → ヘッダー背景画像 → 選択 から設定します。画像を選択後、左下の「変更をまとめて保存」をクリックするとサイトに反映されます。

ロゴを設定する

Cocoon設定のヘッダーロゴ設定画面

ブログ名の代わりにロゴ画像を表示できます。Cocoon設定 → ヘッダー → ヘッダーロゴ の「選択」から画像をアップロードします。ロゴのサイズは「ヘッダーロゴサイズ」で調整できます。

背景を透過したPNG形式で作成すると、どのスキンにも馴染みやすくなります。サブタイトルが不要な場合は、設定 → 一般設定 でキャッチフレーズを空欄にすると非表示になります。

固定ページを3つ作る

固定ページは記事とは別の独立したページです。ブログ運営に必要な以下の3つを作っておきましょう。

  • プロフィール:ブログ運営者の自己紹介ページ
  • お問い合わせ:読者からの連絡窓口(Contact Form 7は次の記事で設定します)
  • プライバシーポリシー:AdSense審査・法令対応に必要
WordPressの固定ページ一覧(初期状態)

インストール直後の固定ページには「Sample Page」と「Privacy Policy(下書き)」が入っています。「Sample Page」は不要なのでゴミ箱へ移動してください。

固定ページ → 固定ページを追加 からページを作成します。タイトルを入力し、右側の設定パネルでスラッグを設定して「公開」をクリックします。

固定ページ一覧(プロフィール・お問い合わせ・プライバシーポリシーの3ページが揃った状態)

3つのページが揃えば完了です。スラッグは以下のように設定しておくとわかりやすいです。

  • プロフィール → profile
  • お問い合わせ → contact
  • プライバシーポリシー → privacy-policy

プライバシーポリシーの文章は、ネット上の参考例をもとに作成すると効率的です。

カテゴリーを作る

カテゴリー設定画面

カテゴリーは記事の分類です。投稿 → カテゴリー から作成します。

名前とスラッグ(英語)を入力して「カテゴリーを追加」をクリックします。3〜5個が目安です。最初からある「未分類」は分かりやすい名前に変更しておくといいでしょう。

カテゴリーを削除しても記事は削除されません。ただし、そのカテゴリーのみに分類されていた記事は「未分類」に移動します。

メニューを配置する

メニュー設定画面

メニューはサイトのナビゲーションです。外観 → メニュー から作成します。

「新しいメニューを作成しましょう」をクリックし、メニュー名を入力して「メニューを作成」をクリックします。

ヘッダーメニューを作る

左側の「固定ページ」「カテゴリー」から追加したい項目を選んで「メニューに追加」をクリックします。項目はドラッグで順番を変更できます。

「メニューの位置」で「ヘッダーメニュー」にチェックを入れて「メニューを保存」をクリックするとサイト上部に表示されます。

フッターメニューを作る

ヘッダーメニューと同様の手順で新しいメニューを作成し、「フッターメニュー」にチェックを入れて保存します。プライバシーポリシーとお問い合わせを入れておくと、読者が見つけやすくなります。

ウィジェットを配置する

ウィジェット設定画面

ウィジェットはPCでサイトを開いたときに右側に表示されるサイドバーの中身です。外観 → ウィジェット から設定します。

最初から入っているブロックは削除して、以下の5つに入れ替えるのがおすすめです。

  • 検索:サイト内検索ボックス
  • [C]プロフィール:ブログ運営者の簡易プロフィール(Cocoon独自)
  • [C]新着記事:最近公開した記事の一覧(Cocoon独自)
  • カテゴリー:カテゴリー一覧
  • [C]目次:記事内の見出しジャンプ(Cocoon独自)

順番はドラッグで変更できます。「サイドバースクロール追従」エリアにも目次を追加しておくと、記事を読みながら見出しに飛べるので便利です。

[C]プロフィールウィジェットの「画像を円形にする」にチェックを入れると、プロフィールアイコンが丸く表示されます。

まとめ

この記事では、WordPressの初期設定として以下を解説しました。

  • パーマリンクを「投稿名」に設定する
  • Cocoon子テーマを有効化し、スキンでデザインを整える
  • ヘッダー画像・ロゴを設定する
  • 固定ページ(プロフィール・お問い合わせ・プライバシーポリシー)を3つ作る
  • カテゴリーを作成する
  • ヘッダー・フッターのメニューを配置する
  • サイドバーのウィジェットを配置する

ここまで済んだら、次はプラグインの設定です。スパム対策・バックアップ・SEO対策など、ブログ運営に必要なプラグインをインストールしていきます。

ブログをこれから始める方には、ConoHa WINGがおすすめです。

\ ブログ始めるならここ! /

ConoHa WING公式ページ >>

ConoHa WINGの申し込み方法|WordPressかんたんセットアップまで解説
ConoHa WINGの申し込みからWordPressかんたんセットアップ・SSL有効化まで、初心者向けに画像つきでわかりやすく解説します
ConoHa WINGのWordPressおすすめプラグイン設定|スパム対策まで
ConoHa WINGのWordPressブログに最初に入れたいおすすめプラグインと設定方法を解説。スパム対策のreCAPTCHA設定まで初心者向けに説明します
タイトルとURLをコピーしました