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