Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの使い方:項目ごとに探しやすく総まとめ

スポンサーリンク
使い方
この記事は約5分で読めます。

Cocoonの使い方について、項目ごとにまとめています。

 

設定箇所の一覧は以下も参考にして下さい。

Cocoonの設定 やりたい事の逆引きで編集箇所がわかる50音順一覧
Cocoonで設定できる項目は膨大にあり、いざ何かをしたい時、どこで設定するのか探すのが大変です。 この記事では、やりたい事から設定箇所を探せる逆引きの一覧にまとめています。 Cocoon...

 

スポンサーリンク

テーマ

インストール

多機能でシンプルな無料テーマ「Cocoon」の導入方法
かゆいところに手が届く多機能でシンプルなテーマ「Cocoon」。 きめ細かい対応のサポートフォーラムもあり、ユーザーの要望を汲み上げてアップデートして下さったり、とても評判のいいWordPres...

更新・過去Ver.

Cocoonテーマの更新方法・最新バージョンや過去バージョン
Cocoonのアップデートは自動がいい?手動でやる? Cocoonは、WordPress管理画面から自動アップデート出来る機能があります。 いちいち自分で最新バージョンをチェックする必要がない...

 

スキン

Cocoon標準スキン全種の画面サンプルとカラーコード一覧
Cocoonのデザインスキンは、V標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 それらスキンのキーカラーのカラーコードを一覧にしてみます。 ...
Cocoon標準スキン全種・画面サンプル一覧とファイル構成
Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 たくさんのスキンの見た目を一気に見れるようにまとめました。 ...

 

設定関連

フロントページ

Cocoonはトップページを作らず簡単にフロントページを設定!サンプルも
Cocoonでは、フロントページ(トップページ)の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。 2020/05/25 Ver.2.1.6.x~ の新機能 WordP...

 

ヘッダー

レイアウト・ロゴ

Cocoonでヘッダーレイアウトやロゴを設定する方法と表示パターン
Cocoonでヘッダーレイアウトを設定する方法と、レイアウトパターンサンプル紹介、ロゴの設定方法などを解説していきます。 ヘッダー設定 「Cocoon設定」から行います。 「ヘッダー...

 

アピールエリア

Cocoonのヘッダーアピールエリアを設定する
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、ヘッダーに表示できる「アピールエリア」の使い方についてです。 以下、サンプルです。赤枠内が「ヘッダーアピールエリア」になりま...

 

通知エリア

Cocoonのサイト上部に帯状メッセージエリア(通知)を設定・全ページ表示
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、サイト上部にベルト上に表示できる「通知」の使い方についてです。 以下、サンプルです。黒いバーが「通知」エリアになります。 ...

 

おすすめカード

Cocoon・おすすめ記事やカテゴリー画像などをカードで表示(おすすめカード)
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、おすすめしたい記事やカテゴリーの画像リンクをヘッダー下の目立つ部分に表示できる「おすすめカード」の使い方についてです。 ...

 

ページトップボタン

図解!Cocoonのヘッダーまわり、管理者メニューの設定方法
Cocoonのヘッダーまわりの設定について エリアごとの設定方法をまとめています。 以下の図の番号順に記載していますので下図を参考にご覧ください。 はじめに すべての設...

 

エディタ

クラシックエディタ

Cocoonでクラシックエディタを使う方法(ブロックエディタ無効)
ワードプレス バージョン5.0以降、新しいエディタGutenberg(グーテンベルク)というブロックエディタが導入されましたが、今までのエディタとは見た目が変わってしまう上、使い方も違うので使いにくい...

シンタックスハイライト

Cocoonでシンタックスハイライトを使う方法(ソースコード表示)
シンタックスハイライト(構文強調 ) とは、テキストエディタの機能で、テキスト中の一部分を、コードの種類・その分類ごとに異なる色やフォントで表示するもので、サイト上でソースコードを表示したい際などに、...

 

フォント

Cocoonのフォント設定方法と字体サンプル一覧
Cocoonは、サイト全体のフォントを字体、サイズ、太さや、行間、行の高さなど細かく設定する事が出来ます。 Webフォントもいくつか用意されていて、選択するだけで利用可能です。 Cocoo...

 

管理者メニュー

Cocoon管理者パネルの設定とサンプル+表示ボタンのリンク先一覧
Cocoonには、色々な便利な機能やエリアが用意されています。今回は、PV数、編集リンクや、スピードチェック、レスポンシブチェックなどのチェックツールへのリンクを表示できる管理者パネルについてです。 ...

 

アクセス解析・アドセンスコード

WordPressを高機能無料テーマCocoonで始める!インストール~初期設定まとめ
Cocoonの特徴 「Cocoon」は、無料配布されているテーマの中では、一番と言っていいほどの高機能テーマで、一般的なテーマでは必要となるプラグインのほとんどが不要なので、更に高速化を図れます。 ...
Cocoonでアドセンス広告の貼り方・設定だけで簡単!
Cocoonは、広告についても非常にきめ細かく設定可能です。 Googleアドセンスのコードも通常レスポンシブコードや、リンクユニット、関連コンテンツのコードをそれぞれセット出来、表示位置も12...

 

API

CocoonのAPI設定(タブ)の設定方法をすべて解説
CocoonではアフィリエイトのAPI管理が一括で行えてとても便利ですが、たくさん設定項目がありますので、それらを詳細にまとめています。 APIの設定 Cocoon設定→APIタブ ...

 

OGP

WordPressを高機能無料テーマCocoonで始める!インストール~初期設定まとめ
Cocoonの特徴 「Cocoon」は、無料配布されているテーマの中では、一番と言っていいほどの高機能テーマで、一般的なテーマでは必要となるプラグインのほとんどが不要なので、更に高速化を図れます。 ...

 

