Cocoonのフッターナビをカスタマイズする

フッターナビとは画面最後の行に掲載されるメニューのことです。

ワードプレス(以下WP)のテーマで、本サイトで使用しているCocoonの標準設定では、フッターナビに会社ロゴを表示する場合は、メニューは右端に位置付けられていますが、Copyrightの表示の1段うえの位置からスタートになるため、少し重たくなる印象です。

標準設定の利点としては、メニューに充てるスペースが広く取れることになる認識でそれは理にかなっておりますし、ちなみに、会社ロゴを表示させなければ、メニューを左端に、Copyrightは右端に配置することができます。

カスタマイズの意図

それにもかかわらず今回カスタマイズを選択した理由としては、下記になります。

• フッターナビには多くて4つのメニューが表示できれば良い。
• メニューとしては解り易い位置にしたい。
• せっかくなので、会社のロゴはできるだけ残したい。

そうは言ってもどれも、「カスタマイズまでする必要があるものか?」と言われると微妙な感じではありますが….

カスタマイズ内容

.footer-bottom-logo {
  float: left;
  bottom: 0;
  position: relative;　　　　/* ←absoluteから変更 */
}
.footer-bottom-content {
  position: relative;
  left: 20px;
  float: none;
  display: flex;
  justify-content:
  space-between;
  align-items: baseline;
}

後段は、もともとは下記の設定でした。

.footer-bottom-content {
  float: right;
  text-align: right;
}

これを「.footer-bottom.fdt-left-and-right .footer-bottom-content {」の下記内容を参考にして、2行(position: relative;とleft: 20px;)ほど追記しています。

.footer-bottom.fdt-left-and-right .footer-bottom-content {
  float: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

この記述の意味するところは、「ロゴ自体の位置を相対的にしたうえで、メニューの位置も相対化して、お互いに協調させて、かつロゴとメニューの間に20pxほど隙間を設定する」というものになります。

ブラウザの画面横幅を狭めたときに、ロゴ/メニュー/Copyrightのそれぞれのブロックでそれなりに折れ曲がって表示されて、お互いが見えなくなることは無い認識です。

以上、ご報告申し上げる次第です。宜しくお願い致します。