はてなブログのSNSシェアボタンを簡単カスタマイズ!「AddThis」の使い方

はてなブログにちょっぴりおしゃれなSNSボタンを設置しました。

f:id:yuzumochi3:20171119210352j:plain

前々から、いい感じのSNSボタンをつけたかったのですが、これで実現!

AddThis」という海外のサービスです。 

SNSボタンをかんたんに設置できる「AddThis」

CSSの知識がなくても、かんたんに使えますよ。

AddThis」は、コピペで簡単にSNSボタンが設置できるサービスです。

www.addthis.com

CSSの知識がなくても、ちょっといい感じのSNSボタンが簡単に仕上がります。デザインの自由度も高く、自分好みにカスタマイズすることもできます。

というわけで、さっそく使い方をみていきましょう。

AddThisの使い方

表示は英語ですが、操作がわかりやすいので、ほぼ直感的につかうことができますよ。

AddThisをはじめる

AddThisを使うのは、最初に登録が必要になります。

AddThisにアクセスすると、このような画面になります。

f:id:yuzumochi3:20171119212541j:plain

 

画面をスクロールし、「Share Butons」がでてきたら「Get Started」をクリックします。

f:id:yuzumochi3:20171119212604j:plain

 

サインアップ画面になったら、必要事項を入力して先にすすみます。

f:id:yuzumochi3:20171119212819j:plain

 

 

「Share Buttons」という画面になったら「Activate」をクリックします。

f:id:yuzumochi3:20171119213414j:plain

これでAddThisを使えるようになりました。次はSNSボタンをつくってみましょう。

シェア用のSNSボタンをデザインする

まず最初に、どのような形式でシェア用のボタンを入れるかを選択します。

f:id:yuzumochi3:20171119214250j:plain

横位置の場合は、InlineでOKです。形式を選んだら「Continue」をクリックします。

 

次の画面では、どんなボタンを表示するかを決めます。「Social Networks」で「Select your own」にチェックを入れると、好きなボタンを選んで入れられるようになります。

f:id:yuzumochi3:20171119214728j:plain

 

世界中のSNSボタンを網羅しているようで、選べるボタンの数は膨大。もちろん「はてなブックマーク」もあります。

f:id:yuzumochi3:20171119215252j:plain

 

Design」をクリックすると、ボタンの大きさや形や色を変えることができます。

f:id:yuzumochi3:20171119215919j:plain

 

ボタンの角はスライダーで調整できます。直角から大きな丸みまで、好みの形状にすることができます。角は最大でここまで丸くできます。

f:id:yuzumochi3:20171119215928j:plain

 

 「Share Counters」の項目では、シェア数の表示方法を決めることができます。オーソドックスなデザインから、ユニークなところではこのようなデザインもあります。

f:id:yuzumochi3:20171119220328j:plain

 

デザインが決まったら「Save&Continue」をクリックします。これでデザインは完成です。つづいて、コードを貼る作業に入ります。

はてなブログにコードを貼る

コードが表示された画面になったら、はてなブログの場合は「HTML WEBSITE」を選び、下の1に記載されているコードをコピーします。

f:id:yuzumochi3:20171119222501j:plain

 

はてなブログのダッシュボード画面から「設定>デザイン>カスタマイズ」とすすみ、フッタに先ほどコピーしたコードを貼りつけます

f:id:yuzumochi3:20171119222806j:plain

 

つづいて、先ほどのAddThisの画面にある「3」のコードをコピーします。

f:id:yuzumochi3:20171119223157j:plain

 


はてなブログの「設定>デザイン>カスタマイズ」にある「記事上」「記事下」の項目にいきます。

f:id:yuzumochi3:20171119223421j:plain

シェア用のSNSボタンを入れたいところに、先ほどコピーしたコードを入れます。もちろん、両方入れてもOKです。

これで作業は完了です。

表示されているかチェックしてみよう

コードを貼りつけたら、表示されるかチェックしてみます。

ゆずもちは「記事上」に表示されるように設定しました。ブログをみてみると・・・

 

f:id:yuzumochi3:20171119223850j:plain

おお、表示されています!

これはボタンをMiddle(中サイズ)でつくったものですが、大きいものや小さいものもつくることができますよ。

まとめ

SNSシェアボタンが簡単に設置できるサービス「AddThis」の紹介でした。CSSの知識がなくてもできるので、興味のある方はぜひ使ってみてくださいね。