Cocoonのカスタマイズ 15選

敷島博士

最後の設定です。
Cocoonカスタマイズは、窓、看板、壁などを選ぶようで楽しいですけど、少し時間がかかりますので、主なものだけ紹介します。

OP№ coc1 
Cocoonカスタマイズ開始
管理画面設定ダッシュボード設定Cocoon設定Cocoon設定クリックしてください

スポンサーリンク

Cocoonカスタマイズ ①スキン


敷島博士

スキンは、イージーオーダーの洋服のようで簡単に着せ替えできます。

OP№ coc2 
Cocoonカスタマイズ
スキン

スキンクリックしてください。
⇒③カーソルをあてるとサイトサンプルが表示されます。
⇒③チェックしてください。
変更をまとめて保存クリックしてください。

スポンサーリンク

Cocoonカスタマイズ ②全体

敷島博士

全体は、文字のサイズを変更できます。
通常は変更しませんが、シニアのために2ポイント大きくしています
スキンを選ぶとスキン制御で変更できない項目もあります。
スキンを使わないでオリジナルの場合は、キーカラーを設定すると簡単に色調整ができます。

OP№ coc3 
Cocoonカスタマイズ
全体

全体クリックしてください。
サイトフォント20pxクリックしてください。
モバイルサイトフォント18pxクリックしてください。
変更をまとめて保存クリックしてください。

スポンサーリンク

Cocoonカスタマイズ ③ヘッダー

敷島博士

ヘッダーは、看板ですので設定でイメージが大きくかわります。
プレビューで確認ください。
スキンによっては、メニュー等が表示されない場合があります。

OP№ coc4 
Cocoonカスタマイズ
ヘッダー

ヘッダークリックしてください。


OP№ coc5
Cocoonカスタマイズ
ヘッダー

