Wordpress

別々のウィンドウを交互に開閉させる方法【WordPress】【CSS】【JavaScript】

  1. HOME >
  2. Wordpress >

別々のウィンドウを交互に開閉させる方法【WordPress】【CSS】【JavaScript】

シェア・フォロー用のウィンドウの開閉を交互に行う方法

2つ以上のボタンを連動させる

  • シェアボタンとフォローボタンを連動させて、片方が開いているときは片方が閉じる。閉じるボタンを押せば両方とも閉じる。そのような連動した2つ以上のボタンを作りたい。

ココがポイント

結論:
input要素の「ラジオボタン」を使用することで、2つ以上のボタンを連動し、クリックすると格納してあるウィンドウが開いたり閉じたりするアクションを、CSSのみで設定ができる。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、ボタンをクリックして格納してあるウィンドウを表示させる動きのあるページを作りたいと思ったことはございませんか?

このようにウィンドウを格納してあるボタンを複数作り、それぞれ片方が開くと片方が閉じるといった連動したものにしておきたくなることが、ページのレイアウト上必要になってくることがあると思います。

今回は、input要素の「ラジオボタン」を使用することで、HTMLとCSSだけで、連動した複数のボタンの作り方をご紹介していきます。

また、JavaScriptを使用して、フッターメニューのボタンからでも、開閉をコントロールする方法にも触れようと思います。

 

1.「ラジオボタン」とは

「ラジオボタン」とは、複数の選択肢から単一の選択をするときに使う、input要素の属性です。name属性値を同じにすることで複数の選択肢をひとくくりに判別することができるようになります。

See the Pen
radio_button
by 三好雄介 (@yusuke5028198)
on CodePen.

 

2.HTMLとCSSだけで複数のボタンを連動させる

「ラジオボタン」の「複数の選択肢から単一の選択をする」という特徴を活かすことで、それぞれの「閉じる」「シェア」「フォロー」のチェックが入ったときに起こすアクションを、CSSで決めることで目的の動きを実現できるようになります。

See the Pen
radio_button_HTML+CSS
by 三好雄介 (@yusuke5028198)
on CodePen.

 

3.JavaScriptを使いフッターメニューから開閉を操作する

JavaScriptを使用することで、フッターメニューのボタンからでも開閉を操作できるようになります。

See the Pen
footer_radio_button
by 三好雄介 (@yusuke5028198)
on CodePen.

 

3.1_「AFFINGER5」のスマホ用フッターメニューからでも操作ができる

ユニークな値

WordPressのテーマ「AFFINGER5」にあるスマホ用フッターメニューの設定で、URLにユニークな値を入れておくと、JavaScriptのセレクタから個別のボタンを指定することができるようになります。この方法を使用して、「AFFINGER5」でもフッターメニューのボタンからそれぞれのウィンドウを開閉することができます。

 

4.「チェックボックス」を使用して開閉アクションを実装する方法

 

まとめ

お疲れ様でした。

「ラジオボタン」を使用すると、同じname属性で括ったinput要素に、checked属性が必ず1つしかつかないようにできます。この機能で表示の入替を複数のボタンでもコントロールできるようにしています。

用途や目的に応じて、「チェックボックス」か「ラジオボタン」を使い分けると、望んだアクションに仕上げることができるでしょう。

最後までご一読いただき、ありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.