読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です

Web制作
スポンサーリンク

 

はてなブログのシェアボタンコードを作っていて、以下のような記事で言及をいただきました。

lacucaracha.hatenablog.com

おお!吹き出し、良いですね!他のブログとかでは良くみますし、どんなものかやってみたくなりました。

ブコメでも「ちゃんとした人に作ってもらいたい」とあったので、ちゃんとした人ではないですが一応の元記事作者として作ってみましたのでコピペコードにしたいと思います(これを使えとの強制は全くありませんので悪しからず^^;)。

 

実装図

実装図はこちら

PC

f:id:ftmaccho:20150628114227j:plain

スマホ

f:id:ftmaccho:20150628114447j:plain

いつも通りレスポンシブにも対応しています。

 

このボタンの欠点としては、

  • シェア数が表示される数秒間、吹き出しの中が空白になる
  • スマホで結構縦幅をとる
  • もうすぐGoogleプラスとPocketのシェア数が表示されなくなる(詳しくは元記事で)ので、そうなったら変更する必要がある

というものです。吹き出しにも高さを指定しているのでニョキニョキはしないと思いますが、どちらかと言うと記事下に適しているデザインかなと思います。

 

コピペコード

実際にやっていきます。コードは元記事

www.yukihy.com

の一部を変更する形で説明していきます。

PC版

PC版で貼るコードは以下の4つ

  • コピペコード1
  • コピペコード2(4)
  • コピペコード3
  • コピペコード4(4)

この内1と3は元記事にありますので、2(4)と4(4)だけ下に書きます。

コピペコード2(4)

コードは以下

貼る位置は「デザインCSS」です。

ここまでではまだ何も変化はないです。

 

コピペコード4(4)

コードは以下

これを自分が設置したいところに(記事上か記事下)にコピペしてください。

ちなみに、コピペコード4のときに発生していたエラーは、消去されるように改善しました。元記事のもすぐに直す予定です。

 

以上で完成です。

 

スマホ版

レスポンシブの方は不要です。

以下のことをしてください。

  • 元記事コピペコード1を貼る(すでにやったひとはOK)
  • 元記事コピペコード5の2~55行目を、コピペコード2(4)に変更
  • 元記事コピペコード6を、コピペコード4(4)に変更

貼る位置は元記事と同じです。

 

最後に

今回参考にさせていただいた記事です。吹き出しを作るコードは、下の記事で紹介されているものを元に作りました。ありがとうございました!

zxcvbnmnbvcxz.com

 

今回、リンクの貼り方などもしかしたら最善ではないかもしれませんが、とりあえずやってみました。

不具合や質問などがありましたら、お気軽にどうぞ!

 

他のデザイン

 

www.yukihy.com

www.yukihy.com

 カスタマイズまとめ記事

www.yukihy.com