Kaion Grande

『Kaion Grande』は、海釣り・海水魚飼育・音楽をメインテーマにしたブログです。

Kaion Grande

はてなブログのSNSシェアボタンをカスタマイズ

「はてなブログSNSシェアボタンカスタマイズ」イメージ

オシャレで目に留まる、SNSシェアボタンをカスタマイズする方法です。

SNSシェアボタンのイメージ図

オシャレで目に留まる、SNSシェアボタンをカスタマイズする方法です。
以下のようなボタンの設置で、スマホにはラインも表示されます。

PC画面

f:id:lifespirit:20161026032720p:plain

スマホ画面

f:id:lifespirit:20161026032731p:plain

共通部分

コード①

シェアボタンにアイコンを表示させるための設定をします。

GoogleプラスとPocketのアイコンは、はてな標準では使えないので、「Font Awesome Icons」から取得をします。

コード

これをコピーして以下のように、「設定」→「詳細設定」をクリックし、

f:id:lifespirit:20161026010158p:plain

詳細設定の「headに要素を追加」に、ペーストします。

f:id:lifespirit:20161026011140p:plain

選択部分(PC)

コード②jQuery

シェア数をカウントする設定をします。

コード

これをコピーして以下のように、「デザイン」→「カスタマイズ」→「記事」をクリックし、

f:id:lifespirit:20161026015436p:plain

「記事下」にペーストします。

f:id:lifespirit:20161026015841p:plain

コード③HTML

以下のコードを表示させたい場所「記事上」、もしくは「記事下」、もしくはその両方にペーストして下さい。サイドバーやフッターなどには設置できません。
記事上に表示させたい場合は「デザイン」→「カスタマイズ」→「記事」→「記事上」
記事下に表示させたい場合は「デザイン」→「カスタマイズ」→「記事」→「記事下」

※記事下に表示させる場合、コード②jQueryより上にペーストして下さい。

コード

コード④CSS

CSSで装飾する設定をします。

コード

これをコピーして、「デザインCSS」にペーストします。

f:id:lifespirit:20161026022150p:plain

完成したSNSボタン

f:id:lifespirit:20161026032720p:plain

選択部分(スマホ)

コード②jQuery

「デザイン」→「スマートフォン」→「記事」をクリックし、

f:id:lifespirit:20161026031613p:plain

「記事下」に

選択部分(PC)コード②jQueryのコードをペーストします。

コード③HTML

ラインのHTMLが追加されています。

記事上に表示させたい場合は「デザイン」→「スマートフォン」→「記事上」

※記事下に表示させたい場合はコード②jQueryより上にペーストして下さい。「デザイン」→「スマートフォン」→「記事下」

コード

コード④CSS

「デザイン」→「スマートフォン」→「記事」→「記事上」

※記事上に表示させたい場合は、コード③HTMLより上にペーストして下さい。

コード

完成したSNSボタン

f:id:lifespirit:20161026032731p:plain

ゆきひーさんの記事を参照にしています。

www.yukihy.com