WordPressテーマ【Cocoon】の設定方法 

ここでは、無料テーマ「Cocoon」を使用する場合の設定方法について解説していきたいと思います。

このWordPressテーマは無料なのですが、無料とは思えないほどとても細かい部分まで設定することができます。

かなり奥が深いので1日で全てを設定しようとせずに、お好みに合わせて少しずつ設定していくことをオススメします。

今回は前提として、Cocoonのテーマをすでにアップロードしているものとしてお話を進めていきます。

アップロードする方法については別記事で解説しているのでそちらをご参照ください。

またCocoonを使用する場合は、製作者の意向によりプラグインの「All in One SEO」は使わないことを推奨しているため、ここでは「無効化」した状態でお話を進めていきます。

まず、WordPressのダッシュボードに入っていただき、左側のサイドメニューから「Cocoon設定」をクリックします。

すると、Cocoon設定のページが開きます。

ここでは様々なタブが並んでいますが、Cocoonテーマでは基本的にこちらのページで8割がた設定を行なっていきます。

タブ別に解説記事がありますので、設定する際は下記の記事を参考にしてみてください。

まずは、初めての方が最低限、設定した方がいい項目の記事には赤枠をつけておきます。

Cocoonのテーマをインストールして間もない頃は、まずこの赤い枠で囲まれている項目だけ設定を行ない、運用して慣れてきたら他の項目を設定することをオススメします。

Cocoon設定 記事一覧
WordPressテーマ【Cocoon】の設定 ≪全体≫
この記事ではCocoon設定の【全体】のタブについて解説していきます。 ここでは、サイト全体のメインカラーや背景の色、文字のフォントなどを設定することができます。 ただしサイトのメインカラーに関して、選択したスキンによっては「スキン制御」と...
WordPressテーマ【Cocoon】の設定 ≪SEO≫
この記事ではCocoon設定の【SEO】のタブについて解説していきます。 SEOのタブでは、主にheadタグについての設定を行ないます。 初心者の方は「headタグ」と言われてもピンと来ない思いますが、ここではオススメの設定をご紹介しますの...
WordPressテーマ【Cocoon】の設定 ≪カラム≫
この記事ではCocoon設定の【カラム】のタブについて解説していきます。 ここでは、サイト全体の列や幅、余白などを設定していきます。 サイドバーの幅の設定やメインコンテンツの幅、そしてサイドバーとメインコンテンツとの距離などを設定することが...
WordPressテーマ【Cocoon】の設定 ≪投稿≫
この記事ではCocoon設定の【投稿】のタブについて解説していきます。 ここでは「投稿ページ」に関する設定を行います。 主に投稿記事の下に表示されるものについての設定です。 この項目については、最初のうちは基本的にデフォルトのままでOKです...
WordPressテーマ【Cocoon】の設定 ≪固定ページ≫
この記事ではCocoon設定の【固定ページ】のタブについて解説していきます。 ここでは、固定ページの「コメント設定」と「パンくずリストの設定」をすることができます。 基本的には「投稿」のタブで行なった設定と一緒で問題ありません。 投稿の設定...
404: ページが見つかりませんでした | WEB道!デザイン×マーケティング
WEBで生きていくための道標
WordPressテーマ【Cocoon】の設定 ≪目次≫
この記事ではCocoon設定の【目次】のタブについて解説していきます。 ここでは名前の通り、目次に関しての設定を行います。 目次の表示 プレビュー 【プレビュー】の項目では、現在の目次デザインを確認することができます。 目次の表示 【目次の...
404: ページが見つかりませんでした | WEB道!デザイン×マーケティング
WEBで生きていくための道標
WordPressテーマ【Cocoon】の設定 ≪SNSフォロー≫
この記事ではCocoon設定の【SNSフォロー】のタブについて解説していきます。 ここの設定は、主にあなた自身のSNSをフォローしてもらうためのボタンを設定する項目になります。 ちなみに、事前に「サイドメニュー」にある「ユーザー」の中の「プ...
WordPressテーマ【Cocoon】の設定 ≪画像≫
この記事ではCocoon設定の【画像】のタブについて解説していきます。 ここでは主に「アイキャッチ画像」など画像全般の設定を行ないます。 それでは順に解説していきます。 本文画像設定 まずは一番上の【本文画像設定】という項目から行ないます。...
WordPressテーマ【Cocoon】の設定 ≪ブログカード≫
この記事ではCocoon設定の【ブログカード】のタブについて解説していきます。 ここでは、記事内にテキストリンクを記載した場合、画像と記事抜粋が表示されたブログカードというものを表示するかどうかの設定になります。 ブログカードサンプル それ...
WordPressテーマ【Cocoon】の設定 ≪コード≫
この記事ではCocoon設定の【コード】のタブについて解説していきます。 ここでは、ソースコードをシンタックスハイライトさせる設定を行ないます。 記事内に、CSSやHTMLといったソースコードの表示などをする方はこちらでハイライトの設定を行...
WordPressテーマ【Cocoon】の設定 ≪フッター≫
この記事ではCocoon設定の【フッター】のタブについて解説していきます。 このタブでは、フッターに関する設定を行ないます。 フッター設定 プレビュー まず、現在のフッターの設定をプレビューで確認しましょう。 フッター色 つづいて、その下の...
WordPressテーマ【Cocoon】の設定 ≪ボタン≫
この記事ではCocoon設定の【ボタン】のタブについて解説していきます。 ここではページのトップへ戻るボタンの設定を行ないます。 それでは順に解説していきます。 トップへ戻るボタン設定 プレビュー プレビューでは現在設定されているボタン画像...
WordPressテーマ【Cocoon】の設定 ≪モバイル≫
この記事ではCocoon設定の【モバイル】のタブについて解説していきます。 ここではスマホなどのモバイル端末での表示レイアウト設定を行ないます。 右側にプレビューがありますので、確認しながら設定していきましょう。 それでは順に解説していきま...
WordPressテーマ【Cocoon】の設定 ≪404ページ≫
この記事ではCocoon設定の【404ページ】のタブについて解説していきます。 ここではサイト内のページを削除した時や読者がURLを打ち間違えたときなど、存在しないページのURLへアクセスしてしまったときに表示されるページ設定を行います。 ...
WordPress無料テーマ【Cocoon】の設定方法≪PWA≫
この記事ではCocoon設定の【PWA】のタブについて解説していきます。 PWAとは「プログレッシブ ウェブアプリ」の略で、スマホで開くとサイトの表示速度が上がったり、キャッシュを利用してオフラインでのサイト閲覧が出来るようになります。 た...
WordPress無料テーマ【Cocoon】の設定方法≪ウィジェットとウィジェットエリア≫
この記事ではCocoon設定の【ウィジェット】と【ウィジェットエリア】のタブについて解説していきます。 このタブは、サイドメニューの「外観」の中にある「ウィジェット」というメニューに対する設定です。 ウィジェット まず「ウィジェット」のタブ...
WordPress無料テーマ【Cocoon】の設定方法≪エディター≫
この記事ではCocoon設定の【エディター】のタブについて解説していきます。 【エディター】では「ブロックエディターの設定」と旧エディターである「クラシックエディターの設定」、そして「共通設定」の3つの設定を行うことができます。 エディター...

今回、優先的に設定した方がいい記事は、

  • スキン
  • ヘッダー
  • タイトル
  • OGP
  • アクセス解析・認証
  • インデックス
  • 通知
  • アピールエリア
  • おすすめカード
  • カルーセル
  • AMP

まずはこれらの設定を優先的に行ないましょう。