CocoonのフッターナビをカスタマイズするワードプレスのテーマCocoonについてTwitter 2020.07.13 2019.02.09 この記事は約3分で読めます。フッターナビとは画面最後の行に掲載されるメニューのことです。ワードプレス(以下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のそれぞれのブロックでそれなりに折れ曲がって表示されて、お互いが見えなくなることは無い認識です。以上、ご報告申し上げる次第です。宜しくお願い致します。