魂を揺さぶるヨ!

ブログを通じて「魂を揺さぶり情熱を燃やせる何か」を探し人生を楽しみたいと考えている30代の男です。 アウトドア、インドア、なんでも好きです。哲学や心理学にも興味があります。

【図解あり!】お洒落でかっこいいシェアボタンを作成する方法【忍者おまとめボタン】

スポンサーリンク


f:id:soul-vibration:20170930200525j:plain

こんにちはユレオです。

 

はてなブログにはソーシャルパーツでシェアボタンが追加できますが、デフォルトでついているシェアボタンというのは、デザインがいまいちでレイアウト的にちぐはぐな印象を受けます。

 

f:id:soul-vibration:20170930180227j:plain

横並びでも上下にいびつに並んでしまい、スタイリッシュとは言えません。

 

コードを自分で書くという方法もあるようですが、そうはいっても簡単にはできないです。

 

そういった時に様々なWebサービスを利用するというのも手で、そのサービスを利用すると以下のようなものが作成できます。

f:id:soul-vibration:20170930180634j:plain

 

横一列に並び、スタイリッシュで見やすいです。

 

本日は非常にわかりやすく使いやすいシェアボタン作成サービスである「忍者おまとめボタン」のご紹介をしたいと思います。

 

設定手順1 「忍者ツールズ」のユーザー登録を行う

このサービスを受けるためには「忍者ツールズ」にユーザー登録をする必要があります。

 

1:以下のリンクをクリックして「忍者おまとめボタン」サイトに移動します。

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

 

2:画面右側にある「新規ユーザー登録」を押します。

f:id:soul-vibration:20170930181839j:plain

 

3:「メールアドレス」で登録するか「外部IDで登録」で登録を行います。

各登録方法については今回は割愛させていただきます。

f:id:soul-vibration:20170930185150j:plain

 

4:ユーザー登録が完了したら、画面右上の「ログインボタン」を押してログインします。

IDとパスワードを入力するか、サービスアカウントでログインしてください。

f:id:soul-vibration:20170930185923j:plain

 

5:利用規約の内容を読み同意したら「利用規約に同意して次へ」を押します。

f:id:soul-vibration:20170930190139j:plain

 

設定手順2 「忍者おまとめボタン」でシェアボタンを作成する

1:設置するWebサイトを選択してください。

はてなブログの場合は「その他のブログ」を選択してください。

f:id:soul-vibration:20170930191244j:plain

 

2:おすすめのセットのスタイルを選択して「次へ」を押してください。

f:id:soul-vibration:20170930191541j:plain

 

3:この画面でボタンの編集を行います。

もしこの中で追加したいボタンがある場合は画面下の「ボタン管理(ホーム)」を押します。

問題が無ければ「6」へ進んで下さい。

f:id:soul-vibration:20170930192003j:plain

 

4:ホームのボタン管理の 「設定」→「編集」を押します。

f:id:soul-vibration:20170930192318j:plain

 

5:追加したいボタンを選び「+追加」を押して「表示するボタン」で編集します。

・画面下の項目はドラッグ&ドロップにより順番を入れ替えできます。

・マウスオーバーするとデリートアイコンも表示され削除も簡単に行えます。

項目に問題なければ「プレビュー&コードを取得する」を押します。

f:id:soul-vibration:20170930192647j:plain

 

6:プレビューを見て問題が無ければスクリプトコードをコピーします。

f:id:soul-vibration:20170930193231j:plain

 

設定手順3 はてなブログにコードを張り付ける

シェアボタンのコードは好きなところ配置することが出来ますが、今回は例として記事上部分に配置します。

 

1:はてなブログの「デザイン」→「カスタマイズ」→「記事」→「記事上」のシェアボタンを追加したい場所にコードをペーストします。

f:id:soul-vibration:20170930193801j:plain

 

2:デザイン→カスタマイズ→記事→記事ページをプレビューを押します。

f:id:soul-vibration:20170930194101p:plain

 

3:シェアボタンがコードを配置した場所に表示されます。

問題がなければ画面左上の「変更を保存」を選択します。

f:id:soul-vibration:20170930194753j:plain

 

以上で終了です。

 

スタイリッシュなシェアボタンが配置できました。

 

デザインも幾通りも選択できるので、Webサイトに合わせたシェアボタンにすることが出来ます。

  

デザイン性が高くボタン種類も豊富でメリットも多いので、導入を検討されてはいかがでしょうか。 

 

 

合わせてお読みください 

スポンサーリンク