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