Wordpress

シェアボタンをFABにする(格納しているウィンドウを開く)【WordPress】【CSS】

  1. HOME >
  2. Wordpress >

シェアボタンをFABにする(格納しているウィンドウを開く)【WordPress】【CSS】

シェアボタンをクリックすると格納したるウィンドウが開く

格納しているウィンドウを開く

  • FABにしたシェアボタンに各アイコンを格納したい。
  • ウィンドウを開くアクションを設定したい。

ココがポイント

結論:
input要素の「チェックボックス」を使用することで、クリックすると格納してあるウィンドウが開いたり閉じたりするアクションを、CSSのみで設定ができる。また、動きをつけたいときは、CSSの「animation」を使用する。

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

ユウスケ

皆様は、シェアボタンをに、それぞれのシェアアイコンを格納したいと思ったことはございませんか?

JavaScriptのtoggleClassメソッドを使う方法もございますが、今回はCSSとHTMLだけでウィンドウの開閉をする方法をご紹介しようと思います。

 

1.「FAB」とは

「FAB」とは、フローティングアクションボタンの略であり、UIの上に浮く丸いアイコンのような形でデザインします。製品ストーリーの重要な部分を表現するためのツールとしてよく使われます。

もっと詳しく

FABは、CSSで簡単にデザインできるので、是非目立たせたいアイコンに使用してみてください。

 

2.シェアボタンをFABにして、アクションを追加

 

3.チェックボックスを利用して格納してあるウィンドウを開閉する方法

See the Pen
share-button
by 三好雄介 (@yusuke5028198)
on CodePen.

type属性を「checkbox」の値にした「input」要素を、残りの「label」要素で囲んでいる項目をクリックすることで、checked属性の切り替えを行っています。
「input」要素の「id」属性の値を、「label」要素の「for」属性の値に入れることで、「label」要素で囲んだ要素からも、チェックボックスの属性を変化させることができるようになります。
この仕組みを利用して、シェアボタンや閉じるボタンをクリックすることでウィンドウの開閉を行っています。

HTMLの「<!--格納用シェアアイコン群↓--><!--格納用シェアアイコン群↑-->」内にシェアアイコンを追加していけば、お好みの数だけウィンドウにアイコンを格納できます。

 

4.JavaScriptを使用して、格納してあるウィンドウを開閉する方法

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.