Cocoonのオススメ初期設定手順について紹介します。（私の備忘録を兼ねて）
Luna企画の強みは、「中小企業のかかりつけマーケッター」であること Web担当者を一人雇うより早く・手軽に、Webマーケティングを実行できます 多くのコンサルティング会社は手を動かさず、口だけ。施策実行はお客様にお任せ。。
一方、Luna企画は施策の実行も担います
記事制作やSEO対策も可能なので、まずは実績資料を無料でご覧ください。
「設定」の設定
まずはWordPressの「設定」の設定をします。
一般設定でサイトのタイトルを設定
サイトのタイトルとキャッチコピーを決めます。SEOを意識すると良いです
ディスカッションでコメント許可を外す
コメント許可を外しておけば、スパム防止に
パーマリンクでパーマリンク構造を「投稿名（/%postname%/）」にする
パーマリンクを自由に決められるようになります。
下準備
つづいて下準備です。
サイトマップを考える
一般的には次のような作りが多いでしょう。
- トップページ
- 会社紹介
- 代表挨拶
- サービス紹介（複数ページになることも）
- お問い合わせ
固定ページを作る
サイトマップで考えたページを、固定ページで作成します。
ここではサイト制作の箱を用意するだけなので、タイトルとパーマリンクのみ設定すればOKです。
「設定」の「表示設定」でホームページの表示を編集
WordPressメニューの「設定」内の「表示設定」で、「ホームページの表示」を固定ページにしていします。
「ホームページ」と「投稿ページ」がありますが、ここでは「ホームページ」を任意の固定ページにします。
前の項目で作成した「トップページ」を選びましょう。
Cocoon設定
Cocoonのカスタマイズ設定をします。
項目を移動する前に、かならず「変更を保存」してください。
「スキン」で好みのデザインがあれば選ぶ（不要な場合も多い）
「スキン」を選べば、ある程度の型が再現されます。
こだわりが無ければ任意のスキンを選んでみてください。
（このサイトは使ってないです）
「全体」でサイトのキーカラーなどを選ぶ
ちなみに、このサイトの「サイトキーカラー」は青色、サイトキーテキストカラーは白色です。
「ヘッダー」でメニュー設定
ヘッダーのレイアウトを決めます。
このサイトは、下記のとおり
- ヘッダーレイアウト：トップメニュー（右寄せ）
- ヘッダーを固定するにチェック
- ヘッダーロゴ：任意のロゴを設定
上記以外はデフォルトのままでOK
「タイトル」でサイトのタイトルとディスクリプションを設定
ディスクリプションは空白なので、任意の説明文を入れる
Luna企画は、長野県のWebライティング・コンテンツ制作オフィスです。Webマーケッターとしての知見も活かし、Webサイト制作やSEO対策、オウンドメディア制作など幅広いサービスを提供。SEOにお悩みの方はぜひご連絡ください。
ディスクリプションの例
SNSシェア
SNSシェア設定。
ページ上部は邪魔なので非表示にしても良いです
SNSフォロー設定
自社で運用しているSNSにのみチェックをつける。
固定ページでは表示させないようにすると、コーポレートサイト感が増します。
トップページの編集
フロントページと表示されている固定ページが、今のトップページです。
会社サイトに相応しい見た目に編集していきます。
なお、Cocoonで作るサイトには「ブログ型トップページ」と「サイト型トップページ」の2種類がありますが、今回作るのは「サイト型トップページ」と言われるタイプです。
それでは、フロントページにした固定ページを編集していきます。
トップページに不要な要素を削除するCSSの記載
この公式見解を参考にする。
アピールエリアの表示
Cocoon設定の「アピールエリア」で、フロントページのみ表示するように設定します。
エリア画像には会社のイメージに合う、好きな画像を設定しましょう。
その後、「テキストエリア表示」で設定できる項目（アピールポイントなど）を指定していきます。
このサイトの場合は下記のとおり
- 高さ：600
トップページ内のコンテンツ作成
ベネフィット（提供価値）や強み、サービス説明や会社概要を網羅的に紹介します。
カラムを使って2列や3列にすると、コーポレートサイト感が増します。
サイトマップに基づいて作った固定ページへの導線をつけていきましょう。
お問い合わせページの作成
お問い合わせページを作成します。
WordPressのプラグイン「Contact Form 7」の利用がオススメです。
インストールしたら有効化します。
有効化するとWordPressのサイドメニューに「お問い合わせ」という項目が出現するので、必要なお問い合わせフォームを作成しましょう。
「Contact Form 7」の詳しい使い方はこちらの記事で紹介しています。
メニューの作成
つづいてメニューを作成します。
メニューは大きく分けて、次の3種類です。
- ヘッダー（グローバルナビ）
- フッター
- スマホフッター
それぞれのメニューに設置する項目は、Luna企画のWebサイトを参考にしてもらうと良いです。
ヘッダー（グローバルナビ）
WordPress管理画面の「外観→メニュー」で「新規メニュー作成」をクリックし、任意の項目を追加します。
その後、「位置の管理」タブの「ヘッダーメニュー」に、今作ったメニューを選択してください。
フッター
特にこだわりがなければ、「位置の管理」タブの「フッターメニュー」に先ほど作ったメニューを設定
スマホのハンバーガーメニュー
cocoonの場合、モバイル追従メニューをメニュー表示させた方が使い勝手が良いです。
一般的に言われるハンバーガーメニューは、モバイル追従メニュー（フッターモバイルボタン）に表示させます。
フッターモバイルボタン
あたらしく「フッターモバイルボタン」を作ります。
基本的には「CTA」と「メニュー」にしておくと良いです
ハンバーガーメニューは「カスタムリンク」のURLを「#menu」にすると表示されます
