Cocoonの使い方について、項目ごとにまとめています。
設定箇所の一覧は以下も参考にして下さい。
Cocoonの設定 やりたい事の逆引きで編集箇所がわかる50音順一覧
Cocoonで設定できる項目は膨大にあり、いざ何かをしたい時、どこで設定するのか探すのが大変です。この記事では、やりたい事から設定箇所を探せる逆引きの一覧にまとめています。Cocoonを始めたばかりの方や、これから使おうという方は、初期設定...
目次
テーマ
インストール
多機能でシンプルな無料テーマ「Cocoon」の導入方法
かゆいところに手が届く多機能でシンプルなテーマ「Cocoon」。きめ細かい対応のサポートフォーラムもあり、ユーザーの要望を汲み上げてアップデートして下さったり、とても評判のいいWordPressの無料テーマです。今回は、まずその「Cocoo...
更新・過去Ver.
Cocoonテーマの更新方法・最新バージョンや過去バージョン
Cocoonのアップデートは自動がいい？手動でやる？Cocoonは、WordPress管理画面から自動アップデート出来る機能があります。いちいち自分で最新バージョンをチェックする必要がないのでラクチン★ですが、オートアップデート機能でアップ...
スキン
Cocoon標準スキン全種の画面サンプルとカラーコード一覧
Cocoonのデザインスキンは、標準で数十種類用意されています。更に「隠れスキン（７種）」や「自作用サンプル」もあります。それらスキンのキーカラーのカラーコードを一覧にしてみます。利用しているスキンにカスタマイズを加えたい時などに参考にして...
Cocoon標準スキン全種・画面サンプル一覧とファイル構成
スキンの設定Cocoonのデザインスキンは、標準で100種類以上用意されています。たくさんのスキンの見た目を一気に見れるようにまとめました。設定は「Cocoon設定」の「スキン」タブから選択。各スキンで使われているカラーコードは以下にまとめ...
設定関連
フロントページ
Cocoonはトップページを作らず簡単にフロントページを設定！サンプルも
Cocoonでは、フロントページ（トップページ）の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。2020/05/25 Ver.2.1.6.x～ の新機能WordPress表示設定この機能を使えば、トップページを固定...
ヘッダー
レイアウト・ロゴ
Cocoonでヘッダーレイアウトやロゴを設定する方法と表示パターン
Cocoonでヘッダーレイアウトを設定する方法と、レイアウトパターンサンプル紹介、ロゴの設定方法などを解説していきます。ヘッダー設定「Cocoon設定」から行います。「ヘッダー」タブを開きます。設定項目 ヘッダーレイアウト ヘッダーの高さ・...
アピールエリア
Cocoonのヘッダーアピールエリアを設定する
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、ヘッダーに表示できる「アピールエリア」の使い方についてです。以下、サンプルです。赤枠内が「ヘッダーアピールエリア」になります。ヘッダーアピールエリアを設定するサイトヘッダ...
通知エリア
Cocoonのサイト上部に帯状メッセージエリア（通知）を設定・全ページ表示
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、サイト上部にベルト上に表示できる「通知」の使い方についてです。以下、サンプルです。黒いバーが「通知」エリアになります。このエリアはサイトの全ページで表示されます。通知を設...
おすすめカード
Cocoon・おすすめ記事やカテゴリー画像などをカードで表示（おすすめカード）
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、おすすめしたい記事やカテゴリーの画像リンクをヘッダー下の目立つ部分に表示できる「おすすめカード」の使い方についてです。以下、サンプルです。画像はそれぞれのアイキャッチから...
ページトップボタン
図解！Cocoonのヘッダーまわり、管理者メニューの設定方法
Cocoonのヘッダーまわりの設定についてエリアごとの設定方法をまとめています。以下の図の番号順に記載していますので下図を参考にご覧ください。はじめにすべての設定は「Cocoon設定」から行えます。ヘッダーロゴ「ヘッダー」タブを開きます。設...
エディタ
クラシックエディタ
Cocoonでクラシックエディタを使う方法（ブロックエディタ無効）
ワードプレス バージョン5.0以降、新しいエディタGutenberg（グーテンベルク）というブロックエディタが導入されましたが、今までのエディタとは見た目が変わってしまう上、使い方も違うので使いにくい場合、エディタを元に戻す（クラシックエデ...
シンタックスハイライト
Cocoonでシンタックスハイライトを使う方法（ソースコード表示）
シンタックスハイライト（構文強調 ) とは、テキストエディタの機能で、テキスト中の一部分を、コードの種類・その分類ごとに異なる色やフォントで表示するもので、サイト上でソースコードを表示したい際などに、わかりやすくする事が出来るのでとても便利...
フォント
Cocoonのフォント設定方法と字体サンプル一覧
Cocoonは、サイト全体のフォントを字体、サイズ、太さや、行間、行の高さなど細かく設定する事が出来ます。Webフォントもいくつか用意されていて、選択するだけで利用可能です。Cocoonの設定画面には「プレビュー」があり、設定した内容が確認...
管理者メニュー
Cocoon管理者パネルの設定とサンプル＋表示ボタンのリンク先一覧
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、PV数、編集リンクや、スピードチェック、レスポンシブチェックなどのチェックツールへのリンクを表示できる管理者パネルについてです。以下のような形で、サイトの下部にログイン中...
アクセス解析・アドセンスコード
WordPressを高機能無料テーマCocoonで始める！インストール～初期設定まとめ
Cocoonの特徴「Cocoon」は、無料配布されているテーマの中では、一番と言っていいほどの高機能テーマで、一般的なテーマでは必要となるプラグインのほとんどが不要なので、更に高速化を図れます。有名レンタルサーバーも推奨GMOのレンタルサー...
Cocoonでアドセンス広告の貼り方・設定だけで簡単！
Cocoonは、広告についても非常にきめ細かく設定可能です。Googleアドセンスのコードも通常レスポンシブコードや、リンクユニット、関連コンテンツのコードをそれぞれセット出来、表示位置も１２か所ありチェックを入れるだけでOKで、ウィジェッ...
API
CocoonのAPI設定（タブ）の設定方法をすべて解説
CocoonではアフィリエイトのAPI管理が一括で行えてとても便利ですが、たくさん設定項目がありますので、それらを詳細にまとめています。APIの設定Cocoon設定→APIタブアフィリエイト用のAPI設定です。設定項目 Amazonアクセス...
OGP
WordPressを高機能無料テーマCocoonで始める！インストール～初期設定まとめ
Cocoonの特徴「Cocoon」は、無料配布されているテーマの中では、一番と言っていいほどの高機能テーマで、一般的なテーマでは必要となるプラグインのほとんどが不要なので、更に高速化を図れます。有名レンタルサーバーも推奨GMOのレンタルサー...
404ページ
Cocoon 404 Not Foundページの設定方法・画像サンプルサイトも
Cocoonには、ページが見つからない時に表示される404 Not Foundページを自動生成してくれる機能があります。簡単に設定出来、好みの画像やデザインにする事も出来ます。サイト内検索窓や、メニューを設置するなどのカスタマイズも可能です...
AMP・PWA
2023年12月31日にサポート終了・機能廃止。
実際には2024年2月に公開された Ver.2.7.0 で廃止になりました。
Cocoon 2.7.0公開。ads.txt編集・リファラー設定機能の追加。AMP・PWA・HTML縮小化機能の廃止
Cocoon 2.6.9からの変更点です。作者がちょっと体調不良でトータル1ヶ月ほど入院してたためアップデートを行えず、その分溜まった変更や修正が多くなりました。機能追加 ads.txt編集機能の追加 Cocoon設定の「SEO」タブにリフ...
カテゴリーページ
Cocoonで簡単にカテゴリーごとのページをデザイン設定
Cocoonはカテゴリーのデザインを編集し、カテゴリーアーカイブページの上部を簡単にカスタマイズする機能があります。カテゴリーアーカイブページの上部表示例カテゴリー名の背景色、文字色を任意の色に変更出来、記事一覧のアイキャッチ上部にも表示さ...
ウィジェット
表示制御
Cocoonでウィジェット表示制御（表示したくないページを設定）
Cocoonでは、ウィジェットを表示したくないページなどがある場合、簡単に設定する事が可能です。Cocoonオリジナルウィジェットに限らず、WordPress標準ウィジェットも同様にすべてのウィジェットで制御出来、とても便利です。ウィジェッ...
プロフィール
Cocoonでプロフィール欄を表示する方法と設定
Cocoonは、ウィジェットを使って記事の下や、サイドバーなど任意の場所にプロフィール欄を簡単に設置出来ます。プロフィール用画像も、通常は「Gravatar」を使うかプラグインなどを利用しますが、Cocoonには簡単にセットする機能がありと...
CTAボックス
CocoonのCTAボックスウィジェットの使い方とプチカスタマイズ
CTAとは「Call To Action」の略で、日本語では「行動喚起」。「詳細はこちら」とか「お申込みはこちら」「ご購入はこちら」といった案内ボタンを好きな場所にいくつでも簡単に設置する事が出来る機能がCocoonにはあります。サイドバー...
ショートコード
ショートコード一覧
Cocoonの便利機能！ショートコード一覧と使い方
ショートコードとは色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。Cocoonの場合は、最初からたくさんのショートコードが使えます。 ショートコードの記述例オプション付きの例Coc...
サイトマップ
Cocoonショートコード-サイトマップの使い方と表示サンプル
サイトマップ生成ショートコードサイト内のページ一覧を簡単に作成する事が出来ます。 投稿ページ 固定ページ カテゴリーページ 月別アーカイブページそれぞれの表示・非表示を指定できます。出来ない事 個別に表示しない記事を指定 カテゴリー別に表示...
ボックスメニュー
Cocoonのアイコンや画像も使えるボックスメニューの使い方
Cocoonには、便利に使えるショートコードが複数ありますが、今回はアイコンフォントや画像も使えるボックス型のメニューをカスタマイズしてみます。ボックスメニューの使い方ショートコード１つで記事内でもウィジェットでも、アピールエリアやヘッダー...
人気記事一覧
Cocoonショートコード-人気記事一覧の使い方と表示サンプル
人気記事一覧ショートコード投稿ページ・固定ページ・カスタム投稿ページを表示できます。件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので、思い通りの表示が可能です。ショートコード ↓...
新着記事一覧
Cocoonショートコード-新着記事一覧の使い方と表示サンプル
新着記事一覧ショートコード投稿ページ・固定ページ・カスタム投稿ページを表示できます。件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので、思い通りの表示が可能です。ショートコード ↓...
ナビカード
Cocoonショートコード-ナビカードの使い方と表示サンプル
ナビカードショートコードWordPressの管理画面「外観」→「メニュー」で登録したメニューをカード形式でリスト表示が出来るショートコードです。ショートコード ↓コピーできます。初期表示オプションなしの上記ショートコードで表示した例は以下の...
タイムライン・カウントダウン
Cocoonショートコード-タイムラインやカウントダウンの使い方
Cocoonのショートコードで、時間系のショートコードの使い方をまとめています。時系列表示が出来るタイムラインや、過去からの経過時間、未来へのカウントダウンなどが日単位や年単位などで表示できます。 タイムライン 過去～経過時間（月単位） 過...
プロフィールボックス
Cocoonの便利機能！ショートコード一覧と使い方
ショートコードとは色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。Cocoonの場合は、最初からたくさんのショートコードが使えます。 ショートコードの記述例オプション付きの例Coc...
評価の★
Cocoonの便利機能！ショートコード一覧と使い方
ショートコードとは色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。Cocoonの場合は、最初からたくさんのショートコードが使えます。 ショートコードの記述例オプション付きの例Coc...
アフィリエイトリンク
簡単！CocoonでAPI利用のAmazonリンクを貼る方法
Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。Amazonの場合は、Amazon.co.jp Product Advertising APIから商品情報を取得して、商品リンクを簡単に作成出来ます。Amaz...
吹き出し
Cocoonの吹き出しの使い方と設定項目のサンプル
Cocoonには、キャラクターや自分のアバターなどのアイコンで会話形式 の吹き出しを表示する機能があります。今回はその使い方をまとめています。吹き出しのカスタマイズについては以下をご覧ください。吹き出しの設定Cocoon設定→吹き出し初期デ...
ランキング機能
Cocoonのランキング作成機能の使い方・設定方法を詳細に解説
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。以下のようなものです。上記のサンプルで言うと、必須項目は商品名の部分だけですので、これを使って他の用途にも使えそうです。たとえば以下のよ...
記事内
文字装飾
Cocoonの文字装飾サンプル一覧 全253種
Cocoonに標準で準備されている文字装飾のスタイルは膨大で、お気に入りを見つけるまでに時間がかかるため、一覧にまとめました。装飾の数は253種＋インライン（太字などの通常装飾）やフォントサイズ部分で300近いでしょうか。ちょっと色を変えた...
カラム（並列）
Cocoonの記事内で２～４カラムのエリアを自在に配置する方法
Cocoonには、ページ内で２～３カラムの並列記述を可能にするデザインCSSが標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で簡単に横並びに好きな配置利用する事が出来ます。サンプル利用可能なカラム以下の配置が...
目次の表示・非表示
Cocoonで目次の非表示をページ単位に設定する方法
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありません。個別に目次を表示したくないページがある場合の設定も簡単に行えます。目次設定Cocoon設定→目次タブから、表示の設定を行います。設定項目 目次の表示・...
その他
グラフ挿入
「Chart.js」を使って簡単！グラフサンプル７種と設定方法
Chart.jsを使って簡単に様々なグラフの描画が可能です。この記事では、各グラフのコピペで使えるコードやカスタマイズ方法、応用例まで詳しく解説している記事のまとめになっています。