ヘッダーレイアウト
センターロゴ
(デフォルト)②Ⓐ
(トップメニュー)②Ⓑ
(スリムメニュー)②Ⓒ
(スリムトップメニュー②Ⓓ
好みのものを選択してください。


OP№ coc6
Cocoonカスタマイズヘッダー

ヘッダーレイアウト
トップメニュー②Ⓐ
(右寄せ)②Ⓑ
 小②Ⓒ
 小(右寄せ)②Ⓓ
好みのものを選択してください。

 

敷島博士

ヘッダー(看板)の文字の位置と全体の大きさがきまれば次は文字のデザイン(ロゴ)です。
ペイント等のソフトでロゴを考え、ヘッダーに設定しましょう。

OP№ coc7
Cocoonカスタマイズヘッダー

ヘッダーロゴ1選択クリックしてパソコンからロゴをインストールしてください。


OP№ coc8
Cocoonカスタマイズヘッダー

ヘッダーレイアウトⒶ選択クリックしてください。
ヘッダーロゴインストールしてください。
キャッチフレーズの配置チェックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ④OGP

敷島博士

OGP画像は、ツイッターやFacebook等のSNSでブログのURLをシェアしたときに表示される画像です。
デフォルトの画像をCocoonから入れ替えましょう。

OP№ coc9
Cocoonカスタマイズ
OGP
OGPクイックしてください。
画像のアップロード入れ替えてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑤インデックス

敷島博士

インデックスは、画像や文字の表示内容を設定します。

OP№ coc10
Cocoonカスタマイズ
インデックス

インデックスクリックしてください。
カードタイプ選択クリックしてください。
自動生成抜粋文字数入力してください。※本文の表示文字数です。
投稿関連情報の表示チェックすると本文が表示されます。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑥投稿

敷島博士

投稿は、投稿ページの関連記事やパンくずリストなどの表示設定ができます。

パンくずリストとは、ご覧いただいているWebサイトの階層構造を表示しています。
 言葉の由来は、童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が迷子にならないようにパンくずを置いていった事が語源になっています。

OP№ coc11
Cocoonカスタマイズ
投稿
Cocoon設定⇒投稿クリックしてください
関連記事設定等を入力してください。
 表示タイプ
 表示数
 枠線の表示
 最大自動生成抜粋文字数
 投稿関連情報の表示
コメント設定チェックを外してください。
パンくずリスト設定チェックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑦固定ページ

敷島博士

固定ページでは、パンくずリストなどを表示することができます。

OP№ coc12
Cocoonカスタマイズ
固定
Cocoon設定固定ページクリックしてください。
コメント設定チェックを外してください。
パンくずリスト設定表示位置を選択チェックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑧本文

敷島博士

本文は、外部・内部リンクの開き方や日付等を設定できます。
外部リンクは新しく開き、内部リンクは継続にしています。

OP№ coc13
Cocoonカスタマイズ
本文
Cocoon設定本文クリックしてください。
外部リンク設定Ⓐ⇒新しいタブで開く選択クリックしてください。
内部リンク設定変更しない選択してください。
投稿情報表示設定投稿関連情報更新日のチェックを外します。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑨目次

敷島博士

次は目次の設定です。
目次は、最初の見出しの前に設定した状態で表示されます。

OP№ coc14
Cocoonカスタマイズ
目次
Cocoon設定目次クリックしてください。
目次の表示チェックしてください。
目次切り替えチェックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑩SNSシェア

敷島博士

SNSシェアは、SNSボタンの種類や位置等を設定できます。
ボタンは本文の次に表示しました。

OP№ coc15
Cocoonカスタマイズ
SNSシェア

Cocoon設定SNSシェアクリックしてください。
トップシュアボタンの表示チェックを外してください。
トップシュアボタンの表示チェックしてください。
お好みのSNSをチェックしてください。
カラム数選択クリックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑪画像

敷島博士

画像は、アイキャッチ画像をページの始めに表示するか、設定できます。

OP№ coc16
Cocoonカスタマイズ
画像

Cocoon設定画像クリックしてください。
アイキャッチの表示チェックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑫通知

敷島博士

通知は、ヘッダー下にメッセージを表示できます。

OP№ coc17
Cocoonカスタマイズ
通知
Cocoon設定通知クリックしてください。
通知の表示チェックしてください。
通知メッセージ入力してください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑬おすすめカード

敷島博士

おすすめカードは、ヘッダー下にカード(アイキャッチ画像)
メニューを表示できます。
メニュー設定でおすすめカードのメニューを設定してください。
カードは偶数で表示バランス的に4個がきれいです。

OP№ coc18
Cocoonカスタマイズ
おすすめカード

メニュー設定
管理画面ダッシュボード外観メニュークリックしてください。
メニュー名「おすすめカード」入力してください。
新しいメニューを作成しましょうクリックしてください
メニューを作成クリックしてください。


OP№ coc19
Cocoonカスタマイズ
おすすめカード

メニュー設定

固定ページ選択チャックしてください。
表示順位クリック引っ張ってください。
おすすめカード設定
Cocoon設定おすすめカードクリックしてください。


OP№ coc20
Cocoonカスタマイズ
おすすめカード

おすすめカードの表示選択クリックしてください。
メニュー選択選択クリックしてください。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑭カルーセル

敷島博士

カルーセルは、アイキャッチ画像をヘッダー下にスライド表示します。

OP№ coc21
Cocoonカスタマイズ
カルーセル
Cocoon設定カルーセルクリックしてください。
カルーセルの表示選択クリックしてください。
表示内容チェック・選択クリックしてください。
オートプレイチェックしてください。スライドします。
オートプレイインターバル選択クリックしてください。スライドの間隔が設定できます。
変更をまとめて保存クリックしてください。

Cocoonカスタマイズ ⑮AMP

敷島博士

AMPを有効化して高速化しましょう。

OP№ coc22
Cocoonカスタマイズ
AMP
Cocoon設定APIクリックしてください。
AMPの有効化チェックしてください。
変更をまとめて保存クリックしてください。