MENU

【テーマ機能】cocoon カスタマイズ紹介

①:記事装飾ブロック
STEP
記事装飾ブロックの確認

記事を装飾するデザインブロックがたくさん!

STEP
「+」マーク
  1. 「+」マーク
STEP
「cocoon ブロック」
  1. 「ブロック」
  2. 「cocoon ブロック」
    • 下までスクロールすると出てくる
STEP
特に使いやすいcocoonブロック
  1. 「cocoon ブロック」
    • 特に使いやすいcocoonブロック
    • アイコンブロック
    • 案内ボックス
    • 白抜きボックス
    • 付箋風ボックス
    • タブボックス
    • 吹き出し
  2. 選択した「cocoonブロック」をクリック
    • ブロックの「上下端」「左右端」をクリックすること
  3. 「スタイル設定」
    • プルダウンをクリックして、デザインの変更編集ができる
②:ヘッダーメニュー(グローバルナビゲーション)
STEP
ヘッダーメニュー(グローバルナビゲーション)の確認

スマホ表示

PC表示

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「メニュー」
  1. 「メニュー」
STEP
「ヘッダーメニュー」
  1. 「ヘッダーメニュー」
STEP
「項目を追加」して、「公開」
  1. 「項目を追加」
  2. 「固定ページ」「投稿ページ」「カスタムリンク」などから好きなものを選択する
  3. 「公開」で保存
③:通知メッセージ(お知らせバー)
STEP
通知メッセージ(お知らせバー)の確認

トップページ上部にある、通知メッセージ(お知らせバー)

STEP
「cocoon設定」→「通知」
  1. 「W」ボタン
  2. 「cocoon設定」
  3. 「通知」
  4. 各種設定を変更修正
    • 「通知表示」→表示オンオフの切り替え
    • 「通知メッセージ」→表示するテキスト内容
    • 「通知URL」
    • 「リンクの開き方」
    • 「色」→「通知エリアの背景色」→「通知エリア文字色」
  5. 「変更をまとめて保存」
④:アピールエリア(ヘッダー画像:キービジュアル)
STEP
アピールエリア(ヘッダー画像・キービジュアル)の確認

サイトのイメージとなる画像の設定がオススメ

STEP
「cocoon設定」→「アピールエリア」
  1. 「W」ボタン
  2. 「cocoon設定」
  3. 「アピールエリア」
STEP
「アピールエリア設定」
  1. 「アピールエリアの表示」
    • 表示/非表示の設定
    • 迷ったら「フロントページ(トップページ)のみで表示」でOK
    • 各投稿記事に表示させることも可能
  2. 「高さ」
    • 最大800px
    • 画像の実際の高さを設定
    • 高さ800pxまでの画像にすること
  3. 「エリア画像」→「選択」
  4. 「変更をまとめて保存」
STEP
その他…必要であれば

画像の上に、「テキスト」「ボタン」「ボタンURL」などの設定も可能!

個人的にこれらは設定しなくて良いと考えています

⑤:おすすめカード(ピックアップコンテンツ)
STEP
おすすめカード(ピックアップコンテンツ)の確認

ページ上部に表示される、特にアピールしたい記事を4つ設定

STEP
「カスタマイズ」
  1. 「W」ボタン
  2. 「外観」
  3. 「カスタマイズ」
STEP
「メニュー」
  1. 「メニュー」
STEP
「おすすめカード」
  1. 「おすすめカード」
STEP
「項目を追加」して、「公開」
  1. 「メニューの位置」
    • 何もチェックしない!空欄のまま!
  2. 「項目を追加」
  3. 「固定ページ」「投稿ページ」「カスタムリンク」などから、好きなものを選択
  4. 「公開」
STEP
「cocoon設定」→「おすすめカード」
  1. 「Wボタン」
  2. 「cocoon設定」
  3. 「おすすめカード」
