カテゴリやアーカイブの一覧をクリックで開閉するように変更してみた。

このサイトをスマホで見たときに少し縦長になっている気がする。
ということで、一番下にカテゴリとかアーカイブの一覧をウィジットで表示していたが、ウィジットを使わずにコンパクトに表示するようにしてみました。

なお、javascriptなどは用いずに、CSSとHTMLの組み合わせだけで作成。

結果の確認方法

スマホの場合

そのままサイト下部を見ていただければ、「カテゴリー」と「月別アーカイブ」の部分がクリックで開閉するようにしてあります。

PCの場合

ブラウザがChromeなら「F12」などでデベロッパーツールを開き、デバイスでスマホを選択後、一度更新してからサイト下部を見れば確認できます。

本当は記事に直接貼りたかったのですが、記事上だと開閉機能がうまくいかなかった。
代わりにスクリーンショットをとってみました。
ウィジットでの表示(以前の形)との比較画像。

今回は今までで一番長い記事です。まあ大半がコードだけど。

クリックでON/OFFを制御するためにcheckboxを利用する

必要な時以外は非表示にしたいという要望はあるようで、アコーディオンメニューの実装方法などはすぐに出てきた。ただし、ホバーがされているか否かで表示の切り替えを行うというものだった。

個人的にはクリックで開閉を行いたいのでこのままでは使えない。そこで、ホバー状態で切り替えるのではなく、checkboxを利用することにした。checkboxのchecked属性を利用することでクリック毎にON/OFFの制御ができる。

なお、開閉時のアニメーションをつけてみたかったが、あらかじめ開いた後の高さが分からない状態だと、指定が難しい。
手動でCSSに高さを設定することも出来るが、その場合、カテゴリー数が増えた時などにいちいち更新する必要があるので、やっぱりそれも面倒臭いのでパス。

ということでアニメーションは諦め、とりあえず開閉が出来ればOKということにした。

とりあえず最終的なコードはこんな感じ

例としてカテゴリーを表示するHTML

CSS(コメント長め)

ソースコードばかりだと目が疲れるので、サッカーボールでも見て癒されてください

隣接セレクタ(+)の説明

隣接セレクタを用いることで、ある要素の「直後」の要素を指定することが出来る。(+でつなげれば直後の直後・・・と出来る)

例)checkbox要素の直後にul要素がある場合

cssでは、input[type=”checkbox”] + ul という形で
「チェックボックス直後のul要素」
を指定できる。
さらに、input[type=”checkbox”]:checked + ul という形で「チェックが付いた状態のチェックボックスの直後のul要素」という指定ができる。

基本の枠組みを構築する

現在の状態になるまでの思考過程的なもの。

途中、クラス指定は省いているので適宜、指定してください。

隣接セレクタ(+)と:checkedを利用しdisplayの指定を変更。表示と非表示を切り替える。(表示切替をするだけならこれでOK)

html
チェックボックスの状態を反映させる為にcheckboxをul要素の上に置く。

CSS
隣接セレクタとcheckedで指定

□の代わりに文字をクリックしてチェックを切り替えるようにする

label要素を用いる。idとforの指定に注意。

□を非表示にするため、チェックボックスにdisplay:noneを指定する。また、チェックボックスとul要素の間にラベルが入ったので、ul要素の指定が少し変わる。
なおラベル要素はチェックボックスの前に置いても利用できるが、後で加える設定のためにチェックボックスの後に配置した。

クリックする文字の右端に▼を表示する(必要なら)

labelの疑似要素:afterに絶対位置を指定することで右端に▼を表示する。

なお、position:absoluteを指定した際、親のボックス要素にposition:static以外が指定されていないと、表示の基準がブラウザの画面サイズになるために、外枠を用意しposition:relativeを設定した。

label要素にdisplay:blockを指定しないと、文字列と▼の間にクリックできない空白地帯が出来てしまう。

ラベル要素をチェックボックスの下に置いた理由は、リストを表示しているときは三角形の向きを反対にしたかったため。

なお、labelの疑似要素を利用した理由は、checkboxにdisplay:noneを指定した為に、checkboxの疑似要素が指定出来なかったから。
また、checkboxの後にlabelを置いた理由は、隣接セレクタは直後の要素に設定は出来るが、直前の要素には設定が出来ないため。

必要に応じて、labelにボーダーや背景色を設定する。

表示するリストを取得し、枠組みに入れる

カテゴリー一覧を取得

<?php wp_list_categories(‘title_li=&show_count=true’); ?>
を使うと、
<li><a href=”カテゴリのURL”>カテゴリ名</a></li>
のような<li>タグで囲まれた形で渡されるのでそのまま使う。
よって、最終的に次の形になる。

月別アーカイブ一覧を取得

<?php wp_get_archives(‘show_post_count=true’); ?>

これを利用する。

注)同時に表示する際、ラベルやチェックボックスに設定するforやidは同一のものを指定しないこと。
多分、思っているのとは異なる動作になる。下に配置したものをクリックすると上が開いたりなど。

あえてそういう動作にするなら別にいいけど…

ラベルだったりlabelだったり表記がぶれていますが、見にくいかなぁ。
なんとなくカタカナの方が読みやすい気がして、所々カタカナ表記になってます。
やっぱり、統一した方がいいのかな～？

おかしいところ、言いたいことがあった場合、コメントなどで伝えていただけると助かります。

話題はそれますが、記事の作成中に気づいたことがあったので

この記事を製作中、320pxのadsenseバナーがiPhone5などではみ出していたことに気づいた。(デベロッパーツール上)
その結果、横スクロールが発生していた!!
せっかくレスポンシブデザインにしてあるのに、これだと嫌な感じ。

そこで、こちらの記事
スマホで320pxのAdsenseとlinkwithinがはみ出る問題の対処決定版(2014/8版)
をもとに設定を変更しました。一応、バナーのはみ出しを回避することが出来たと思う。