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

はてなブログの"ソーシャルボタン"のカスタム【ブログカスタムVol.8】〜忍者おまとめボタン使ってみた〜

f:id:george-gogo:20160112013746p:plain

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

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

はてなブログのカスタム記事のまとめはこちら

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

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

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

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

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

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

お、これもいいぞ?

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

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

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

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

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

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

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

こりゃいいぜ。

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

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

f:id:george-gogo:20160112112613j:plain

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

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

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

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

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

①適当に選んでみよう

f:id:george-gogo:20160111225359p:plain

まずは適当でいいです!

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

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

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

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

②アカウント作成

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

f:id:george-gogo:20160111230919p:plain

③ブログを選択

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

f:id:george-gogo:20160111231303p:plain

④設定画面

f:id:george-gogo:20160111231640p:plain

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

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

この辺はお好みで!

⑤PC用のボタンを選択

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

f:id:george-gogo:20160111233038p:plain

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

f:id:george-gogo:20160111232455p:plain

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

f:id:george-gogo:20160111233830p:plain

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

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

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

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

⑥はてなに貼り付け

f:id:george-gogo:20160111234213p:plain

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

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

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

⑦スマホにも貼り付け

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

これだけでできます!!

⑧応用編(フォローボタン)

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

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

f:id:george-gogo:20160111234825p:plain

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

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

まとめ

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

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

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

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

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

Stand By Me/Playing For Change

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

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

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

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

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

おしまい。