STEP
各種設定
  1. 「おすすめカードの表示」
    • 表示/非表示の設定
    • 「全ページで表示」がオススメ
  2. 「メニュー選択」
    • 「おすすめカード」
  3. 「表示スタイル」
    • 「画像のみ」がオススメ
  4. 「カード余白」
    • 「おすすめカード毎に余白を付ける」をチェック
  5. 「変更をまとめて保存」
⑥:タブ一覧(カテゴリータブ)
STEP
タブ一覧(カテゴリータブ)の確認

トップページに表示できるカテゴリータブ

最新記事以外に、最大3カテゴリー設置可能

STEP
表示したい3つのカテゴリーを選択
  1. 「W」ボタン
  2. 「cocoon設定」
  3. 「インデックス」
  4. 「フロントページタイプ」
    • 「タブ一覧」
  5. 「表示カテゴリー」
    • 表示させたいカテゴリーを3つまで選択して、チェック
  6. 「変更をまとめて保存」
STEP
その他の設定

デモサイトと同じ「タブ一覧(カテゴリータブ)」の設定にする場合

各項目をご自身の好みに調整することもできます

  1. 「並び順」
    • 「投稿日(降順)」
  2. 「カードタイプ」
    • 「縦型カード2列」
  3. 「枠線の表示」
    • チェックを外す
  4. 「自動生成抜粋文字数」
    • 「0」
  5. 「投稿関連情報の表示」
    • 「投稿日の表示」をチェック
    • 「更新日の表示」をチェック
  6. 「変更をまとめて保存」
⑦:プロフィール(サイドバー)
STEP
プロフィール(サイドバー)を確認

サイドバーに載せることができるプロフィール欄

「自己紹介」「自己紹介個別ページへのリンク」などを設定できる!

STEP
プロフィール設定
  1. 「W」ボタン
  2. 「ユーザー」
  3. 「プロフィール」
  4. 「ニックネーム」
    • ここで一度画面を下にスクロールして、「プロフィールを更新」
  5. 「ブログ上の表示名」
    • ④で「プロフィールを更新」した後に、プルダウンで選択できるようになる
STEP
プロフィール文章→画像設定
  1. 「プロフィール情報」
  2. 「プロフィール画像のアップロード」
    • 「選択」
  3. 「プロフィールページURL」
    • 固定ページなどで詳細のプロフィールページを作成しているなら、設定可能
  4. 「プロフィールを更新」で保存
STEP
ウィジェット
  1. 「W」ボタン
  2. 「外観」
  3. 「ウィジェット」
  4. 「プロフィール」
  5. 「サイドバー」
    • ④ → ⑤ へ、ドラックアンドドロップ
STEP
プロフィールウィジェット設定
  1. 「プロフィール」
  2. 「画像を円形にする」をチェック
    • 円形にするか、写真のまま四角形にするかは各自の好み
  3. 「保存」
⑧:SNSアカウント設定
STEP
SNSアカウント設定の確認

プロフィールサイドバーに各種SNSを設定できる!

STEP
プロフィール設定
  1. 「W」ボタン
  2. 「ユーザー」
  3. 「プロフィール」
STEP
各種SNS設定(下にスクロール)

下にスクロールをして…

  1. 「サイトURL」
  2. 「Twitter」
  3. 「Facebook」
  4. 「はてブ」
  5. 「Instagram」
  6. 「Pinterest」
  7. 「YouTube」
  8. 「TikTok」
  9. 「Linkedln」
  10. 「note」
  11. 「SoundCloud」
  12. 「Flickr」
  13. 「LINE」
  14. 「Amazon」
  15. 「Twitch」
  16. 「楽天 ROOM 」
  17. 「Slack」
  18. 「GitHub」

などなど、様々なSNSのURL設定ができます。

しかし多すぎるとプロフィール欄が見えにくくなるので、赤字を中心に絞って設定しましょう。

STEP
プロフィールを更新
  1. 「プロフィールを更新」で保存
STEP
ウィジェット
  1. 「W」ボタン
  2. 「外観」
  3. 「ウィジェット」
  4. 「プロフィール」
  5. 「サイドバー」
    • ④ → ⑤ へドラックアンドドロップ
目次