404ページ

Cocoon 404 Not Foundページの設定方法・画像サンプルサイトも
Cocoonには、ページが見つからない時に表示される404 Not Foundページを自動生成してくれる機能があります。 簡単に設定出来、好みの画像やデザインにする事も出来ます。 サイト内...

 

AMP・PWA

簡単!CocoonをAMP化する方法・ロゴやCSSのサイズとエラー時の対処
CocoonはAMPやPWAにも対応していて、簡単に対応できます。 PWAについては以下にまとめています。 AMPの設定方法とAMPページの確認方法、またCSS内容などによ...
PWAって?Cocoonで簡単にPWA対応する方法詳細と動作確認方法
CocoonはAMPやPWAにも対応していて、簡単に対応できます。 AMPについては以下にまとめています。 PWAって? PWAとはサイト内で、AppStoreなどを経由する...

 

カテゴリーページ

Cocoonで簡単にカテゴリーごとのページをデザイン設定
Cocoonはカテゴリーのデザインを編集し、カテゴリーアーカイブページの上部を簡単にカスタマイズする機能があります。 カテゴリーアーカイブページの上部表示例 カテゴ...

 

ウィジェット

表示制御

Cocoonでウィジェット表示制御(表示したくないページを設定)
Cocoonでは、ウィジェットを表示したくないページなどがある場合、簡単に設定する事が可能です。 Cocoonオリジナルウィジェットに限らず、WordPress標準ウィジェットも同様にすべてのウ...

 

プロフィール

Cocoonでプロフィール欄を表示する方法と設定
Cocoonは、ウィジェットを使って記事の下や、サイドバーなど 任意の場所にプロフィール欄を簡単に設置出来ます。 プロフィール用画像も、通常は「Gravatar」を使うかプラグインなどを利...

 

CTAボックス

CocoonのCTAボックスウィジェットの使い方とプチカスタマイズ
CTAとは「Call To Action」の略で、日本語では「行動喚起」。 「詳細はこちら」とか「お申込みはこちら」「ご購入はこちら」といった案内ボタンを好きな場所にいくつでも簡単に設置する事が...

 

ショートコード

ショートコード一覧

Cocoonの便利機能!ショートコード一覧と使い方
ショートコードとは 色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。 Cocoonの場合は、最初からたくさんのショートコードが使えま...

サイトマップ

Cocoonショートコード-サイトマップの使い方と表示サンプル
サイトマップ生成ショートコード サイト内のページ一覧を簡単に作成する事が出来ます。 投稿ページ 固定ページ カテゴリーページ 月別アーカイブページ それぞれ...

ボックスメニュー

Cocoonのアイコンや画像も使えるボックスメニューの使い方
Cocoonには、便利に使えるショートコードが複数ありますが、今回はアイコンフォントや画像も使えるボックス型のメニューをカスタマイズしてみます。 ボックスメニューの使い方 ショートコード1つで記事...

人気記事一覧

Cocoonショートコード-人気記事一覧の使い方と表示サンプル
人気記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来...

新着記事一覧

Cocoonショートコード-新着記事一覧の使い方と表示サンプル
新着記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来...

ナビカード

Cocoonショートコード-ナビカードの使い方と表示サンプル
ナビカードショートコード WordPressの管理画面「外観」→「メニュー」で登録したメニューをカード形式でリスト表示が出来るショートコードです。 ショートコード  ↓コピーできます。 ...

タイムライン・カウントダウン

Cocoonショートコード-タイムラインやカウントダウンの使い方
Cocoonのショートコードで、時間系のショートコードの使い方をまとめています。 時系列表示が出来るタイムラインや、過去からの経過時間、未来へのカウントダウンなどが日単位や年単位などで表示できま...

プロフィールボックス

Cocoonの便利機能!ショートコード一覧と使い方
ショートコードとは 色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。 Cocoonの場合は、最初からたくさんのショートコードが使えま...

評価の★

Cocoonの便利機能!ショートコード一覧と使い方
ショートコードとは 色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、 で囲って記述するコードです。 Cocoonの場合は、最初からたくさんのショートコードが使えま...

 

吹き出し

Cocoonの吹き出しの使い方と設定項目のサンプル
Cocoonには、キャラクターや自分のアバターなどのアイコンで会話形式 の吹き出しを表示する機能があります。 今回はその使い方をまとめています。 吹き出しのカスタマイズにつ...

 

ランキング機能

Cocoonのランキング作成機能の使い方・設定方法を詳細に解説
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。 以下のようなものです。 上記のサンプルで言うと、必須項目は...

 

記事内

文字装飾

Cocoonの文字装飾サンプル一覧 全253種
Cocoonに標準で準備されている文字装飾のスタイルは膨大で、お気に入りを見つけるまでに時間がかかるため、一覧にまとめました。 装飾の数は253種+インライン(太字などの通常装飾)やフォントサイ...

 

カラム(並列)

Cocoonの記事内で2~4カラムのエリアを自在に配置する方法
Cocoonには、ページ内で2~3カラムの並列記述を可能にするデザインCSSが標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で 簡単に横並びに好きな配置利用する事が出...

 

目次の表示・非表示

Cocoonで目次の非表示をページ単位に設定する方法
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありません。 個別に目次を表示したくないページがある場合の設定も簡単に行えます。 目次設定 Cocoon設定→目次タ...

 

その他

グラフ挿入

「Chart.js」を使ったグラフサンプル7種と使い方
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。 それらを組み合わせた混合チャートも可能です。 様々な...

 

コメント

タイトルとURLをコピーしました