Twitter、Facebookのボタンをオリジナルにする方法

ソーシャルメディアの影響がますます高まり、最近ではあたりまえのように設置されているソーシャルボタン。

既存の画像(デザイン)ではなく、自作したオリジナル画像や無料で配布されているオシャレなソーシャルボタンにしたい！という時の方法を紹介します(主要なTwitter、Facebookのみ)。

他のサイトと変化をつけて、少しでも読者の意識をボタンに向けさせましょう！

1　Twitterのボタンをオリジナルにする

基本コードはこちら。とっても簡単ですね。

<a href="http://twitter.com/share?url=ここにURL&text=ここにページタイトル">
<img src="画像のパス">
</a>

日本語が含まれていると動作しない場合がありますので、『URL』、『ページタイトル』にはエンコード後の文字を入れましょう。

その際URLエンコード・デコードフォームが便利です。文字コードはUTF-8にセットしてください。

WordPressに対応させたい場合は、
URLの部分を→<?php the_permalink(); ?>
ページタイトル部分を→<?php the_title(); ?>
に変えてください。

文字化けしたら・・・
【WordPress】自作ソーシャルボタンを設置する際のポイント
エンコードの記述を参考に修正してみてください。

2　Facebookのボタンをオリジナルにする

<a href="http://www.facebook.com/sharer.php?u=ここにURL&amp;t=ここにページタイトル">

<img src="画像のパス">

</a>

WordPressへの対応はTwitterのボタンと同様です。

3　javascriptで新しいWindowで開く

より既存のボタンの動作に近づけたい、という方はこちらのコードを。

<a href="http://twitter.com/share?url=ここにURL&text=ここにページタイトル" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<img src="画像のパス">
</a>

menubar=no、toolbar=no・・・なんだ？？って思った方はこちらの記事を参考にしてみてください。

4　Google+、はてな等その他ソーシャルボタンを設置したい方は

SNS投稿ボタンをオリジナル画像にするためのカスタマイズ。という記事が参考になります。ほぼ網羅されています。

無料でかわいいアイコン『Dripicons』をWebフォントとして使う方法

シンプルで可愛く、フラットデザインにぴったりの無料アイコンセット『Dripicons』


ダウンロードはこちらから
使用イメージが紹介されていますが、かなりオシャレなのでオススメです。

aiやpsdなど様々なフォーマットが用意されているのですが、今回はWebフォントの使用方法についてまとめたいと思います。

1　Webフォントをダウンロード、読み込む

ダウンロードしたフォルダ「webfont」→「fonts」からフォントファイルを任意の場所に設置します。


次にWebフォントを読み込むCSSを記述します。
※fontsフォルダごと移動した場合は下記の通りです。


@font-face {
  font-family: "dripicons";
  src:url("fonts/dripicons.eot");
  src:url("fonts/dripicons.eot?#iefix") format("embedded-opentype"),
    url("fonts/dripicons.ttf") format("truetype"),
    url("fonts/dripicons.svg#dripicons") format("svg"),
    url("fonts/dripicons.woff") format("woff");
}

2　before セレクター、contentプロパティで表示

<div data-icon="デモサイトから使いたいアイコンのコードを入力"></div>

次に :before セレクター、contentプロパティで要素の前に新たな要素を追加します。これがアイコンになります。

CSSに下記を記述します。

[data-icon]:before {

  font-family: "dripicons";

  content: attr(data-icon);

}

属性セレクタを使って、data-icon属性を持つ要素の前（:before）にcontentプロパティでアイコンを挿入します。ここではattr()を利用し、date-iconの属性値を取得し挿入しています。

詳しくはダウンロードしたファイルの中にwebfont.cssというのが入っているのでこちらを参考にするといいと思います。