WordPressのプルダウンをCSSだけでシャレオツにカスタマイズしてみる

 このブログもサボリ気味ながら更新を続けてきたことで、サイドバーのアーカイブやカテゴリーが充実して縦長になってきました。ネットを巡回しているとやたらとサイドバーが縦長のブログにめぐり合うことがありますが、私はこれが気になったので表示をドロップダウンに切り替えようと思ったところ、デフォルトのものはどうにも味気ない。

20161009_1

 select タグのカスタマイズについて検索すると画像を使ったものが多いですが、今回は CSS だけで実現できるちょっとおしゃれなドロップダウン表示のカスタマイズ方法を紹介します。このブログが WordPress で運営されているので WordPress にて動作確認を行っていますが、原理を理解すれば他のブログサービスでも同様のカスタマイズを行うことができます。

20161009_2

 こちらを参考にさせていただきました。

完成品

このようになります。

20161009_3

ソースコードはこちら。リンク先のものを当ブログ用に少しアレンジしてお借りしています。今回はアーカイブを例にしていますが、セレクタを変更すればカテゴリーにも適用することができます。

解説

順を追って説明していきます。完成ソースコードと見比べながら参考にしていただければと思います。

WordPress のサイドバーにあるアーカイブやカテゴリーをドロップダウン表示にするには、管理画面でチェックを入れるだけです。

20161009_4

こうなります。

20161009_5

なんだか訳のわからない label タグが出力されています。最近の WordPress のバージョンアップで対応された変な仕様ですが、使い道あるんですかね。これは display:none; を指定して非表示にします。私は一緒に h2 タグも非表示にしました。

こうなります。背景色を .widget セレクタで一括指定している場合には適宜調整してください。

20161009_6

次に select タグのデフォルトのスタイルを無効にします。ベンダープレフィックスの他に select::-ms-expand でも display:none; を指定していますが、これは本来なら古い IE に対応するためのもののようです。ただ、Internet Explorer 11 において appearance:none; だけで無効になったりならなかったりする場合があったので追記しました。原因はよくわからない。

こうなります。矢印はないものの、クリックすると普通の select タグと同じように動作します。

20161009_7

デフォルトの矢印を無効にしてしまったので、これを三角形にて作成し直してあげます。擬似要素である before を使って三角形を作成しています。

CSS だけで実現する三角形については以前に記事にしましたのであわせてどうぞ。

ついでに content プロパティの使い方も記事にしたのでこちらもどうぞ。

三角形の位置を決めているのは次の部分です。

ポイントは select の親要素に position:relative; を指定しているところです。position プロパティで absolute を使うにはこれが必要になります。margin は微調整です。position プロパティについてくわしくはこちら。

冒頭でご紹介したリンク先ではこれを form タグや label タグで実現していましたが、WordPress のサイドバーに出力される HTML にはそのようなものはないので、select タグの親要素である div タグで代用したわけですね。

要は select タグの親要素の before で三角形を作成し、position プロパティで位置を決めてあげれば、WordPress 以外のブログサービスのプルダウンでも実現が可能だということです。お試しあれ。

背景色と枠線を指定します。

なんとなく重複しているような感じがしますが、それぞれに意味があります。select の background に transparent を指定することで select タグの背景を透明にしています。こうしないと三角形が select タグに隠れて表示されません。select タグの背景を透明にしてしまったので、背景に色をつけたい場合には .widget_archive の方で指定してあげます。

さらっと select の幅を指定していますが、本来 select タグはインライン要素に分類されているものであり、幅の指定ができないはずです(正確にはブロック・インラインの分類は HTML5 で廃止されましたが)。リンク先でも select に display:block; が指定されており、こちらが正しいのかもしれません。

実は、select の display プロパティの初期値は inline-block になっているため、このようなことができてしまいます。気になったら block 指定してあげてください。display プロパティの初期値をどのように調べたのかはこちらで述べています。

最後にカーソルや padding、color で文字の色を調整すれば完成です。

まとめ

 今回デザインをカスタマイズするためにいろいろ調べていて思ったのですが、select タグのカスタマイズって情報が思った以上に少ないです。それもデザイン的にかっこいいものを探そうとすると結構苦労します。こちらのリンク先でも触れられていますが、

情報が少ない原因を考えてみると、

  • わざわざカスタマイズするのが面倒(いじらなくてもブログの運営はできるから)
  • みんなサイドバーが縦に長くなってもそんなに気にしていない
  • サイドバーが縦に長くなる前にブログの更新をやめてしまう(飽きた・お客さんが来ないなど)

といったことが理由なのかなと考えました。ブログはまず記事の内容が重要でありデザインは二の次であるとはいうものの、おしゃれにカスタマイズできれば訪問してくれる人も更新する自分も楽しいものです。これを機に select タグのカスタマイズにも挑戦してみてください。

おまけ

 select の標準矢印を消すために Internet Explorer における appearance について少し述べましたが、記事を執筆後ちょっと調べてみると、IEは11でも appearance に対応していないようです。

 私は疑似要素である -ms-expand を指定することで解決しましたが、次のようにしても解決することができます。

このような HTML に対して CSS は次のように指定します。

 ポイントは select の幅を親要素より大きめに設定し、はみ出た部分を overflow に hidden を指定して非表示にすることです。この状態で select に枠線などを指定するとおかしくなってしまうので、それらは select の背景を transparent によって透明にし、親要素に設定するようにします。今回やったことに少し似ています。

さらにおまけ

 先日から Google Adsense の管理画面を Internet Explorer でうまく表示できなくなってしまい、不便だなぁと思っていたのですがこういうことだそうです。IE がとうとうアドセンスの公式対応ブラウザから外されてしまったようで。

 ネットで CSS カスタマイズの情報をちょっと調べてみると、IE6~11 までの交換性のなさや独自仕様に苦しめられた人々の怨嗟の声をよく目にすることになりますが、これからはそういうこともなくなっていくのかもしれません。大丈夫だよね、マイクロソフトさん?

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP