Wordpress

シェアボタンをスクロールに合わせて移動できるプラグイン【WordPress】【AddToAny Share Buttons】

  1. HOME >
  2. Wordpress >

シェアボタンをスクロールに合わせて移動できるプラグイン【WordPress】【AddToAny Share Buttons】

画面スクロールに合わせてシェアボタンがついてくる

スクロールに合わせてシェアボタンがついてくる

  • WordPressでシェアボタンを追加したい。
  • 追加したシェアボタンを画面のスクロールに合わせて移動させたい。
  • メインコンテンツからの距離を一定にしたい。
  • 画面の横幅を基準にして、表示・非表示を切り替えたい(レスポンシブ対応)。

ココがポイント

結論:

  1. 画面スクロール対応レスポンシブ対応のできるプラグイン「AddToAny Share Buttons」をインストールする。
  2. 「設定」から「AddToAny」へ行き、「標準」でアイコンの設定、「Floating」で移動アクションの設定をする。
  3. 「Attach to content」を選択すると、指定したコンテンツからの距離シェアボタンの位置を固定できる。

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

ユウスケ

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

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

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

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

それでは説明していきます。

 

1.「AddToAny Share Buttons」をインストール

AddToAnyのインストール

「プラグイン」から「新規追加」「AddToAny Share Buttons」を検索欄に記入してインストール。
「有効化」をする。

 

2.「AddToAny Share Buttons」の詳細設定

AddToAnyの設定画面

インストールができたら、ダッシュボードの「設定」から「AddToAny」を選択。
「標準」タブ「アイコンの大きさ」「表示したいシェアボタンの種類」「表示する場所」
さらには、「JavaScript」「CSS」も追加できます。

もっと詳しく

 

3.シェアボタンを画面のスクロールに対応させる

シェアボタンをコンテンツからの距離で固定する

画面スクロールでシェアボタンが表示される

3.Step1 「Floating」タブから「Attach to」に指定するコンテンツのセレクタを探す

シェアボタンを画面に合わせてスクロールする設定

「Floating」タブに行き、「縦ボタン」の設定を行う。
「ブックマークボタンの場所」「Attach to content」にする。

すると、「Attach to」が設定できるようにる。

説明文に「Enter a CSS selector, or group of selectors, that match the HTML element you want to attach to.」
(訳:「アタッチするHTML要素に一致するCSSセレクタまたはセレクタのグループを入力します。」)

自身のWebページからシェアボタンを固定させる基準となるブロックのid属性値やclass属性値を探す。

 

目的の属性値をさがす

「Attach to」のデフォルトの値を消して、探してきた属性値のCSSセレクタを記述する。

 

3.Step2 「レスポンシブ化」を設定

レスポンシブ対応させる

上から順に、
①画面の横幅が入力した数値以下になると、シェアボタンを隠す
②画面スクロールがページの上から入力した数値の距離になるまでは、シェアボタンを隠しておく
③画面スクロールがページの下から入力した数値の距離になると、シェアボタンを隠す

お好みで調整をどうぞ。

 

3.Step3 「位置」と「オフセット」

ページでの見える位置を指定

「位置」ページの上からの距離
「オフセット」は指定したコンテンツの左からの距離

「オフセット」にはマイナスの値も入れることができるので、表示位置が思ったところになかったらマイナスの値でもOK。
お好みで調整をどうぞ。

 

3.Step4 「アイコンサイズ」と「Background」

アイコンのサイズとシェアボタンを囲うブロックの背景色になる。
デフォルトの値のままでOK。

 

まとめ

お疲れ様でした。

今回は、シェアボタンを追加してくれるプラグイン「AddToAny Share Buttons」を紹介しました。

画面のスクロールに合わせて移動できる設定も可能なので、使いやすいプラグインだと思います。

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

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.