どうもナサです！
そこのアナタ。
スライドパネルって知ってます？
この、いかにも怪しいボタンをクリックすると隠されていたテキストが表示されます。
私はこれをスライドパネルと呼ぶことにしました。
少し前まではJqueryでやっていたのですが、それだとページの読み込みが遅くなるのでCSSでやってみることにしました。
ブロガーのハチさんという方に教えてもらったサイトを活用して無事CSSでもスライドパネルを実装できました。
実装方法
CSSは先程のサイトを丸パクリすることでできます。
CSS
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #0bd;
color: #FFF;
-webkit-transition: 0.1s;
transition: 0.1s;
}
label:hover {
background: #0090aa;
}
.panel {
-webkit-transition: .3s ease;
transition: .3s ease;
height: 0;
overflow: hidden;
background: #F5F0CF;
margin-top: 10px;
padding: 0;
border-radius: 5px;
}
input:checked + .panel {
height: auto;
padding: 15px;
}
このコードをブログデザインのデザインCSSのところにコピーしてください。
デフォルトのままではクリックして出てくる文字の背景に色がついてしまいます。
嫌な人は下から９行目くらいの「background: #F5F0CF」を消してください。
色だけ変えたい人は#F5F0CFの部分を変えたい色のカラーコードにしてください。
また、クリックするためのボタンの色を変えたい場合は上から９行目の「background: #0bd;」の部分を変えてください。
隅々説明するのは面倒なんで質問があったらコメントください。
ツイッターでもいいです。
HTML
HTMLは参考にしたサイトのままではダメでした。
<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="panel">
<p>I am some hidden text. ここにテキストが入ります。</p>
</div>
「このコードをコピペすればいいんじゃね？」って思っていましたがはてなブログのクソ仕様のせいでダメでした。
はてなブログのHTML編集は補完が強すぎます。
ミスを修正してくれるのは大歓迎ですが、正しいはずのコードが勝手に違うものに書き換えられるのはイライラします！
普通にコピペするとかってに保管されこのようなコードになってしまいます。
<p><label for="check">Click me</label>
<input id="check" type="checkbox" /></p><div class="panel">
<p>I am some hidden text. ここにテキストが入ります。</p>
</div>
こうなってしまうと隠しテキストが隠れたままになってしまいます。
「ちくしょ〜！！！ふざけるな！」と思いながら試行錯誤した結果
<div>
<label for="check">クリック</label>
<input id="check" type="checkbox" />
<div class="panel">ここに隠しテキスト
</div>
</div>
このようにすることで出来るようになりました。
最後に
私はここで紹介したコードでバッチリ動いています。
でも、全員がうまく動くかは分かりません。
うまく動かない人はコメント下さい！
最後まで読んでくれてありがとう。
それではバイバイっ！