Cocoonの設定 基本の10項目【ブロク立ち上げのための備忘録】

Cocoonの設定は多機能なだけに色々あって、どこでなんの設定が出来るのか毎回思い出すのが面倒なので、備忘録を作成しました。
今回新しくブログを立ち上げたときに触った設定を書いておきます。
WordPressの無料テーマのCocoonを使ってブログ立ち上げのときのチェックリストとして使っていただければと思います。

Cocoonの設定 基本の10項目【ブロク立ち上げのための備忘録】

ブログの立ち上げのためのCocoonの基本の設定10項目をお伝えします。

タイトルやキャッチコピーの設定

Cocoonのインストールやタイトル、キャッチコピー、httpをhttpsに変える方法はこちらの記事で解説していますので、参考にしてください。

左のリストのCocoon設定からCocoon設定をクリックします。

Cocoonの設定画面が開きます。
Cocoonなかなり多機能で、設定が色々できるようになっていますが、重要なところだけ確認していきましょう。

スキンの設定

スキンはブログ全体の見た目に影響する設定なので、一番最初に決めます。

僕はシンプルな色使いが好きなので、スキンは「なし」を選んでいます。
ここは好みなので、色々プレビューして気に入った色使いを確認してみてください。

WordPressのヘッダー画像とロゴマークの設定

ヘッダー画像の設定をします。

ヘッダータブからヘッダー背景画像を設定します。
（ブログの一番上に表示される画像のことです。）

ヘッダー背景画像の固定はチェックを外しておくと、画像が固定されます。
画像はPIXTAなどの有料の画像を購入したり、
ACなどで著作権フリーの画像をダウンロードするか、
自分で撮影した写真などを使用します。

画像をアップロードしたら画面下の「変更をまとめて保存」します。画像の加工にはAdobeのPhotoshopなどがあるとキレイに加工したり、画像のサイズ変更などが簡単にできます。
無料の画像加工ソフトもあります。

ロゴマークの設定

ロゴマークはなくても問題ないですが、設定したい場合は、ヘッダーロゴのところに画像を設定すると表示されます。
ヘッダーよりも高さを小さくしておけばヘッダーに収まります。

ヘッダー画像やロゴ画像は自作できます。

CANVAならサイズを選んで好きな画像や文字を配置して簡単に作成できます。
テンプレートもたくさんあるので、参考になります。

ブログのトップページに表示される画像の大きさの設定

ブログのトップページに表示される画像の設定です。

最初はトップページに表示する記事数も少ないので、一番読んでほしい記事を一番上に固定して、その下にその他の記事が並ぶようにしています。

Cocoon設定でインデックスを選んで、

大きなカード（先頭のみ）を選びます。

記事の並び順は最初は「更新日（降順）」にしておけばOKです。

記事数が増えてきたらトップページのカスタマイズをして、読者の方が読みたい記事にたどり着きやすくします。

トップページのカスタマイズはこちらの記事で詳しく解説しています。

記事へのコメント欄のあり、ナシを選ぶ

投稿した記事のコメント欄を表示して、読者の方コメントを書けるようにしておくかどうかを設定できます。
デフォルトではコメント欄は表示する設定になっているので、そのままでいい方は何もしなくてOKです。

コメントを非表示にしたい場合は

投稿タブから、コメント設定のチェックを外しておけばOKです。

コメント欄は表示しておくと、読者の方が感想を書いてくれることがあり、運営側としてはとても励みになります。

僕はコメント欄の代わりにお問い合わせフォームに一本化して読者の方からのご連絡をいただくようにしています。

SNSシェア表示設定

記事の上の方にSNSにシェアするためのボタンが表示される設定になっています。
基本設定では6個のシェアボタンが表示されています。

このブログでは全部外してしていますが、自分の読者さんが使いそうなSNSのボタンだけを残しておくという方法もあります。

ブランドカラーがちょっと強すぎると感じる場合は白抜きにすることもできます。

設定は、同じSNSシェアのタグの

ボタンカラーのところで、ブランドカラー（白抜き）を選んで保存すれば変更できます。

記事の一番下にも表示する設定があるので、不要な場合は外します。

404ページメッセージ

URLが正しくない場合に表示する404 Not Foundのページに表示する画像とメッセージをセットします。

ページ数が増えてきて、リンクが切れてしまった時や、存在しないURLを読者の方が打ち込んでしまったときのための設定なので、きちんと戻ってきてもらえるようにセットしましょう。

404ページのタブを選んで、

画像をアップロードして、メッセージを入力します。

これだけだと以下のように、少しさみしい感じになってしまうので、
他のページに誘導できるように設定しておきます。

404ページの下に検索窓と人気記事の一覧を表示する

外観＞ウィジェットの右下の方に404ページのボタンがあるので、ここに表示したいものを設定します。

例えば、検索窓の場合、

検索をクリックして、一番下のほうにある404ページを選んで、
ウィジェットを追加ボタンを押すと、404ページの下に「検索」が追加されます。

人気記事も追加して、以下のようにしました。

これで、自分のブログに適当な存在しないURLを入れてみると、

このように検索窓と人気記事の一覧を表示することができました。

サイドバーの設定

次にサイドバーの設定です。

デフォルトでサイドバーにカテゴリやアーカイブなどが表示されていますが、
超特化ブログの場合はカテゴリもないですし、アーカイブも意味がないので、外して、代わりに最近の記事や読んでもらいたい記事などを表示するようにします。

