オシャレで目に留まる、SNSシェアボタンをカスタマイズする方法です。
SNSシェアボタンのイメージ図
オシャレで目に留まる、SNSシェアボタンをカスタマイズする方法です。
以下のようなボタンの設置で、スマホにはラインも表示されます。
PC画面
スマホ画面
共通部分
コード①
シェアボタンにアイコンを表示させるための設定をします。
GoogleプラスとPocketのアイコンは、はてな標準では使えないので、「Font Awesome Icons」から取得をします。
コード
これをコピーして以下のように、「設定」→「詳細設定」をクリックし、
詳細設定の「headに要素を追加」に、ペーストします。
選択部分(PC)
コード②jQuery
シェア数をカウントする設定をします。
コード
これをコピーして以下のように、「デザイン」→「カスタマイズ」→「記事」をクリックし、
「記事下」にペーストします。
コード③HTML
以下のコードを表示させたい場所「記事上」、もしくは「記事下」、もしくはその両方にペーストして下さい。サイドバーやフッターなどには設置できません。
記事上に表示させたい場合は「デザイン」→「カスタマイズ」→「記事」→「記事上」
記事下に表示させたい場合は「デザイン」→「カスタマイズ」→「記事」→「記事下」
※記事下に表示させる場合、コード②jQueryより上にペーストして下さい。
コード
コード④CSS
CSSで装飾する設定をします。
コード
これをコピーして、「デザインCSS」にペーストします。
完成したSNSボタン
選択部分(スマホ)
コード②jQuery
「デザイン」→「スマートフォン」→「記事」をクリックし、
「記事下」に
選択部分(PC)コード②jQueryのコードをペーストします。
コード③HTML
ラインのHTMLが追加されています。
記事上に表示させたい場合は「デザイン」→「スマートフォン」→「記事上」
※記事下に表示させたい場合はコード②jQueryより上にペーストして下さい。「デザイン」→「スマートフォン」→「記事下」
コード
コード④CSS
「デザイン」→「スマートフォン」→「記事」→「記事上」
※記事上に表示させたい場合は、コード③HTMLより上にペーストして下さい。
コード
完成したSNSボタン
ゆきひーさんの記事を参照にしています。