【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします - Yukihy Life
注：この記事は元記事の補完的役割をしています。
元記事：コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life
はてなブログのシェアボタンコードを作っていて、以下のような記事で言及をいただきました。
おお！吹き出し、良いですね！他のブログとかでは良くみますし、どんなものかやってみたくなりました。
ブコメでも「ちゃんとした人に作ってもらいたい」とあったので、ちゃんとした人ではないですが一応の元記事作者として作ってみましたのでコピペコードにしたいと思います（これを使えとの強制は全くありませんので悪しからず^^;）。
実装図
実装図はこちら
PC
スマホ
いつも通りレスポンシブにも対応しています。
このボタンの欠点としては、
- シェア数が表示される数秒間、吹き出しの中が空白になる
- スマホで結構縦幅をとる
- もうすぐGoogleプラスとPocketのシェア数が表示されなくなる（詳しくは元記事で）ので、そうなったら変更する必要がある
というものです。吹き出しにも高さを指定しているのでニョキニョキはしないと思いますが、どちらかと言うと記事下に適しているデザインかなと思います。
コピペコード
実際にやっていきます。コードは元記事
の一部を変更する形で説明していきます。
PC版
PC版で貼るコードは以下の４つ
- コピペコード１
- コピペコード２（４）
- コピペコード３
- コピペコード４（４）
この内１と３は元記事にありますので、２（４）と４（４）だけ下に書きます。
コピペコード２（４）
コードは以下
貼る位置は「デザインCSS」です。
ここまでではまだ何も変化はないです。
コピペコード４（４）
コードは以下
これを自分が設置したいところに（記事上か記事下）にコピペしてください。
ちなみに、コピペコード４のときに発生していたエラーは、消去されるように改善しました。元記事のもすぐに直す予定です。
以上で完成です。
スマホ版
レスポンシブの方は不要です。
以下のことをしてください。
- 元記事コピペコード１を貼る（すでにやったひとはOK）
- 元記事コピペコード５の2~55行目を、コピペコード２（４）に変更
- 元記事コピペコード６を、コピペコード４（４）に変更
貼る位置は元記事と同じです。
最後に
今回参考にさせていただいた記事です。吹き出しを作るコードは、下の記事で紹介されているものを元に作りました。ありがとうございました！
今回、リンクの貼り方などもしかしたら最善ではないかもしれませんが、とりあえずやってみました。
不具合や質問などがありましたら、お気軽にどうぞ！
他のデザイン
