コピペ一発10秒でできる!「ニュッ」と表示させるスライドコンテンツ

1234

本当に誰でも一瞬でできるワザだ!

こんにちは、カラオケのレパートリーが皆無なので、無理やりカラオケに誘われた時は「蛍の光」を熱唱したいと思っているdaiだよ。

 

今日はwordpressなんかで「にゅっ」と出すスライドコンテンツを紹介したいんだけど、
やっぱりめんどくさい・難しい・わかりづらいものって手が出ないよね。

そこで今日は、本当に誰でも10秒でできる、
コピペで完了するスライドコンテンツを教えるよ!

ぜひ使ってみてね!(・ω<)

 

完成品はこちら

【問題】パンはパンでも食べられないパンは? (正解はここをクリック)

【答え】賞味期限の切れたパン

 

こんな風に、クリックすると「にゅっ」と出てくるコンテンツ、
使ってみたくない?使ってみたいよね?使ってみたいと言え。

 

作り方(マジで簡単すぎてため息が出るわ~)

手順①

次のコードを、投稿画面の中に貼り付けます。
「ビジュアル」じゃなくて「テキスト」の方に。

ただし、これを貼り付けた後に「ビジュアル」の方に戻るとコードがおかしくなる可能性があるので、
記事を最後まで書いて、一番最後の仕上げとして「テキスト」に貼り付けてから「公開」をしたほうがいいでしょう。じゃないと後で「後悔」することになります。

 

手順②

cssの編集画面を開いて、これを貼り付けます。
PCとスマホでcssファイルが分かれている人はどっちにも貼るんだぞ!気をつけなはれや!

 

手順③

後は実際に使いたいところに以下のコードを貼り付け、中身を書き換えます。
これにて終了です。

スライドの中身はどんなものでもいいと思います。

表(テーブル)でも、長~~い補足文のようなものでも、画像でも、<li>でリスト化した内容をずらっと出すでも、自由にできます。

 

手順④

無事に完了したことに喜びを感じ、全裸で小躍りする。

 

注意点

ってなわけで、誰でもコピペでできてしまうスライドコンテンツだけども、1つだけ注意点があるんだ。

それは、1つのページにこれを複数置くと動作がおかしくなる

ということ。

 

そりゃそうだ。

クリックする文字は「slide1」で、クリックすると出てくる文字は「slide2」になってて、
javascriptには「slide1をクリックしたらslide2を出したりひっこめたりする」って書いてある。

だから同じものがたくさんあったら、slide1を1つクリックするだけで、他のやつまで全部一緒に「にゅっ」と出てきてしまうのだ。

だから複数置きたい場合は、「slide1」「slide2」の名前を3とか4とかに変えていき、
手順①のコードもコピペして複数作る必要があるね。

なんか一気に難しい説明になってごめんなさい!
わからなかったらお気軽に聞いてくださいね!!

 

 

最後に、私の今の心からの思いを乗せました。

恥ずかしいので、私の画像をクリックしてください。

 

op

【おしまい】

ABOUTこの記事をかいた人

から揚げと音ゲーとFカップが好きな関西人。普段は塾の先生として楽しくお仕事しています。このブログではいろんなことをおもしろおかしく書くことを目標としています。 さらに詳しいプロフィールはこちら