アクアリウムのおすすめグッズはこちら!

【SANGO】フッターのプライバシーポリシーを非表示とカスタマイズのCSS

フッターのメニューをカスタマイズ

TAGS:

SANGOではデフォルトの固定ページのプライバシーポリシーを公開すると、フッターにプライバシーポリシーが自動で表示されてしまいます。

フッターではなく別の場所に表示させたい方には嬉しい機能ではありません。

今回は、僕が行ったプライバシーポリシーを非表示にする方法とフッターのメニューをボタンにするカスタマイズを紹介します。

カスタマイズ内容

  • プライバシーポリシーを非表示
  • フッターメニューをボタンに変更

表示の前後

Before

フッター変更前の表示

After

フッター変更後の表示

注意
本記事の内容でデザインが崩れたなどの責任は一切負いませんので、自己責任でカスタマイズしてください。

フッターのカスタマイズ方法

CSSのみでカスタマイズを行う方法を紹介します。

今回紹介する「プライバシーポリシーを非表示」と「フッターメニューをボタンに変更」は別々に追加できますので、片方だけで十分という方はお好きな方のみ追加してください。

プライバシーポリシーを非表示

プライバシーポリシーを非表示にするには、下記のCSSをスタイルシートに貼り付けるだけでOKです。

プライバシーポリシー自体を削除してるのではく、あくまで非表示にしているだけなので、根本から削除したいという方は別の方法を探してください。

プライバシーポリシー
/*************************************************
プライバシーポリシーを非表示
**************************************************/
.privacy-policy-link {
    display:none;
}

フッターメニューををボタンに変更

SANGOになじむように丸いボタンで浮き上がるデザインにしています。

こちらもCSSに追記するだけでカスタマイズが可能です。

背景色と文字色は当サイトの数値となっているので、変更してお使いください。

また、四角のボタンが良い場合などは「border-radius」の数値をお好みで変更してください。

フッター
*************************************************
フッターのメニューをボタンに変更
**************************************************
#footer-menu .footer-links a {
    display: inline-block;
    margin: .5em 0; 
    padding: .4em 1.3em; 
    border-radius: 20px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2); /*影*/
    background-color: #56a764; /* 好きな背景色に変更してください。 */
    color: #fff; /* 好きな文字色に変更してください。 */
}
#footer-menu .footer-links a:hover{ /*マウスホバー時*/
    text-decoration: none!important;
    box-shadow: 0 10px 15px rgba(0,0,0,.15)
}

メニュー前のアイコンについて

メニューの前のアイコンは、「外観」>「メニュー」の「ナビゲーションラベル」でアイコンを追加します。

アイコンはFont Awesomeから好きなアイコンを選んでくださいね。

参考 Font AwesomeへのリンクFont Awesome

フッターのメニューアイコンについて

まとめ

CSSを追記するだけで簡単にフッターメニューのカスタマイズをすることができました。

カスタマイズをしていくと細かい所が気になってくると思いますので、参考にしてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です