今回はデフォルトで、すごく重くてダサいソーシャルボタンのカスタムです。

ソーシャルボタンって「いいねボタン」のことです。みんなも一度は押したことがあるはず！

 早速色々調べました。はてなブロガーはどんなものを使っているのかと。

そして0から作るの面倒臭いので、コピペでサクッといけちゃうものが良いです！

ソーシャルボタン調査結果

圧倒的 1番人気 ※注 僕調べ

 こちらはみんな使ってますね！軽量でオシャレ！素晴らしい！

しかもレスポンシブ対応。レスポンシブは必須ですからね。

 

お、これもいいぞ？

僕の「読者になる」ボタンが四角形なので、こっちの方がデザインの統一感が出てイイね！！

記事にしてあります！興味があればチェックして下さい！

はてなブログの"読者になる"のカスタム【ブログカスタムvo.7】 - 急がば 急いでまわれ！

 

神コピペ用ソースを発見！

忍者ツールさんの簡単なボタンツール！これに決定！

これの素晴らしいところは、なんと

スマホページがオーバーレイ表示！！

こりゃいいぜ。

オーバーレイ表示っていうのはこれです。

スマホの下にずっと表示されてるやつ。

 

 

これはまじでいい。ちなみに完全にコピペオンリー！コード不要です。

 

忍者おまとめボタンの設置方法

僕自身が忍者ツールズさんについて知識が少なかったのですが、別に怪しいサイトではないので大丈夫！

まずこちらのサイトに行きます。

【SSL対応】ツイートボタン、いいねボタン、はてブ、LINEボタン簡単設置｜忍者おまとめボタン

 

①適当に選んでみよう

まずは適当でいいです！

後から変更できるし、このトップページに表示できないくらい、デザインが沢山あります！

一番下の段のボタンはレスポンシブになっておりまして、このボタンを選択した場合だけは種類を選べません。

しかしスマホ表示はオーバーレイにしたければ、基本的にはレスポンシブにする必要はないので、完全にデザインの好みで選択しましょう！

 

なので、ここは直感で選択してサクサク進みましょう。

 

②アカウント作成

忍者ツールのアカウントを作って下さい。一瞬です！

 

③ブログを選択

はてなブログは選択肢の中に無いので、「その他のブログ」を選択して下さい！

 

④設定画面

まずは赤丸で囲んだ箇所をチェック。

• 並び方
• 表示位置
• スマホ表示

この辺はお好みで！

⑤PC用のボタンを選択

なぜかここだけサイトが凄く分かりづらいです。

画面真ん中の「ホーム」へ。

 

 

管理画面には作ったボタンが並びますので、「編集」をクリック。

下部に並んでいるボタンは、

並び順や削除が変更できるようになっています。

好きなデザインを選びましょう！

選択後、右下の「コードを取得する」をクリック。

 

⑥はてなに貼り付け

スクリプトコードをいつも通り

はてなブログの「デザイン」の記事上や記事下に貼り付けましょう！

注 こちらはCSSはないので、HTMLのコーナーにペロッと貼って下さいね！

 

⑦スマホにも貼り付け

まったく同じコードをスマホの記事下に貼りましょう！

これだけでできます！！

 

⑧応用編（フォローボタン）

Facebookなどのイイねボタンとは別に、フォローボタンも同じ要領で作ることができます！

みんな大体サイドバーに置いていますよね？

僕は「読者ボタン」はカスタムしているけど、Twitterのフォローボタンはカスタムしていません。

だから何だかアンバランスですよね？
ついでにこっちもバランスの良いボタンに変更予定です！

 

まとめ

はてなブログのデフォルトのソーシャルボタンは読み込みがかなり遅いですが、この忍者ボタンもそんなに早くはありません。

でもはてなブログのよりは早い！

速度が気になる方はとりあえず試してみてください。

 

今後、時間があるときに、僕もソーシャルボタンを自分で手作りして、本ブログで紹介していきたいと思います。

 

※この記事を書きながら聞いた曲

Stand By Me／Playing For Change

大和証券のテレビCMで何年間も色々な曲が使われていますよね？

日本人だとCharが参加している曲もあります。

インターネット技術を使って、古い名曲たちを世界中で演奏しちゃうところにセンスを感じます。ていうか、どの曲もハズレがないくらい、素敵なカヴァー。

日本人ミュージシャンにはこんなことできないよなー。

商業の匂いがしなくて最高。音楽っていいよね。

 

おしまい。