はてブ今回はシェアボタンを作ってみました。シェアボタンのカスタマイズ記事はすでにたくさんの人が書いてるので、供給過多ぎみですが...もし気に入ったデザインがあったら使ってみてください。全部で10種類作りました。作りすぎ??シェアボタンをデフォルトのままにしておくと、スマホでシェアボタンが表示されないことがたまにあります。機会損失を防ぐためにも、カスタマイズしておいた方が良いでしょう。念のため注意事項をご覧ください。今回用意したのは以下の10種類のデザインです。はてなブログ用シェアボタンの設置それでは記事の設置方法を説明していきます。注意事項カスタマイズは自己責任でお願いします。万が一、何か不具合があっても責任は負いかねます。記事はよく読んで下さい。念のためにクリックしてみて、動作確認は必ず行いましょう。デザイン→カスタマイズ→記事→ソーシャルパーツでデフォルトのシェアボタンは非表示にしてください。しないと、読み込みが遅くなります。デザイン→カスタマイズ→記事→記事ページをプレビューをクリックしておくと、表示を確認しながら作業できます。アイコンを表示させる準備まずは下準備です。シェアボタンにアイコンを表示させるための設定をします。ダッシュボードの設定→詳細設定→headに要素を追加に以下のコードを貼ってください。同じコードが貼ってある人は貼らなくて大丈夫です。href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">これでアイコンを表示させる準備ができました。スマホで表示させる(レスポンシブデザインにしていない場合)レスポンシブデザインにしていない場合にスマホで表示させるには、CSSはstyleタグで囲って記事上に挿入してください。<style>/*ここにCSSをコピペ*/</style>シェアボタンのコードHTMLとCSSのコードを指示された場所にコピペしてください。それぞれ2つのコードが記載されていますが、上がHTMLで下がCSSです。HTMLは記事上か記事下のどちらか、もしくは両方にコピペしてください。CSSは「デザインCSS」に。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてくださいシンプルなシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/ボタンっぽいシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/ボタンっぽいテキスト入りシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/吹き出しの入ったシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/左にアイコンを配置したシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/左にアイコンを配置したシェアボタンその2↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/丸いシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/白背景の丸いシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/白背景の四角いシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/わざと背景色をずらしたシェアボタン↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。-->↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください(詳細)。*/まとめはてなブログのデフォルトのシェアボタンは表示が遅いので、上記の方法でオリジナルシェアボタンを使うのがおすすめです。シェアボタンは色々カスタマイズできるので、自分なりにカスタマイズしてみましょう。シェアできるか、動作確認は忘れずに。他にもこんな記事があります。前の記事アフィリエイトは稼げるのか。PM背景を白色にして使っています。AM参考にしてカスタマイズさせていただきました!有り難うございます!PCサイトの方のPocketのみ表示されません...なにかできることはありますでしょうか。さん申し訳ございません。最後のコードが抜けておりました。#EE4256;}記事内のコードにも追加いたしました。ありがとうございます、助かりました。AMお陰様で、シェアボタンカッコよくできました!他の記事もいろいろ参考にさせていただきます。記事にしたら、紹介させてください。(id:kswin)おそらくトップページを見ているからだと思います。個別記事には表示されています。PM早速のご返信ありがとうございます。確認致しましたら確かに個別記事にはちゃんと表示されていました。お忙しいお手数をお掛け致しました。ありがとうございました。PMいつもお世話になっております。すみません、質問させて頂きたいのですがよろしいでしょうか。カスタマイズしてみたのですが、シェアボタンが表示される記事と表示されない記事があります。すべての記事に表示させるにはどうすればいいのでしょうか。AMお世話になっています。こちらのシェアボタンを参考にさせていただきました。ところで、いくつか質問があります。1.PCのはてブのところがクルクルと回ってしまってしまっています。なにか設定がおかしいのでしょうか。2.トップページにはシェアボタンを設置させることはできませんか?3.後、lineのシェアボタンはつけることができますでしょうか?今現在は無料版で使用しています。コメントをキャンセルお気軽にコメントしてください!!コメント名前・メールの入力は任意です。名前メールアドレスサイト関連記事ブログのSEOを強化する21の方法はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた(グルグルする不具合治しました)Facebookの仕様変更があったので、シェア数カウントのコードを修正して下さいYouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かったはてなブックマーク利用停止について調べてみたSearch運営者情報SHIROMAブログ運営で独立し、現在は会社を経営しています。WEBデザインやWordPressテーマの制作なども行っています。