【Simplicity】スライドインメニューをカスタマイズするためのCSSセレクタを紹介

スライドインメニュー

シェアよろしくです

Simplicityのスライドインメニューをちょっとカスタマイズしてみました。

少しでも標準のものと変えたかったんですよね。

そんなわけで、今回は簡単にスライドインメニューの見栄えを変える方法をご紹介。

主にこんな内容となります。

  • スライドインメニュー各ボタンのCSS対称セレクタは?
  • 一部の不要なボタンを削除するには?
  • ボタンの色を変更するには?
  • ボタンのアイコンの種類を変えるには?

ちょっとしたことですが、よければ参考にしてみてください。

スポンサーリンク

Simplicity スライドインメニューとは

Simplicityには、スマホ等でサイトを見た時に表示されるモバイル専用メニューボタンの種類が複数用意されています。こちらの7種類です。

  • アコーディオン(デフォルト)
  • アコーディオンツリー
  • モーダルメニュー
  • スライドインライト(ボタン上)
  • スライドインライト(ボタン下)
  • スライドインダーク(ボタン上)
  • スライドインダーく(ボタン下)

ちなみにこれは、「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」→「モバイルメニュータイプ」より設定できます。

どんな風に表示されるかはそれぞれ実際に見てもらいたいんですが、今回紹介するのは下4つ「スライドインメニュー」についてです。

スライドインメニュー標準ではこんな風に表示されます。

スライドインメニュー

このように、スマホ画面の上部か下部に常に便利なボタンを表示させることが出来るんです。

ここで表示される全てのボタンがこの位置に必要かといわれると正直そうでもないんですが、サイドバーに設定したものをスマホサイトで簡単に呼び出してくれるのは、個人的に面白いと思ってます。

ともあれ簡単に設定できる便利な機能なことは間違いないので、まだの人はぜひ試しに使ってみてはどうでしょうか。

Simplicity スライドインメニューをカスタマイズするCSS

それでは本題のスライドインメニューのカスタマイズ方法を見ていきましょう。

スライドインメニュー それぞれのボタンのCSS対象セレクタ

CSSを使ってのカスタマイズになるので、まずはそれぞれのボタンの対称セレクタを紹介します。

CSSが分かる人はこれさえ分かれば基本何でも出来るでしょう。

  • メニューボタン
a#footer-button-menu
  • 検索ボタン
a#footer-button-search
  • トップへボタン
a#footer-button-go-to-top
  • サイドバーボタン
a#footer-button-sidebar
  • 前へボタン
a#footer-button-prev
  • 次へボタン
a#footer-button-next

不必要なボタンを削除するには

上記で紹介したボタンを一部非表示にしたい場合は、displayプロパティを使用します。

こちらを参考にしてください。

a#footer-button-search{
   display:none;
}

例えばこんな記述をした場合は、検索ボタンが削除(非表示)されることになります。

ボタンの色を変更するには

ボタンの色を変えるのも簡単です。

先ほど紹介したセレクタに対しcolorプロパティを指定するだけです。

a#footer-button-prev,a#footer-button-next,a#footer-button-search,a#footer-button-menu,a#footer-button-go-to-top,a#footer-button-sidebar{
   color:#3a85cc;
}

こんな感じにすれば、すべての色を変えることが出来ます。

ボタンのアイコンを変えるには

アイコンの種類を変えたいときは、まずこちらの記事をご覧ください。

【simplicity】豊富なアイコンが使い放題!アイコンフォント「FontAwesome」
【simplicity】豊富なアイコンが使い放題!アイコンフォント「FontAwesome」
WordPressのテーマ「simplicity」を使っている人は、サイトの所々にアイコンが使われているの見たことありますよね。 しかしそれはほんの一部で、実際はもっといろんな種類のアイコンが存在します。 「他にこんなアイコンが...

Simplicityには簡単にアイコンフォントを使う機能が備わっているので、この中から自由に使うことが出来ます。

例えばこんな感じ。

a#footer-button-go-to-top span::before{
    content: "\f106";
}

これでトップへボタンのアイコンが変更されました。

最後に

スライドインメニュー

これくらいのカスタマイズなら簡単ですね。

cssの基本を詳しく知りたい人はこちらをご覧ください。web初心者はちょっとはカスタマイズの幅が広がるんじゃないかと思いますよ。

css記述の基本「セレクタ」について。web専門学校で学んだcssの基本
css記述の基本「セレクタ」について。web専門学校で学んだcssの基本
「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けにcssについて簡単にまとてみました。 まずはcssの特徴を見てから、記述方法を見ていきたいと思います。 cssとHTMLの関係性 cssはHTMLと組...

そのうちメニューの出方も変えたりしたいと思ってます。

スポンサーリンク



シェアよろしくです

フォローもよければ