Simplicityのフッター下に固定のメニューを追加する～その2

前回はフッターの下にメニューを追加するところまで出終わってしまいましたが、思い通りの体裁で表示されるための作業を記事にします。いじるファイルはstyle.cssだけで結果的にはたいした作業ではないのですが、style.cssの仕組みに疎い私にとっては結構面倒な作業となりました。

追加したメニューを思い通りに表示させる

WordPress

今回の作業の基本的な流れ

私が今回のカスタマイズでやろうとしているのは、Somplicityのフッターの下に新しいメニューを設置し、それを画面がスクロールされても最下部に固定表示される・・・というものです。今回行ったのはの、後半の固定表示の部分の作業です。具体的には、以下のように2段階の作業となります。

フッターの最下部に追加したメニューを表示
追加したメニューを固定表示させる

1.フッターの最下部に追加したメニューを表示

①Simplicity2と同様の表示にする

私のサイトのフッター部をSimplicity2で表示したのが下の画像ですが、私が表示したいと思っているのはメニューをCopylightの下にするというものです。

Simplicity2のフッター部

ですので、まず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へ戻るボタン』が用意されているのですが、それがメニューとダブってしまいました。

Footer Menu

Styleシートを見ると、『TOPへ戻るボタン』は最下部から10px離れたところに表示されるようになっています。Styleシートの『TOPへ戻るボタン』のところに『bottom: 10px;』と指定したところがありますので、そこを『bottom: 35px;』としてみました。その結果、『TOPへ戻るボタン』が無事表示されるようになりました。

/************************************
** TOPへ戻るボタン（Go to top）
************************************/
#page-top{
  position:fixed;
  display:none;
  right: 10px;
  bottom: 35px;
}