前回はフッターの下にメニューを追加するところまで出終わってしまいましたが、思い通りの体裁で表示されるための作業を記事にします。いじるファイルはstyle.cssだけで結果的にはたいした作業ではないのですが、style.cssの仕組みに疎い私にとっては結構面倒な作業となりました。
追加したメニューを思い通りに表示させる
今回の作業の基本的な流れ
私が今回のカスタマイズでやろうとしているのは、Somplicityのフッターの下に新しいメニューを設置し、それを画面がスクロールされても最下部に固定表示される・・・というものです。今回行ったのはの、後半の固定表示の部分の作業です。具体的には、以下のように2段階の作業となります。
- フッターの最下部に追加したメニューを表示
- 追加したメニューを固定表示させる
1.フッターの最下部に追加したメニューを表示
①Simplicity2と同様の表示にする
私のサイトのフッター部をSimplicity2で表示したのが下の画像ですが、私が表示したいと思っているのはメニューをCopylightの下にするというものです。
ですので、まずSimplicity1のStyleシートにSimplicity2のフッターナビの部分をそのまま書き加えてみました。
/************************************ ** フッターナビメニュー ************************************/ #footer-navi ul{ text-align: center; } #footer-navi ul li { display: inline; list-style: outside none none; } #footer-navi ul li::before { content: "|"; padding: 0 0.6em; } #footer-navi ul li:first-child::before{ content: ""; padding: 0; } #footer-navi ul .sub-menu{ display: none; } /************************************ ** サーチフォーム(Search Form) ************************************/ #searchform{ position: relative; margin-top: 25px; }
Simplicity2のフッターナビに関する記述は、Styleシートのグローバルメニューとサーチフォームの間にありました。これ(具体的には05行~26行目まで)をそのままsimplicity1のstyle.cssに書き加えます。タイトルは『固定フッターメニュー』にしました。
/************************************ ** 固定フッターメニュー ************************************/ #footer-navi ul{ text-align: center; } #footer-navi ul li { display: inline; list-style: outside none none; } #footer-navi ul li::before { content: "|"; padding: 0 0.6em; } #footer-navi ul li:first-child::before{ content: ""; padding: 0; } #footer-navi ul .sub-menu{ display: none; } /************************************ ** サーチフォーム(Search Form) ************************************/ #searchform{ position: relative; margin-top: 25px; }
この時点で表示してみると、以下のように本来のフッターの下に追加したメニューが表示されました。しかし、バックグランドが白く、高さも少し高すぎるようです。更に、このメニュー部分を固定させなければなりません。
②フッターメニューを固定させる
Simplicity2のフッターナビは、フッター部の中に設置しています。従って、バックグランドや文字サイズ、文字の色はフッター部の指定が適用されています。今回のカスタマイズでは、フッター部の下に新たにフッターメニュー部を設置しました。この部分を固定化することや、色や文字サイズは別途指定する必要があります。
上記のやり方をいろいろ検索してみたのですが、なかなか参考にできるものが見つかりませんでした。参考にしてStyleシートに書き加えてみても、期待したような動作が実現しないのです。その中でほぼ期待通りに動いたのは、下記のサイトを参考にしたものでした。
上記のサイトを参考にし、下の記述を『固定フッターメニュー』最初の部分に書き加えてみました。
#footer-navi { position: fixed !important; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #555; color: #fff; font-size: 12px; padding-bottom: 10px; }
その結果が下の画像です。ほぼ期待通りの体裁になりました。画面はページの中央あたりですので、固定されたメニューが表示されたままになっています。しかし・・・・少し見にくいのですが右の下部の赤い矢印のところに少しグレーになった部分が見えています。Simplicityには『TOPへ戻るボタン』が用意されているのですが、それがメニューとダブってしまいました。
Styleシートを見ると、『TOPへ戻るボタン』は最下部から10px離れたところに表示されるようになっています。Styleシートの『TOPへ戻るボタン』のところに『bottom: 10px;』と指定したところがありますので、そこを『bottom: 35px;』としてみました。その結果、『TOPへ戻るボタン』が無事表示されるようになりました。
/************************************ ** TOPへ戻るボタン(Go to top) ************************************/ #page-top{ position:fixed; display:none; right: 10px; bottom: 35px; }
メニューのフォントカラーを白にしたのですが、今回はそれがうまく反映されていません。しかし、常時表示されるメニューですので、あまり目立つのもよくないと思い、今回はこのままにしておきます。