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

スポンサードリンク



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

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

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

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

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

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

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

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

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

こりゃいいぜ。

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

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

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

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

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

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

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

①適当に選んでみよう

まずは適当でいいです!

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

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

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

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

②アカウント作成

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

③ブログを選択

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

④設定画面

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

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

この辺はお好みで!

⑤PC用のボタンを選択

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

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

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

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

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

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

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

⑥はてなに貼り付け

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

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

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

⑦スマホにも貼り付け

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

これだけでできます!!

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

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

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

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

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

まとめ

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

東京生まれ東京育ち。フレンチのコックからIT業界に飛び込み、アプリ制作会社を友人と経営してたけど、結婚して会社を抜けて北海道に移住。現在は北海道でサラリーマンをやりながら、野望に向かって切磋琢磨。