SNSのソーシャルボタンを自作して画像やテキストにする方法の説明

ソーシャルボタンは、各SNSサイトで簡単に作れますが、各々でデザインが異なっているため統一性に欠けたり、設置するとページが重くなってしまったりとデメリットも存在します。

そんな問題を解決するためにソーシャルボタンを自作してテキストやイメージ画像に変える方法をここでは紹介してます。

設置するソーシャルボタンは、『Facebookシェア』、『Tweet』、『Google+』、『Lineに送る』、『はてなブックマーク（はてブ）』、『Pocket』、『feedly』、『その他のフィード』の8つです。

必要に応じて追加したり減らしたりして下さい。

それでは、早速、説明に入らせて頂きたい所ですが、まずはじめにテキストのみでボタンを表現する場合は、ボタンの色と個々のSNSのサイトカラーがマッチする必要があるので、参考になるサイトはないかと色々と調べた所、『ドキドメ！』さんの『ソーシャルボタンを自作してWordPressの高速化』という記事でSNSのイメージカラーにマッチした配色のCSSを公開して下さっていたので、CSSについては、ほぼそのまま使わせて頂きました。ありがとうございます。

以下そのCSSです。CSSの一番下にコピーして貼り付けて下さい。

テキストの場合のデザインについてはこれを参考に個々にアレンジしてみて下さい。

続いて、ボタンを設置したい場所に記述するHTMLタグです。

当サイトはMovableTypeを使用している為、MovableTypeでのHTMLタグを例に挙げておりますが、その他のブログやホームページでも修正すれば利用可能です。

MovableType以外のブログやホームページにボタンを設置する場合の修正箇所については、後ほど説明させて頂きます。

上記HTMLの修正個所としては、tweetの○○○という部分を下記のように自分のブログ情報に書き換える必要があります。

また、これらが不要な場合は、削除することも可能です。

viaを消す場合は、

の部分を丸ごと削除して下さい。

hashtagsを消す場合は、

の部分を丸ごと削除して下さい。

MovableTypeタグが古いですが、MovableTypeを利用している場合は、○○○の箇所を修正し、上記HTMLを表示したい場所に貼り付ければそのまま使用できます。（Movable Type Pro version 6.1.2で確認）

MovableTypeを利用していない方が使用する場合は、○○○部分に加え、上記HTMLの以下の点を修正して使用して下さい。

以上の点を修正すれば、MovableType以外を使用している方でも使用できます。

また、テキストではなく画像で表示したい場合は、</a>の手前のSNS名が記述してある部分を削除して画像表示のタグに差し替えて下さい。

上記例の○○○の部分をPocketの画像タグに差し替えて下さい。

このようにFacebookシェア、Tweetなどその他のSNSのテキストも画像のタグに差し替えて下さい。

最後に画像表示の場合、CSSはそのまま使えませんので、背景色を消したり横幅の調整を行うなどして各自調整してみて下さい。

以上でソーシャルボタンをオリジナルのテキストや画像に変更することができますのでぜひ試してみて下さい。