Cocoonのフッターをカスタマイズする方法

Cocoonのフッターをカスタマイズする方法Cocoonの使い方

今回は『Cocoonのフッターをカスタマイズする方法』を解説していきます。

フッターの背景色の変更、ロゴ画像の設置、メニューの編集など、Cocoonなら簡単にカスタマイズ可能です。

それぞれの場所ごとに詳しくお伝えしていきますので、ぜひ参考にしてください。

なお、Cocoonのフッターのデザインは利用しているスキンで異なります。今回の解説では『COLORS(グリーン)』を使っています。

スポンサーリンク

Cocoonのフッターをカスタマイズする方法

動画でも解説していますので、合わせて参考にしてみてください。

フッターの背景色・文字色

Cocoonのフッターの背景色・文字色は『Cocoon設定 ⇒ フッター』で変更できます。

Cocoonのフッターの背景色・文字色の変更

フッターの色も選択しているスキンで異なりますが、お好みの色に変更したい時は、こちらで設定してください。

フッターロゴとクレジット

Cocoonのフッターロゴとクレジット

Cocoonのフッターロゴとコピーライトも『Cocoon設定 ⇒ フッター』で設定します。フッターメニューの位置もこちらで設定します。

Cocoonのフッターロゴとクレジットの設定

①『フッター表示タイプ』ではフッターロゴ・メニュー・クレジットの配置を決めます。

②『フッターロゴ』ではロゴ画像を設定できます。なお、空欄のままだとフッターにはヘッダーロゴが設置され、ヘッダーロゴも未設置の場合はブログタイトルが表示されます。

③フッターに表示させるクレジット(コピーライト)の形式を選択できます。

フッターメニュー

『メニューの幅をテキストに合わせる』にチェックを入れた状態

Cocoonのフッターメニューは『外観 ⇒ メニュー』で設定します。

フッターメニューの設定方法

メニュー用のページを設定したら、メニュー設定で『フッターメニュー』にチェックを入れれば完了です。

 

なお『Cocoon設定 ⇒ フッター』の一番下で、フッターメニューの幅を設定できます。

フッターメニュー幅の設定

 

『メニューの幅をテキストに合わせる』にチェックを入れた状態がこちらです。

『メニューの幅をテキストに合わせる』にチェックを入れた状態

 

『メニューの幅をテキストに合わせる』のチェックを外すと、メニュー幅が上で設定したpx数に均一化されます。

『メニューの幅をテキストに合わせる』のチェックを外した状態

メニュー幅もお好みで設定してみてください。

フッターモバイルボタン

フッターモバイルボタン

Cocoonではスマホ表示の際に、フッターにボタン型メニュー(フッターモバイルボタン)を設置できます。

 

フッターモバイルボタンを設置するには2つの設定が必要です。

まず一つ目に、『外観 ⇒ メニュー』で『フッターモバイルボタン』にチェックを入れます。

メニューで『フッターモバイルボタン』にチェック

 

もう一つが、『Cocoon設定 ⇒ モバイル』でも『フッターモバイルボタン』にチェックを入れます。

Cocoon設定で『フッターモバイルボタン』にチェック

フッターモバイルボタンはこの2つの設定を行わないと表示されませんのでお気を付けください。

 

さらに、『Cocoon設定 ⇒ モバイル』には『モバイルボタンの固定表示』という項目があります。

モバイルボタンの固定表示

こちらにチェックを入れると常にモバイルボタンが表示され、チェックを外すと下にスクロールしたときには非表示なります。

こちらもお好みで設定しておきましょう。

フッターウィジェット

フッターウィジェット

Cocoonのフッターウィジェットは、左・真ん中・右の3ヵ所に設置できます。

設定は『外観 ⇒ ウィジェット ⇒ フッター左・中・右』で行います。

フッターウィジェットの設定

プロフィールや人気記事、Twitterの埋め込みなど、お好みで設定してみてください。

なお、フッターウィジェットを入れ過ぎると表示速度に影響が出るため、このブログではあえて何も入れていません。

 

また、スマホ表示の際は『フッター(モバイル用)』に設置したウィジェットが表示されます。

スマホの場合もたくさんウィジェットを入れ過ぎると、表示が縦に長くなりすぎるので、設置する場合はなるべく厳選することをオススメします。

スポンサーリンク

まとめ

今回は『Cocoonのフッターをカスタマイズする方法』を解説してきました。

  • フッターの背景色:Cocoon設定 ⇒ フッター
  • フッターロゴ&コピーライト:Cocoon設定 ⇒ フッター
  • フッターメニュー:外観 ⇒ メニュー ⇒ 『フッターメニュー』
  • フッターモバイルボタン
    1. 外観 ⇒ メニュー ⇒ 『フッターモバイルボタン』
    2. Cocoon設定 ⇒ モバイル ⇒ 『フッターモバイルボタン』
  • フッターウィジェット:外観 ⇒ ウィジェット ⇒ フッター左・中・右

Cocoonならフッターも細かく設定できますので、ぜひ自分好みのデザインに設定してみてくださいね。

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