はてなブログはてなブログに設置されているソーシャルボタンは、分かりやすい反面読み込みが遅く、何よりレスポンシブデザインに対応していないというデメリットがありました。今回はこの2つを解決してくれる超絶シンプルなマテリアル風ソーシャルボタンのカスタマイズ方法をご紹介します。今月Facebookの仕様が変わりシェア数を取得できなくなったため、コードを修正しました。以下に記載してあるものは修正後のコードになりますので、そのままコピペしてお使いください。【9月7日追記】Facebookのシェア数がいつまでもぐるぐる回り続けるため、現在当ブログではシェア数非表示バージョンにカスタマイズしています。実装方法については以下の記事をご覧ください。【事前準備】count.jsoonに登録するTwitterは昨年から仕様が変更され、カウント数が表示されなくなってしまいました。そこでまずはこのツイート数を取得するためにcount.jsoonに登録します。登録方法1widgetoon.jsにアクセスし、使用するサイト名、メールアドレスを入力。2登録したアドレスに「ユーザー登録完了メール」が送られてくるので、ここに記載されているURLから自身のユーザーページへアクセス。上記の3ステップでcount.jsoonの登録作業は完了です。count.jsoonの登録が済んだら次はjQueryを入力していきます。今回実装するボタンは、Twitter・Facebook・はてなブックマーク・Pocketの4つ。これ以上実装するとスマホで見た時にボタンが小さくなりすぎてしまうので、当サイトでは主要なこの4つのソーシャルボタンだけを表示させています。記事のタイトル下にソーシャルボタンを表示させたいときは、はてなブログ→スパナマーク→記事上に以下のコードを追加してください。記事上にソーシャルボタンを表示させたくない人は何も記入しないままでOK。class="blogicon-chevron-down"></i></a></li></ul></div>記事下ソーシャルボタンを記事下に表示させたいときは、以下のコードをはてなブログ→スパナマーク→記事下に追加してください(上で追加したjQueryコードのすぐ下に入力)。class="blogicon-chevron-down"></i></a></li></ul></div>CSSを記入するcount.jsoon、ソーシャルボタンのコード、jQueryを追加したら、最後にCSSでレスポンシブに対応させていきます。#e8846b;}これでディスプレイによってサイズが変わる、可変のソーシャルボタンの実装が完了します。PCとスマホでの見え方はこんな感じ。PCスマートフォン記事タイトル周辺をごちゃごちゃさせたくない時や、ミニマルサイトのようなすっきりしたブログデザインにはこのようなマテリアル風のソーシャルボタンがとてもマッチします。当ブログではボタンのカラーを少し暗めにしているので、もっとボタンを目立たせたいときは変更前のカラーコードに戻してみてくださいね。(※備考参照)【備考】各種ソーシャルボタンのカラーを変更する当ブログではあまりソーシャルボタンを目立たせなくなかったため、ボタンのカラーの明度を少し低めにしています。ボタンカラーのコードは以下。Lifeあわせて読みたいhiroseyonaka関連記事はてなブログの記事本文を省略し、モバイルレイアウトに最適化するCSSはてなブログには「目次記法」と呼ばれる機能があり、個別記事のリード文下にを挿入すれば、以降の本文を省略すること...はてなブログProの更新を忘れたときに行う設定を時系列で解説はてなブログProを契約していたにも関わらず、ある日急に見覚えのないAdSenseが表示され、URLも「hat...tableタグを使わずアドセンスを横並びにする方法8月の中旬にGoogleアドセンスの規約が変わり「広告3枚制限」が撤廃されたそうです。記事を書いていると文章を強調させるために囲み枠を使うことがありますが、今回はそんな時に役立つシンプルでシックな...はてなブログをオシャレに変える簡単カスタマイズまとめ※この記事は2015年7月時点でのカスタマイズについて書いていますので、現在のデザインとは異なる点もあります。...【FBシェア数非表示版】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置する先月Facebookの仕様が変わり、記事に設置していたボタンでシェアカウントを取得できなくなりました。東芝のポケットラジオTY-APR5モーニング娘。通帳・カード・届け印を紛失した状態でゆうちょ銀行を解約する【第16回】佐藤優樹と消耗していく娘。【第6回】佐藤優樹と消耗していく娘。見やすさ最重視!裁判を有利にする反訳書の書き方【サンプル文書あり】Xperiaが勝手に動く原因はタッチパネルの故障じゃなく熱暴走!自力でも直せるよ【第12回】佐藤優樹と消耗していく娘。乗り場とかインターネットに繋がらなくなる原因と切り分け(マンションの場合)【第13回】佐藤優樹と消耗していく娘。hirose福岡県在住。