Cocoonの使い方について、項目ごとにまとめています。
設定箇所の一覧は以下も参考にして下さい。
Cocoonの設定 やりたい事の逆引きで編集箇所がわかる50音順一覧
Cocoonで設定できる項目は膨大にあり、いざ何かをしたい時、どこで設定するのか探すのが大変です。 この記事では、やりたい事から設定箇所を探せる逆引きの一覧にまとめています。 Cocoonを始めたばかりの方や、これから使おうという方は、初期...
目次
テーマ
インストール
多機能でシンプルな無料テーマ「Cocoon」の導入方法
かゆいところに手が届く多機能でシンプルなテーマ「Cocoon」。 きめ細かい対応のサポートフォーラムもあり、ユーザーの要望を汲み上げてアップデートして下さったり、とても評判のいいWordPressの無料テーマです。 今回は、まずその「Coc...
更新・過去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の場合は、最初からたくさんのショートコードが使えます。 ショートコードの記述例 オプション付きの...
サイトマップ
Cocoonショートコード-サイトマップの使い方と表示サンプル
サイトマップ生成ショートコード サイト内のページ一覧を簡単に作成する事が出来ます。 投稿ページ 固定ページ カテゴリーページ 月別アーカイブページ それぞれの表示・非表示を指定できます。 出来ない事 個別に表示しない記事を指定 カテゴリー別...
ボックスメニュー
Cocoonのアイコンや画像も使えるボックスメニューの使い方
Cocoonには、便利に使えるショートコードが複数ありますが、今回はアイコンフォントや画像も使えるボックス型のメニューをカスタマイズしてみます。 ボックスメニューの使い方 ショートコード１つで記事内でもウィジェットでも、アピールエリアやヘッ...
人気記事一覧
Cocoonショートコード-人気記事一覧の使い方と表示サンプル
人気記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので、思い通りの表示が可能です。 ショートコー...
新着記事一覧
Cocoonショートコード-新着記事一覧の使い方と表示サンプル
新着記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので、思い通りの表示が可能です。 ショートコー...
ナビカード
Cocoonショートコード-ナビカードの使い方と表示サンプル
ナビカードショートコード WordPressの管理画面「外観」→「メニュー」で登録したメニューをカード形式でリスト表示が出来るショートコードです。 ショートコード ↓コピーできます。 初期表示 オプションなしの上記ショートコードで表示した...
タイムライン・カウントダウン
Cocoonショートコード-タイムラインやカウントダウンの使い方
Cocoonのショートコードで、時間系のショートコードの使い方をまとめています。 時系列表示が出来るタイムラインや、過去からの経過時間、未来へのカウントダウンなどが日単位や年単位などで表示できます。 タイムライン 過去～経過時間（月単位） ...
プロフィールボックス
Cocoonの便利機能！ショートコード一覧と使い方
ショートコードとは 色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。 Cocoonの場合は、最初からたくさんのショートコードが使えます。 ショートコードの記述例 オプション付きの...
評価の★
Cocoonの便利機能！ショートコード一覧と使い方
ショートコードとは 色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。 Cocoonの場合は、最初からたくさんのショートコードが使えます。 ショートコードの記述例 オプション付きの...
アフィリエイトリンク
簡単！CocoonでAPI利用のAmazonリンクを貼る方法
Cocoonではアフィリエイトのリンクが簡単に挿入できるよう標準装備されています。 Amazonの場合は、Amazon.co.jp Product Advertising APIから商品情報を取得して、商品リンクを簡単に作成出来ます。 Am...
吹き出し
Cocoonの吹き出しの使い方と設定項目のサンプル
Cocoonには、キャラクターや自分のアバターなどのアイコンで会話形式 の吹き出しを表示する機能があります。 今回はその使い方をまとめています。 吹き出しのカスタマイズについては以下をご覧ください。 吹き出しの設定 Cocoon設定→吹き出...
ランキング機能
Cocoonのランキング作成機能の使い方・設定方法を詳細に解説
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。 以下のようなものです。 上記のサンプルで言うと、必須項目は商品名の部分だけですので、これを使って他の用途にも使えそうです。 たとえば以...
記事内
文字装飾
Cocoonの文字装飾サンプル一覧 全253種
Cocoonに標準で準備されている文字装飾のスタイルは膨大で、お気に入りを見つけるまでに時間がかかるため、一覧にまとめました。 装飾の数は253種＋インライン（太字などの通常装飾）やフォントサイズ部分で300近いでしょうか。 ちょっと色を変...
カラム（並列）
Cocoonの記事内で２～４カラムのエリアを自在に配置する方法
Cocoonには、ページ内で２～３カラムの並列記述を可能にするデザインCSSが標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で 簡単に横並びに好きな配置利用する事が出来ます。 サンプル 利用可能なカラム 以下...
目次の表示・非表示
Cocoonで目次の非表示をページ単位に設定する方法
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありません。 個別に目次を表示したくないページがある場合の設定も簡単に行えます。 目次設定 Cocoon設定→目次タブから、表示の設定を行います。 設定項目 目次...
その他
グラフ挿入
「Chart.js」を使ったグラフサンプル７種と使い方
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々なグラフのサンプルは公式サイトで見る事が出来ます。 C