Tanweb.net

PC・デジモノ・旅行など好きなことだけ語るブログ

10月1日からTwitterがシェアボタンのカウントをやめるから

10月1日からTwitterがシェアボタンのカウントをやめるから

      2016/12/06
 サイト制作, ブログ関連

更新日:2016/12/06   サイト制作, ブログ関連

midashi-web

2015年10月1日・・・明日からTwitterがソーシャルボタンのカウントをやめるということで、Twitterだけカウントが無いのも変なので全てのSNSシェアボタンのカウントを撤廃してオリジナルソーシャルボタンを作成&導入しました。

関連記事:

熱く(暑く)ブログ運営を行っているユーザーさんには死活問題では無いでしょうか?僕はなかなか死活問題だと思っていますw

オリジナルのソーシャルボタンを設置するのはさほど難しくありませんので、今回はその方法がてらブログしてみたいと思います。

Sponsor link
Sponsor link

オリジナルのソーシャルボタンをつくってみよう

オリジナルのソーシャルボタンは、ググってみると実に様々な作り方がヒットします。そんな数あるなかから僕の場合は、画像を利用した、コードも一番シンプルで簡単なものをチョイスしています。

それでは作ってみましょう!

当ブログのソーシャルボタン

以前のソーシャルボタン

snsbtn01

まあ、全て純正を使用しておりました。

変更後のソーシャルボタン

snsbtn02

PC&タブレット版はこんな感じ。

snsbtn03

スマートフォン版はこんな感じ。

とりあえずボタンは画像で用意し、CSSで相対値で設定してPC版・モバイル版と両方に対応できるようにしておきました。ふたつ分のCSS組むのは億劫ですからね・・・。

それでは以下から当ブログで行った方法を記述していきますねっ!

画像を用意します

各SNSに対応した画像をPhotoshopやIllustratorらへんで作成します。因みに僕はFireworksで作りました。うちのはこんな感じです。

b-twitter

b-fb

b-gplus

b-hatena

b-pocket

 

画像を作成する際には、全て寸分狂いなく縦横同じサイズで作りましょうねっ!

Ads by - Admax

各SNSの貼付用のコード

オリジナルソーシャルボタンを作るうえで一番のキモ!ちゃんと動くコードを以下に添付いたします。

Twitter

Facebook

Google+

はてな

Pocket

当サイトで利用しているSNSサービスは以上で、まったく同じコードでうごかしています。

参考までに当ブログのソーシャルボタンCSSも添付

以下のとってもシンプルな構造のCSSで貼ってありますです。

div で囲ってから各ソーシャルボタンをリストタグで並べているだけです。

まとめ

というわけで、今回は「Twitterのカウント機能がなくなっちゃうので、どうせなら全部のソーシャルボタンをオリジナルにしちゃおう!ついでにその方法も掲載しちゃおう!!!」をブログいたしました~。

役に立った!!と感じた方は是非シェアしてあげてくださいね~♪