【cocoonの初期設定】基本的な設定7つを画像付きで解説!

ブログ
ダムス
ダムス

cocoonの初期設定って何をしたらいいんじゃ?

ヒデヨシ
ヒデヨシ

設定項目が多すぎて、何をしたら良いかわからないんじゃ!

クサ子
クサ子

cocoonにおすすめのプラグインも教えて欲しい!

パパクサマン
パパクサマン

今回はこんなお悩みを解決。cocoonをインストールしたら、すぐにやっておきたい初期設定を画像付きで解説していますよ!

本記事の内容

・cocoonの基本的な設定7つ

・おすすめのプラグイン紹介

ちなみに赤枠内の設定を行いますよ。

cocoon設定画面

cocoonの初期設定7つ

cocoonの設定変更する時は子テーマを編集します。

親テーマと子テーマがインストール出来ているか確認し「子テーマ」を有効にしてください。

パパクサマン
パパクサマン

ダウンロードしていない場合は、こちらからどうぞ!

ワードプレス、テーマ確認

確認が出来たら設定変更をはじめましょう。

cocoon初期設定7つ

・スキン

・全体

・ヘッダー

・タイトル

・SEO

・アクセス解析/認証

・AMP

順番に解説してきます。

まずは、ワードプレスのメニューから「cocoon設定」をクリック。

ワードプレス、cocoon設定の場所

cocoon初期設定:スキン

「スキン」タブをクリック。

「スキン一覧」でスクロールすると、60種類以上の中から選べます。

cocoon設定画面、スキン

スキンを変更すると、ブログ全体のデザインを一瞬で変更出来ますよ。

デザインに関する知識がなくても簡単にオシャレな感じに出来るのでありがたいですね。

パパクサマン
パパクサマン

好きなスキンを選択して、プレビューで確認しながら選びましょう。

cocoon初期設定:全体

「全体」タブでは、ページ全体の表示に関する設定を行います。

下記4つを変更する事で、サイト全体のデザインが変わってきます。

・サイトキーカラー

・サイトテキストカラー

・サイト背景色

・サイトフォント

パパクサマン
パパクサマン

サイトフォントに関しては「pc18px/スマホ16px」くらいが見やすいのでオススメです。

サイトリンク色も変更できます。

しかし多くの人が「リンクは青」と認識している為、変更しない方が良いでしょう。

cocoon初期設定:ヘッダー

ここでは、ヘッダーのレイアウトが変更出来ます。

cocoon設定画面、ヘッター

・ヘッダーレイアウトはセンターロゴ(スリムメニュー)がおすすめです。

・ヘッダーロゴを作成している場合はここでアップロードしよう。

・キャッチフレーズはプレビューを見ながら設定しよう。

パパクサマン
パパクサマン

ちなみに、私はキャッチフレーズ「表示しない」にしています。

cocoon初期設定:タイトル

「タイトル」タブでは、検索結果で表示された時の設定を行えます。

cocoon設定画面、フロントページ設定

「サイトの説明」はメタディスクリプションタグの内容になるので、SEO対策に繋がります。

パパクサマン
パパクサマン

どのようなサイトか、分かりやすく入力しましょう。

cocoon設定画面、投稿・固定ページ設定

「投稿・固定ページの設定」と「カテゴリー・タグページ設定」では、メタディスクリプションとメタキーワードは「出力する」にチェックを入れましょう。

cocoon初期設定:SEO

「カテゴリーページをnoindexとする」と「カテゴリーページの2ページ目以降をnoindexとする」にチェックが入ってない事を確認します。

その他は全部チェックでOKです!

cocoon設定画面、SEO

cocoon初期設定:アクセス解析・認証

データの収集が出来る様にする為に、GoogleアナリティクスのIDを入れます。

まずはGoogleアナリティクスにログイン。

「⚙」→「プロパティ設定」→「トラッキングID」をコピーします。

Googleアナリティクス、トラッキングID取得画面

ワードプレスに戻って「Google AnalyticsトラッキングID」に貼り付ければ完了です。

Googleアナリティクス、トラッキングID

Googleアナリティクスの導入がまだの方は、下記の記事からどうぞ。

cocoon初期設定:AMP

AMPとは、簡単に言うと「モバイルページを高速で表示させる為の手法」です。

パパクサマン
パパクサマン

Googleはモバイルページをサイト評価の主軸にしているので、AMP設定をするとSEO対策にも有効ですよ。

また単純に表示速度が速いと、ユーザーが快適にブログを見る事が出来ますよね。

ぜひ設定しましょう。

設定は簡単!「AMP機能を有効化する」にチェックを入れるだけ。

cocoon設定画面、AMP設定
パパクサマン
パパクサマン

ただし、表示が崩れるなどの不具合が起こった場合はOFFにしてください。

以上で7つの項目は完了です。

基本項目とは別にサイトを高速化できる設定があるので、合わせて紹介します。

cocoon初期設定:高速化

サイト表示スピードを高速化させる為の設定です。

こちらは左側のメニューにあります。

「cocoon設定」→「高速化」をクリックします。

cocoon設定画面、サイト高速化

1番下まで「全てチェックを入れる」でOKです。

cocoonにオススメのプラグイン

最後にcocoonにオススメのプラグインを紹介します。

cocoonはデフォルトで機能がたくさんあるので、一般的にオススメされているプラグインを入れると機能が重複する場合もあります。

パパクサマン
パパクサマン

私が利用しているプラグインは下記です。参考にしてみてください。

Autoptimize→コードを最適化

Broken Link Checker→リンク切れをチェック

Contact Form 7→お問い合わせページ設置

EWWW Image Optimizer→画像圧縮

Google XML Sitemaps→XMLサイトマップ作成

LiteSpeed Cache→サーバーによって使えない場合があります

Really Simple SSL→サイトをSSL化

TablePress→テーブル作成

WP Multibyte Patch→日本語の文字化けなどをなくす

「Contact Form 7」は、お問合せページが設置できるプラグインです。

詳しい設置方法はこちらの記事からどうぞ!

「Google XML Sitemaps」はブログ運営に必須なXMLマップを自動生成できるプラグインです。

詳しい設定方法はこちらの記事からどうぞ!

今回は以上です。

ここまで終われば、基本的な設定は完了です。

最初はシンプルなデザインかもしれませんが、細かいカスタマイズについては記事を投稿しつつ、ワードプレスに慣れてから行いましょう。

タイトルとURLをコピーしました