ナサのブログ

好きなことを書いていく

はてなブログのスライドパネルやりかた

どうもナサです!

そこのアナタ。
スライドパネルって知ってます?

 

隠しテキストが表示されます

この、いかにも怪しいボタンをクリックすると隠されていたテキストが表示されます。

私はこれをスライドパネルと呼ぶことにしました。

少し前まではJqueryでやっていたのですが、それだとページの読み込みが遅くなるのでCSSでやってみることにしました。

 

ブロガーのハチさんという方に教えてもらったサイトを活用して無事CSSでもスライドパネルを実装できました。

www.webcreatorbox.com

実装方法

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のところにコピーしてください。

デフォルトのままではクリックして出てくる文字の背景に色がついてしまいます。
嫌な人は下から9行目くらいの「background: #F5F0CF」を消してください。

色だけ変えたい人は#F5F0CFの部分を変えたい色のカラーコードにしてください。

www.netyasun.com

また、クリックするためのボタンの色を変えたい場合は上から9行目の「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>

 このようにすることで出来るようになりました。

注意 *追記

すみません大事なことを書き忘れました!

このままでは1ページごとに1回しか使うことができません! 

理由は「input id="check"」です。

idというのは1ページで一度しか使えないものです。

なのでこのままのコードで2度3度つかうとidが被ってしまいます。

私は二度目以降はうまく動きませんでした。

なのでidのところは2度めからは変えなければいけません!

そして「for="check"」のところも同じものにしてください!

私は二度目からはこのようにしています

<div>
 <label for="check2">クリック</label>
 <input id="check2" type="checkbox" />
 <div class="panel">

  ここに隠しテキスト
 </div>
</div>

私と同じじゃなくても大丈夫です
お好みで変えてください。

半角英数ですよ! 

 

「div class="panel"」の方はclassになっているので何度でてきても問題ありません。

大事なことを書き忘れてすみません!

最後に

私はここで紹介したコードでバッチリ動いています。

でも、全員がうまく動くかは分かりません。

うまく動かない人はコメント下さい!

最後まで読んでくれてありがとう。
それではバイバイっ!

↓↓↓↓↓↓↓↓↓↓

↑↑↑↑↑↑↑↑↑↑

広告を非表示にする