今回はシェアボタンを作ってみました。シェアボタンのカスタマイズ記事はすでにたくさんの人が書いてるので、供給過多ぎみですが…
もし気に入ったデザインがあったら使ってみてください。全部で４種類作りました。作りすぎ？？
シェアボタンをデフォルトのままにしておくと、スマホでシェアボタンが表示されないことがたまにあります。機会損失を防ぐためにも、カスタマイズしておいた方が良いでしょう。
今回もこの記事をベースに、CSSでオリジナルのデザインにしてみました。
いつも参考にしてます、ゆきひーさんの記事です。ありがとうございます。
今回は長くなりそうなので目次を入れておきます。注意事項もちゃんと読んでください。
目次
はてなブログ用シェアボタンの設置
注意事項
- カスタマイズは自己責任でお願いします。万が一、何か不具合があっても責任は負いかねます。
- 記事はよく読んで下さい。
- 念のためにクリックしてみて、動作確認は必ず行いましょう。
- デザイン→カスタマイズ→記事→ソーシャルパーツでデフォルトのシェアボタンは非表示にしてください。そうしないと、読み込みが遅くなります。
- デザイン→カスタマイズ→記事→記事ページをプレビューをクリックしておくと、表示を確認しながら作業できます。
ベースの部分（共通部分）
まずは下準備です。
シェアボタンにアイコンを表示させるための設定をします。
ダッシュボードの設定→詳細設定→headに要素を追加に以下のコードを貼ってください。すでに同じコードが貼ってある人は貼らなくて大丈夫です。
ここにコードが表示されない場合は再度ページを読み込んでください。
OK？？
そしたら、お次はシェア数をカウントするコード。
jQuery
ここにコードが表示されない場合は再度ページを読み込んでください。
これをデザイン→カスタマイズ→記事→記事下にコピペして下さい。
お次はHTML。以下のコードを記事上、もしくは記事下、もしくはその両方にコピペして下さい。
記事上に表示させたい場合はデザイン→カスタマイズ→記事→記事上
記事下に表示させたい場合はデザイン→カスタマイズ→記事→記事下
記事下に表示させる場合、先ほどコピペしたコードの上にペーストして下さい。
HTML
ここにコードが表示されない場合は再度ページを読み込んでください。
これでベースはできました。あとはCSSで装飾していきます。
CSSで装飾
ここからは、CSSのコピペコードです。好きなデザインから選んでコピペして下さい。
スタンダードなシェアボタン
こんな感じのシンプルなデザインです。なんだかんだシンプルな方が、はてなブログにはよく合います。
以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。
CSS
ここにコードが表示されない場合は再度ページを読み込んでください。
これで完成です。
斜めの光沢があるシェアボタン
以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。
CSS
ここにコードが表示されない場合は再度ページを読み込んでください。
光沢のあるシェアボタン、その１
ちょっと自己主張が強めのデザインです。数年前に良く見た感じのデザインです。はてなブログで利用するとちょっと浮いてしまいますが、シェアボタンを目立たせたいなら良いかもしれません。
以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。
CSS
ここにコードが表示されない場合は再度ページを読み込んでください。
光沢のあるシェアボタン、その２
その１に比べると、少し控えめの光沢ですね。これくらいがちょうど良いかもしれません。
以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。
CSS
ここにコードが表示されない場合は再度ページを読み込んでください。
スマホでの利用
デフォルトでは、スマホとPCのデザインは別になります。PCと別にしている方は、以下の方法でスマホ対応させてください。
1.CSSの記述方法
デザイン→スマートフォン→記事→記事上にstyleタグを記述して、その間に4つの中から好きなCSSをコピペします。
<style type="text/css">
ここにCSSをコピペ。
</style>
2.jQueryの記述方法
デザイン→スマートフォン→記事下にjQueryのコードをコピペ。
3.HTMLの記述場所
記事上にシェアボタンを設置する場合は、先ほど貼ったCSSの下にHTMLをコピペします。デザイン→スマートフォン→記事上
<style type="text/css">
CSSのコード。
</style>
ここにHTMLをコピペ。
記事下にシェアボタンを設置する場合は、先ほど貼ったjQueryのコードの上にHTMLをコピペします。デザイン→スマートフォン→記事下
これで完成です。もし不明な点などあれば、遠慮なくコメント欄から質問して下さい。
CSSの所が長くてスクロールするの大変だったでしょ？ごめんなさい。
当ブログで使用しているシェアボタンはデザインテーマの「Brooklyn」利用者向けのスペシャルエディション（言いたいだけ）です。 コードは公開しておりません。
カスタマイズがめんどくさい！って人はこのテーマを使ってみて下さい。カスタマイズ楽ですよ！
シェアボタンのカスタマイズは他のブログでも紹介されているので、好きなデザインから選んで利用してください。
他にもこんな記事書いてます。
はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた - NO TITLE