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

今回は、WordPressテーマ Cocoonでの「フッター[左][中][右]」のカスタマイズについてまとめてみました。
フッター[左][中][右]
これまで「フッター[左][中][右]」は使っていなかったのでカスタマイズは行っていませんでした。
なお、一番下のフッター部分のカスタマイズは過去1回行っています。

「フッター[左][中][右]」を設定すると、次の様なぐちゃぐちゃなスタイルになってしまいます。
そこで「フッター[左][中][右]」を正常に表示させるためのカスタマイズを行いたいと思います。
フッター[左][中][右]のカスタマイズ
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, #C5E2FF)!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; } }
カスタマイズ後のフッター[左][中][右]
今回のカスタマイズによって「フッター[左][中][右]」のスタイルは、次の様になりました。
これまでの一番下のカスタマイズを廃止し、改めて「フッター[左][中][右]」と一番下のカスタマイズを行うことで、正常に表示するようにできました。
最後に
「フッター[左][中][右]」が正常に表示されないのは以前から知っていたのですが、使わなかったので手をつけない状態でした。
今回サイドバーからカテゴリーやアーカイブ、プロフィールなどを「フッター[左][中][右]」に移動する切っ掛けで、カスタマイズに着手しました。
当面はこの状態で「フッター[左][中][右]」を使っていきます。
コメント