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

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

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

プルダウン（select）の見た目を思い通りにするCSS – m31

完成品

このようになります。

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

解説

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

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

こうなります。

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

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

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

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

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

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

CSSのみで三角形を作るには | Naokix.net

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

擬似要素before、afterと併用するcontentプロパティ | Naokix.net

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

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

positionプロパティのabsoluteとrelativeにはどんな違いがあるのか | Naokix.net

冒頭でご紹介したリンク先ではこれを 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 プロパティの初期値をどのように調べたのかはこちらで述べています。

ローカル環境のjQueryでHello World！ | Naokix.net

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

まとめ

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

selectタグのスタイルをcssで整える方法と考察（IE7,IE8,IE9,IE10,～他モダンブラウザ） – ecocats

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

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

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

おまけ

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

selectのデザインを変更する | cly7796.net

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

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

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

さらにおまけ

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

Internet Explorerの時代が本当に終わったのだと知った話 – 遊びかたらう

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

パッと目を引く! タイトルまわりのデザイン表現

posted with カエレバ

リンクアップ グラフィック社 2017-01-10

Amazon

楽天市場