Wordpress

シェアボタンに格納するアイコンをAddToAnyから流用する【WordPress】【AddToAny Share Buttons】

  1. HOME >
  2. Wordpress >

シェアボタンに格納するアイコンをAddToAnyから流用する【WordPress】【AddToAny Share Buttons】

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

格納するアイコンをAddToAnyから流用する

  • シェアボタンに格納するそれぞれのアイコンを、シェアアイコンを表示できるプラグインから流用したい。

ココがポイント

結論:
jQueryの「prepend」メソッドをつかいデータを指定したセレクタに入れ込む
または、「clone」「appendTo」メソッドをつかいデータを指定したセレクタに複製する

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

ユウスケ

皆様は、シェアアイコン記事内に追加したい、画面スクロールに合わせて移動させたい。

そのように、Webページをレイアウトしたいそう思ったことはありませんか?

そのような方にお勧めなプラグインが「AddToAny Share Buttons」です。

このプラグインは追加できるシェアボタンの数も多く、メインコンテンツの右か左にシェアボタンを固定させ、画面のスクロールに合わせて移動できる設定もすることができます。

「AddToAny Share Buttons」を使用すると、シェアアイコンをカスタマイズしやすいので、この「AddToAny」をFABにしたシェアボタンに格納してみたいと思います。

 

1.「AddToAny Share Buttons」とは

「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」に入れています。

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.