本当に誰でも一瞬でできるワザだ！
こんにちは、カラオケのレパートリーが皆無なので、無理やりカラオケに誘われた時は「蛍の光」を熱唱したいと思っているdaiだよ。
今日はwordpressなんかで「にゅっ」と出すスライドコンテンツを紹介したいんだけど、
やっぱりめんどくさい・難しい・わかりづらいものって手が出ないよね。
そこで今日は、本当に誰でも10秒でできる、
コピペで完了するスライドコンテンツを教えるよ！
ぜひ使ってみてね！(・ω<)
完成品はこちら
こんな風に、クリックすると「にゅっ」と出てくるコンテンツ、
使ってみたくない？使ってみたいよね？使ってみたいと言え。
作り方（マジで簡単すぎてため息が出るわ～）
手順①
次のコードを、投稿画面の中に貼り付けます。
「ビジュアル」じゃなくて「テキスト」の方に。
ただし、これを貼り付けた後に「ビジュアル」の方に戻るとコードがおかしくなる可能性があるので、
記事を最後まで書いて、一番最後の仕上げとして「テキスト」に貼り付けてから「公開」をしたほうがいいでしょう。じゃないと後で「後悔」することになります。
<script type="text/javascript">
$(function(){
$('.slide2').hide();
$('.slide1').click(function(){
$('.slide2').slideUp();
if($('.slide2').css('display') == 'none'){
$('.slide2').slideDown();
}
});
});
</script>
手順②
cssの編集画面を開いて、これを貼り付けます。
PCとスマホでcssファイルが分かれている人はどっちにも貼るんだぞ！気をつけなはれや！
.slide2{display:none;}
手順③
後は実際に使いたいところに以下のコードを貼り付け、中身を書き換えます。
これにて終了です。
<div class="slide1">クリックする部分</div> <div class="slide2">クリックすると表示される部分</div>
スライドの中身はどんなものでもいいと思います。
表(テーブル)でも、長～～い補足文のようなものでも、画像でも、<li>でリスト化した内容をずらっと出すでも、自由にできます。
手順④
無事に完了したことに喜びを感じ、全裸で小躍りする。
注意点
ってなわけで、誰でもコピペでできてしまうスライドコンテンツだけども、１つだけ注意点があるんだ。
それは、１つのページにこれを複数置くと動作がおかしくなる
ということ。
そりゃそうだ。
クリックする文字は「slide1」で、クリックすると出てくる文字は「slide2」になってて、
javascriptには「slide1をクリックしたらslide2を出したりひっこめたりする」って書いてある。
だから同じものがたくさんあったら、slide1を1つクリックするだけで、他のやつまで全部一緒に「にゅっ」と出てきてしまうのだ。
だから複数置きたい場合は、「slide1」「slide2」の名前を3とか4とかに変えていき、
手順①のコードもコピペして複数作る必要があるね。
なんか一気に難しい説明になってごめんなさい！
わからなかったらお気軽に聞いてくださいね！！
最後に、私の今の心からの思いを乗せました。
恥ずかしいので、私の画像をクリックしてください。
【おしまい】
