SWELL|パソコン表示でスマホ固定フッターを設置する方法（CSSコピペのみ）

当ページリンクには一部広告が含まれてます

ワードプレステーマ『SWELL』は、パソコン表示では固定フッターはありません。
スマホ表示のように、グローバルメニューをシンプルに抑え、フッター部に導線を置きたいときなどに、フッターに、たどり着かないと、メニューが表示されないですよね！そんな時に、スマホで表示されるスマホ固定フッターを、パソコンでも表示させる方法をレビューします！

固定フッターメニューの設定

外観＞メニュー＞メニュー設定で、固定フッター（SP）にチェック。
※編集するメニューを選択:が、固定フッター（SP）にチェックした際のメニュー名になっているか確認してください。

詳細は、下記のSWELL公式にてわかりやすく説明されてます。公式の設定方法をご参照ください。

＞＞固定フッター（SP）の設定方法

追加CSSにコードをコピペする

外観＞カスタマイズ＞追加CSSに移り、下記コードを追加CSSにコピペしてください。これで、パソコンでも固定フッターを表示することができます。

/* PCでSP固定フッター表示 */
@media (min-width: 960px) {
  #fix_bottom_menu {
    display: block;
    width: 480px; /* 固定フッターメニューの幅（PC） */
    margin-bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    bottom: -70px;
}

#fix_bottom_menu{
  border-radius: 50px;
}
#fix_bottom_menu::before{
  border-radius: 50px;
}
.p-spMenu {
    display: block;
    z-index: 102;
}
.p-spMenu__inner{
  max-width: 600px;
}
.l-footer__foot{
  padding-bottom: 6%;
}
.l-footer {
    padding-bottom: 65px !important;
  }
}

5行目の数字の部分を編集して、好みのサイズ（幅）に合わせてください。デフォルトでは480pxで指定しています。