格納するアイコンをAddToAnyから流用する
- シェアボタンに格納するそれぞれのアイコンを、シェアアイコンを表示できるプラグインから流用したい。
ココがポイント
結論：
jQueryの「prepend」メソッドをつかいデータを指定したセレクタに入れ込む。
または、「clone」「appendTo」メソッドをつかいデータを指定したセレクタに複製する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、シェアアイコンを記事内に追加したい、画面スクロールに合わせて移動させたい。
そのように、Webページをレイアウトしたいそう思ったことはありませんか？
そのような方にお勧めなプラグインが「AddToAny Share Buttons」です。
このプラグインは追加できるシェアボタンの数も多く、メインコンテンツの右か左にシェアボタンを固定させ、画面のスクロールに合わせて移動できる設定もすることができます。
「AddToAny Share Buttons」を使用すると、シェアアイコンをカスタマイズしやすいので、この「AddToAny」をFABにしたシェアボタンに格納してみたいと思います。
目次
「AddToAny Share Buttons」とは、シェアボタンを自身のWebページに表示できるプラグインになります。
登録してあるボタン数が多く、このプラグインだけでも、画面スクロールに合わせて移動できる設定にできたりと、カスタマイズも充実しています。
もっと詳しく
2.シェアボタンをFABにして目立たせる
「FAB」とは、フローティングアクションボタンの略であり、UIの上に浮く丸いアイコンのような形でデザインします。
製品ストーリーの重要な部分を表現するためのツールとしてよく使われます。
このボタンにシェアボタンを割り当てることもでき、目立つ見た目にしていきましょう。
もっと詳しく
3.シェアアイコンをFABにしたシェアボタンに格納させる
シェアボタンをクリックすると格納してあるウィンドウが開くようにします。
この方法は、HTMLとCSSだけで実現できる、スタイルになります。
背景のグレーの領域をクリックしても、ウィンドウを閉じられるようにする設定もあり使い勝手が良いスタイルにできます。
もっと詳しく
4.「AddToAny」のシェアアイコンをウィンドウに格納する
4.Type1_「prepend」メソッドを使用して、「AddToAny」を入れ込む
HTMLを「3.シェアアイコンをFABにしたシェアボタンに格納させる」で紹介したものから下記のものに全て書き換える。
<!--shareウインドウ-->
<div id = "shareIcon">
<input id="shareIcon-input" type="checkbox" class="shareIcon-unshown">
<label id="shareIcon-open" for="shareIcon-input"><i class="fa fa-share-alt" aria-hidden="true"></i></label>
<label class="shareIcon-unshown" id="shareIcon-close" for="shareIcon-input"></label>
<div id="shareIcon-content">
<div id="shareIcon-content-addtoany"></div>
<label class="shareIcon-unshown" id="shareIcon-close-button" for="shareIcon-input"><i class="fa fa-times-circle" aria-hidden="true"></i></label>
</div>
</div>
JavaScriptに下記を追加。4行目と6行目のセレクタ「.addtoany_share_save_container」を各々が作成したAddToAnyのシェアアイコンが格納されたクラスに変更します。
<script type="text/javascript">
jQuery(document).ready(function( $ ){
/* shareIconをshareIcon-contentにいれる */
$('#shareIcon-content-addtoany').prepend($('.addtoany_share_save_container'));
/* addtoanyのありなしを判別 */
var addtoany = $('.addtoany_share_save_container');
if(addtoany.length === 0){
addtoany = 'visibility: hidden;';
}else{
addtoany = '';
}
$('#shareIcon').attr('style', addtoany);
});
</script>
「3.シェアアイコンをFABにしたシェアボタンに格納させる」で紹介したCSSの/*シェアアイコン群スタイル↓*//*シェアアイコン群スタイル↑*/の間を以下に変更。
/* addtoany体裁*/
.addtoany_share_save_container {
display: flex;
text-align: center;
margin: auto;
padding: 15px
}
.addtoany_share_save_container a {
transform: scale(1.2);
margin: 10px;
}
.addtoany_share_save_container a span{
box-shadow: 1px 1px 2px rgba(0,0,0,0.50)
}
.addtoany_share_save_container a:hover {
animation: rotatePop 0.5s linear;
-webkit-animation: rotatePop 0.5s linear;
transform: scale(1.4);
animation-play-state: running;
}
4.Type2_「clone」「appendTo」メソッドを使用して、「AddToAny」を複製する
<script type="text/javascript">
jQuery(document).ready(function( $ ){
/* shareIconをshareIcon-contentにいれる */
$('.addtoany_share_save_container').clone().appendTo('#shareIcon-content-addtoany');
/* addtoanyのありなしを判別 */
var addtoany = $('.addtoany_share_save_container');
if(addtoany.length === 0){
addtoany = 'visibility: hidden;';
}else{
addtoany = '';
}
$('#shareIcon').attr('style', addtoany);
});
</script>
3行目で選択したセレクタの複製を作り、シェアボタンの格納されている「content」に入れています。
