【Cocoon】おしゃれなフッターにカスタマイズする方法

前回はアピールエリアのカスタマイズ方法を解説しました。

【Cocoon】おしゃれなトップ画面に！アピールエリアの設定方法

Cocoonのアピールエリアをおしゃれにカスタマイズする方法を、設定からCSSまで詳しく解説していきます！無料テーマでもおしゃれなトップ画面にしたい方におすすめです。

むさ

今回は、ブログ全体の統一感に必要不可欠な、フッターのカスタマイズについて紹介させていただきます。

さび

当ブログ『ムササビやねん』のフッター設定、CSSをもとにカスタマイズ手順を紹介させていただきます！

Cocoonカスタマイズ第3弾として、フッターのカスタマイズについてご紹介させていただきます。

▼この記事はこんな方におすすめ

フッターをカスタマイズして、ブログ全体の統一感を出しましょう！

Contents

1 フッターの完成イメージ
2 フッターの設定方法
3 CSSで装飾をカスタマイズ
4 まとめ

フッターの完成イメージ

むさ

今見ていただいてる、当ブログのフッターが完成イメージです！

▼特徴

フッターの設定方法

▼注意！！！

まずはじめにフッター設定からです。
フッター設定は①サイドバーのCocoon設定→②フッターで設定できます。

フッター色

フッター背景色は、その名の通りフッターの背景色を設定します。

当ブログの設定は『#8cab8b』です。

むさ

サイトのキーカラー（緑色）に設定して統一感を出すようにしました！

色コードの取得は『color picker』で検索！

フッター文字色は、フッターに表示される文字の色を設定します。

当ブログの設定は『#f7f7f5』です。

さび

Cocoon設定 > 全体のサイト背景色と同じ色に設定しています！

フッター表示タイプ

サイトロゴ、フッターメニュー、クレジットの表示位置を設定します。

当ブログの設定は『メニュー＆クレジット（左右）』です。

むさ

色々な設定を試してしっくりきたものに設定してください！

フッターロゴ

フッター表示タイプで『ロゴ＆メニュー＆クレジット』を選択した際に、表示されるロゴを設定します。

当ブログの設定は『なし（デフォルト）』です。

クレジット表記

サイト開設年はクレジットに表示される年を設定します。
ブログサイトを開設した年を設定してください。

著作権者表記は、その名の通り著作権者として表記するテキストを設定します。

当ブログの設定は『なし（デフォルト）で、© 20XX (サイト名).』を選択しています。

フッターメニュー幅

フッターのメニューの幅を設定します。

当ブログの設定は『120（デフォルト）』です。

メニュー幅をテキストに合わせるにチェックを入れると、メニューに表示される文字数に合わせて幅が決まります。

当ブログの設定は『ON（チェック）』です。

さび

Cocoon設定はここまで！

CSSで装飾をカスタマイズ

続いてCSSを編集していきます。
CSSは①サイドバーのテーマファイルエディタ→②スタイルシート(style.css)で編集できます。

▼注意！！！

むさ

当サイトはスキンをなしに設定しています。
スキンを設定していると上手くいかない可能性があります。ご了承ください。

/* ①フッター */
.footer {
	padding-top: 0px;
}

/* ②フッターメニュー */
.navi-footer-in a {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
}

/* ③フッターメニュー(hover) */
@media screen and (min-width: 980px) {
	.navi-footer-in a:hover {
	  background: none!important; 
	}
}

/* ④フッターメニューの下線 */
.navi-footer-in a::after {
  position: absolute;
  bottom: -3px;
  content: '';
  left: 6%;
  width: 88%;
  height: 0.5px;
  background: #f7f7f5;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .5s;
}

/* ⑤フッターメニューの下線(hover) */
@media screen and (min-width: 980px) {
	.navi-footer-in a:hover::after {
	  transform: scale(1, 1);
	}
}

このコードをコピーして、スタイルシート(style.css)に貼り付けてください。
皆様のブログに合わせて微調整する方法を解説します！