今回は『Cocoonのフッターをカスタマイズする方法』を解説していきます。
フッターの背景色の変更、ロゴ画像の設置、メニューの編集など、Cocoonなら簡単にカスタマイズ可能です。
それぞれの場所ごとに詳しくお伝えしていきますので、ぜひ参考にしてください。

なお、Cocoonのフッターのデザインは利用しているスキンで異なります。今回の解説では『COLORS(グリーン)』を使っています。
Cocoonのフッターをカスタマイズする方法
動画でも解説していますので、合わせて参考にしてみてください。
フッターの背景色・文字色
Cocoonのフッターの背景色・文字色は『Cocoon設定 ⇒ フッター』で変更できます。
フッターの色も選択しているスキンで異なりますが、お好みの色に変更したい時は、こちらで設定してください。
フッターロゴとクレジット
Cocoonのフッターロゴとコピーライトも『Cocoon設定 ⇒ フッター』で設定します。フッターメニューの位置もこちらで設定します。
①『フッター表示タイプ』ではフッターロゴ・メニュー・クレジットの配置を決めます。
②『フッターロゴ』ではロゴ画像を設定できます。なお、空欄のままだとフッターにはヘッダーロゴが設置され、ヘッダーロゴも未設置の場合はブログタイトルが表示されます。
③フッターに表示させるクレジット(コピーライト)の形式を選択できます。
フッターメニュー
Cocoonのフッターメニューは『外観 ⇒ メニュー』で設定します。
メニュー用のページを設定したら、メニュー設定で『フッターメニュー』にチェックを入れれば完了です。
なお『Cocoon設定 ⇒ フッター』の一番下で、フッターメニューの幅を設定できます。
『メニューの幅をテキストに合わせる』にチェックを入れた状態がこちらです。
『メニューの幅をテキストに合わせる』のチェックを外すと、メニュー幅が上で設定したpx数に均一化されます。
メニュー幅もお好みで設定してみてください。
フッターモバイルボタン
Cocoonではスマホ表示の際に、フッターにボタン型メニュー(フッターモバイルボタン)を設置できます。
フッターモバイルボタンを設置するには2つの設定が必要です。
まず一つ目に、『外観 ⇒ メニュー』で『フッターモバイルボタン』にチェックを入れます。
もう一つが、『Cocoon設定 ⇒ モバイル』でも『フッターモバイルボタン』にチェックを入れます。
フッターモバイルボタンはこの2つの設定を行わないと表示されませんのでお気を付けください。
さらに、『Cocoon設定 ⇒ モバイル』には『モバイルボタンの固定表示』という項目があります。
こちらにチェックを入れると常にモバイルボタンが表示され、チェックを外すと下にスクロールしたときには非表示なります。
こちらもお好みで設定しておきましょう。
フッターウィジェット
Cocoonのフッターウィジェットは、左・真ん中・右の3ヵ所に設置できます。
設定は『外観 ⇒ ウィジェット ⇒ フッター左・中・右』で行います。
プロフィールや人気記事、Twitterの埋め込みなど、お好みで設定してみてください。
なお、フッターウィジェットを入れ過ぎると表示速度に影響が出るため、このブログではあえて何も入れていません。
また、スマホ表示の際は『フッター(モバイル用)』に設置したウィジェットが表示されます。
スマホの場合もたくさんウィジェットを入れ過ぎると、表示が縦に長くなりすぎるので、設置する場合はなるべく厳選することをオススメします。
まとめ
今回は『Cocoonのフッターをカスタマイズする方法』を解説してきました。
- フッターの背景色:Cocoon設定 ⇒ フッター
- フッターロゴ&コピーライト:Cocoon設定 ⇒ フッター
- フッターメニュー:外観 ⇒ メニュー ⇒ 『フッターメニュー』
- フッターモバイルボタン
- 外観 ⇒ メニュー ⇒ 『フッターモバイルボタン』
- Cocoon設定 ⇒ モバイル ⇒ 『フッターモバイルボタン』
- フッターウィジェット:外観 ⇒ ウィジェット ⇒ フッター左・中・右
Cocoonならフッターも細かく設定できますので、ぜひ自分好みのデザインに設定してみてくださいね。