図解！Cocoonのヘッダーまわり、管理者メニューの設定方法

Cocoonのヘッダーまわりの設定について

エリアごとの設定方法をまとめています。

以下の図の番号順に記載していますので下図を参考にご覧ください。

はじめに

すべての設定は「Cocoon設定」から行えます。

ヘッダーロゴ

• ヘッダーレイアウト
• ヘッダーの高さ・モバイルヘッダーの高さ
• ヘッダーロゴ
• ロゴサイズ
• キャッチフレーズの配置
• ヘッダー背景画像
• ヘッダー全体色
• ヘッダーロゴ部の背景色
• グローバルナビメニューの色
• グローバルナビメニューの幅

Cocoonでヘッダーレイアウトやロゴを設定する方法と表示パターン

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

ayaito.net

通知エリア

• 通知エリアの表示
• 通知メッセージの設定
• 通知URL
• リンクの開き方
• 通知タイプ・色

Cocoonのサイト上部に帯状メッセージエリア（通知）を設定・全ページ表示

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

ayaito.net

アピールエリア

• アピールエリアの表示、非表示
• アピールエリアの高さ、画像、背景色
• アピールエリアのタイトル、メッセージ
• ボタンメッセージ、リンク先、リンクの開き方、ボタンの色

Cocoonのヘッダーアピールエリアを設定する

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

ayaito.net

おすすめカード

• おすすめカードの表示ページ
• メニュー選択
• 表示スタイル（画像・タイトル・画像位置など）
• カード余白
• カードエリア左右余白

Cocoon・おすすめ記事やカテゴリー画像などをカードで表示（おすすめカード）

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、おすすめしたい記事やカテゴリーの画像リンクをヘッダー下の目立つ部分に表示できる「おすすめカード」の使い方についてです。以下、サンプルです。画像はそれぞれのアイキャッチから...

ayaito.net

管理者メニュー

• 管理者メニューの表示・非表示
• 投稿一覧に表示する項目（作成者・カテゴリー・タグ・コメント・日付・投稿ID・文字数・アイキャッチ・メモの内容）
• 管理者パネルの表示・非表示
• PVエリアの表示・非表示
• インデックスPV表示・非表示
• 編集エリアの表示・非表示
• AMPエリアの表示・非表示
• チェックツールエリアの表示・非表示
  • PageSpeed Insights
  • GTmetrix
  • モバイルフレンドリーテス
  • 構造化データチェック
  • HTML5チェック
  • HTML5アウトラインチェック
  • SEOチェキ
  • ツイートチェック

Cocoon管理者パネルの設定とサンプル＋表示ボタンのリンク先一覧

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、PV数、編集リンクや、スピードチェック、レスポンシブチェックなどのチェックツールへのリンクを表示できる管理者パネルについてです。以下のような形で、サイトの下部にログイン中...

ayaito.net

ページトップボタン

• トップへ戻るボタンの表示・非表示
• ボタンのアイコンフォント選択（10種）
• ボタンの背景色・文字色
• ボタン画像

フロントページの設定方法は以下をご覧ください。

Cocoonはトップページを作らず簡単にフロントページを設定！サンプルも

Cocoonでは、フロントページ（トップページ）の記事一覧を、カテゴリー単位に横並びやタブメニューで表示する事が出来ます。2020/05/25　Ver.2.1.6.x～　の新機能WordPress表示設定この機能を使えば、トップページを固定...

ayaito.net