外観＞ウィジェットの中から、サイドバーに表示する項目を選びます。

左のメニューからドラッグアンドドロップでも設定できます。

追従サイドバーもうまく使う

サイドバー追従は、下にスクロールした時についてくるタイプのサイドバーです。
サイドバーが下までいったあと、追従サイドバーが表示されます。

どこに何を表示するかは重要です。
特に上の方や追従は目に触れる機会が多いので、何を表示するかはよく考えて設定します。

プラグインの設定

プラグインは必須のプラグインを入れておきましょう。

必須のプラグインは

です。

Contact Form 7はお問い合わせ用
Google XML SitemapはGoogleの検索エンジンにブログを認識してもらいやすくするために使います。

プラグインの追加方法は簡単です。

左のプラグインを選んで、

画面上の方にある新規追加をクリック

コンタクトフォームは検索窓にContact Formと入力すると出てきます。
この富士山のマークが目印です。

右上の今すぐインストールをクリックすればOKです。
上の画像ではすでにインストールずみなので、「有効」という表示になっています。

サイトマップのプラグインは
画面右上の検索窓に
XML Sitemaps auctollo
と検索すると出てきます。

こちらも同じようにインストールしておきましょう。

類似品がたくさんありますが、Auctolloさんの作成したサイトマップが一番使いやすいので、これにしています。

プライバシーポリシー、お問合せフォーム、プロフィールページ

プライバシーポリシー、お問合せフォーム、プロフィールは３つとも作成しておきましょう。

それぞれの内容はこのブログのページを参考にしていただいても大丈夫です。

この３つは固定ページで作ります。

この固定ページに３つの記事を新規追加していきます。
プライバシーポリシーとプロフィールは文字や画像を使って普通の投稿と同じように書けばOKです。

お問い合わせはプラグインのContact Form7のお問合せフォームを使います。

お問合せフォームは左側のお問い合わせを開いて、新規追加をクリックします。

コンタクトフォームのフォームタブはそのままで大丈夫です。
なにか追加したい項目があれば、ボタンをクリックすれば追加ができます。
項目を減らしたい場合は、書かれている項目を<label>から</label>の部分を削除すればOKです。

次にメールタブを開きます。

送信先のメールアドレスを入力して保存します。

保存したら、

ここのコード（カギカッコも含めて）をコピーして、固定ページのお問い合わせのページに貼り付けます。

固定ページに文章を入れて、公開したらお問合せフォームの送信テストをします。

お問い合わせページの右側のパーマリンクのURLスラッグを「contact」にして、固定ページを公開します。
URLスラッグは他の言葉でもOKですが、英語でそのページの意味が判るように設定しておいたほうが良いです。

パーマリンク下のURLをクリックしてページを開いて、お問合せフォームの送信テストをします。
送信して、無事にメールが届けばOKです。

お問い合わせフォームなどの固定ページをブログの下の方（フッター）に配置する

お問い合わせフォームやプロフィールページ、プライバシーポリシーをブログの下の方に配置します。

フッターに設置するには
外観＞メニュー
に進んで、メニュー名のところ（ここでは「フッターメニュー」と入力＞メニューを作成ボタンをクリック

次に、左の固定ページのすべて表示タブをクリックして、
プロフィール、お問い合わせ、プライバシーポリシーにチェックを入れて、メニューに追加ボタンをクリック。

すると、右側に選んだ固定ページが表示されるので、
フッターメニューにチェックを入れて、メニューを保存ボタンをクリック

これで以下のように、ページの右下に表示されました。

フッターをセンターに持ってきたいときは
Cocoon設定＞フッター
と進んで、

フッター表示タイプを中央を選択＞左下の変更をまとめて保存ボタンをクリック

これで、フッターの真ん中に表示できました。

Cocoonの基本的な設定はこれでOKです。

ツールの設定

読者の方がどこからきて、どんなキーワードでブログに来てくれたかを分析していくことになります。
データが取れないと何を改善すればいいかもわからないので、必ず設定しておきましょう。

ブログで収益を上げるためには

は知っておく必要があります。

超特化ブログで使うツールのうち絶対に必要な５つツールの設定はこちらの記事で解説していますのでぜひ見てみてくださいね。

Cocoonのカスタマイズ方法

Cocoonの基本の設定とツールの設定ができたら、Cocoonのカスタマイズも少しやっておくと見た目が良くなります。

ただし時間をかけすぎは禁物です。
簡単にカスタマイズできる方法をまとめていますので、ぜひ読んでみてくださいね！

Cocoonの設定 基本の10項目【ブロク立ち上げのための備忘録】まとめ

このページではCocoonの初期設定を１０項目お伝えしました。

ブログの立ち上げのときにお役に立つはずです。

基本的な設定はこの１０項目でほぼ抑えられているので、
次のステップはツールの設定です。

ブログで収益を上げるためには

は知っておく必要があります。

超特化ブログで使うツールのうち絶対に必要な５つツールの設定はこちらの記事で解説していますのでぜひ見てみてくださいね。

ブログの最低限の装飾（カスタマイズ）の方法はこちらの記事をどうぞ。

ただし時間をかけすぎは禁物なので、簡単にカスタマイズできる方法をまとめていますので、ぜひ読んでみてください。

カスタマイズはあまり時間を書けずにさっさと終わらせてブログの設計と執筆に進みましょう！