【Cocoon】フッター[左][中][右]のカスタマイズ

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

masaa.net

今回は、WordPressテーマ Cocoonでの「フッター[左][中][右]」のカスタマイズについてまとめてみました。

フッター[左][中][右]

これまで「フッター[左][中][右]」は使っていなかったのでカスタマイズは行っていませんでした。

なお、一番下のフッター部分のカスタマイズは過去1回行っています。

【Cocoon】フッターをカスタマイズする

WordPressテーマ Cocoonの「フッター」のカスタマイズについてまとめてみました。カスタマイズの内容は、フッターの上部の空白部分を無くしスッキリとしたフッターにします。※フッターメニュー1個だけの対応となります。

masaa.net

2018.12.30

「フッター[左][中][右]」を設定すると、次の様なぐちゃぐちゃなスタイルになってしまいます。

そこで「フッター[左][中][右]」を正常に表示させるためのカスタマイズを行いたいと思います。

フッター[左][中][右]のカスタマイズ

WordPressテーマ Cocoonでの「フッター[左][中][右]」カスタマイズを行います。

カスタマイズ内容

「フッター[左][中][右]」カスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容をこれまで行ったカスタマイズ（●フッターカスタマイズ、●フッターメニューカスタマイズ、●サイドバータイトル（見出し）／スライドイン時タイトル（見出し）／Googleアドセンス広告タイトル(見出し)　カスタマイズ）に上書きして下さい。

カスタマイズを行っていない場合には、下記のカスタマイズ内容を追記して下さい。

/************************************
** ●フッターカスタマイズ
************************************/
#footer {
/*  background:linear-gradient(100deg, #ffeef7, #1469FF, #1469FF 50%, #1469FF, #ffeef7)!important; /*グラデーション化*/
/*  background: #1469FF!important;*/
/*  margin-top: 0;*/
}

/************************************
** ●フッターメニューカスタマイズ
************************************/
#footer {
  padding-bottom: 0;
  background-color: transparent!important; /*背景*/
}
.footer.footer-container.nwa,
.footer-in.wrap.cf,*/
.footer-bottom.fdt-up-and-down.fnm-text-width.cf {
/*  height: 120px!important; /*メニュー縦幅設定*/
/*  display: flex; /*並列スタイル指定*/
/*  align-items: flex-end; /*縦中央寄せ*/
/*  justify-content: center; /*横中央寄せ*/
}
.footer-bottom {
  background-color: #0052fe!important;
  margin-top: 0;
  margin-bottom: 0;
/*  margin-left: -8px;*/
/*  margin-right: 8px;*/
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}
.footer-in {
  background-color: #F7FBFF;
  margin-left: -8px;
  margin-right: 8px;
  padding-top: 0;
  word-break: break-all; /*表示範囲に合わせて改行*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .footer-in {
    background-color: #F7FBFF;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
  }
  .footer-title {
    margin-right:40px;
    margin-left:-50px;
  }
}
.footer-left .author-description,
.footer-right .textwidget,
.footer-center .textwidget,
.footer-left .textwidget {
  margin-left: 0;
  margin-right:0;
}

#footer a { /*フッター*/
  color: #fff; /*フォントカラー*/
}
.footer-mobile a,
#footer .footer-left a,
#footer .footer-center a,
#footer .footer-right a { /*フッター*/
  color:#191919!important; /*フォントカラー*/
}
.footer-mobile .textwidget a,
#footer .footer-left .textwidget a,
#footer .footer-right .textwidget a,
#footer .footer-center .textwidget a { /*フッター リンク文字*/
	color: #0052FE!important; /*フォントカラー*/
}
.footer-mobile a:hover,
#footer .footer-left .textwidget a:hover,
#footer .footer-right .textwidget a:hover,
#footer .footer-center .textwidget a:hover { /*フッター リンク文字 ホバー時*/
	color: #0000EA!important; /*フォントカラー*/
}
#footer .author-box {
  border-color: #F7FBFF; /*.footer-inのバックカラーと一緒のカラーコードで枠消す*/
}

/************************************
** ●サイドバータイトル（見出し）／スライドイン時タイトル（見出し）／Googleアドセンス広告タイトル(見出し)　カスタマイズ
************************************/
.footer-title,
.sidebar .ad-label,
#sidebar-menu-content h3,
#sidebar h3{
  position: relative;
/*  color: #333; /*フォントカラー*/
  color: #fff; /*フォントカラー*/
  background:linear-gradient(to top, #0052FE, #BAD7F0)!important;
  font-size: 16px; /*フォントサイズ*/
  font-weight: 900; /*文字強調*/
  letter-spacing: 3px; /*文字間隔*/
  text-align: center; /*文字位置中央 center*/
  margin: 10px 0px 20px 0px;
  padding: 12px 3px 6px 3px;
  border-radius: 2px 60px/5px 16px 16px; /*角丸コーナー*/
  line-height: 82%;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー*/
}
.footer-title::after,
.sidebar .ad-label::after,
#sidebar-menu-content h3::after,
#sidebar h3::after {
  position: absolute;
  bottom: 0;
  left: 3.0em;
  content: '';
  height: 4px;
  width: -webkit-calc(100% - 6.0em);
  width: calc(100% - 6.0em);
  background-color: #fff;
  border-radius: 4px;
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .footer-title,
  .sidebar .ad-label::after,
  #sidebar-menu-content h3::after,
  #sidebar h3::after {
    left: 2.64em;
  }
}

カスタマイズ後のフッター[左][中][右]

今回のカスタマイズによって「フッター[左][中][右]」のスタイルは、次の様になりました。

これまでの一番下のカスタマイズを廃止し、改めて「フッター[左][中][右]」と一番下のカスタマイズを行うことで、正常に表示するようにできました。

最後に

「フッター[左][中][右]」が正常に表示されないのは以前から知っていたのですが、使わなかったので手をつけない状態でした。

今回サイドバーからカテゴリーやアーカイブ、プロフィールなどを「フッター[左][中][右]」に移動する切っ掛けで、カスタマイズに着手しました。

当面はこの状態で「フッター[左][中][右]」を使っていきます。