ネットであれこれとWeb作成の情報を見ていたところ
Webフォントというのを発見。

html5にcss3,端末別ごとに表示を最適化etc..
時代の流れ、早いですね。
乗り遅れないためにもソーシャルボタンを
早速Webフォント化中～。（*9/12完了しました！）

具体的にはアイコンを画像ではなくフォントとして読み取りCSS3で色や動きなどを装飾。スマホ、タブレットPCの高解像度化で画像ファイルでアイコンなどを作成していると拡大したときに滑らかな表示にならない。そこでフォントとして読み込むことが必要になってくるよう。画像ファイルだった文字やソーシャルボタンは随時変更予定です。LineやPocketなど使ってないものも多いからうまく作動するかよく分からないのでリンクの貼り方など色々設定を模索しながらの作業です(>_<)

*以下忘れないための自分用メモ。

・Web Symbols typeface
・IcoMoon App　自作アイコンフォント化ツール
・エンコード用ツール　今回はUTF-8で

<!–social-icon–>
<div id=”social-icon”>
<a href=”https://www.facebook.com/sharer/sharer.php?u=（エンコードしたURL）” class=”facebook”></a>
<a href=”https://twitter.com/intent/tweet?url=●http://monofactory31.com/pl-003.html●&text=●タイトル●&via=MONO FACTORY&hashtags=●ハッシュタグ●&related=MONO FACTORY” class=”twitter” ></a>
<a href=”https://plus.google.com/share?url=（エンコードしたURL）” class=”google-plus”></a>
<a href=”http://www.pinterest.com/pin/create/button/?url=（エンコードしたURL）&media=（エンコードした画像URL）” class=”pinterest”></a>
<a href=”http://getpocket.com/edit?url=●http://monofactory31.com/pl-003.html●&title=●タイトル●” onclick=”window.open(this.href, ‘PCwindow’, ‘width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;”” class=”pocket”></a>
<a href=”http://line.me/R/msg/（エンコードしたタイトル）/（エンコードしたURL）” class=”line”></a>
</div>
<!–/social-icon–>

合ってるか分からないけど
つ、疲れる( ;∀;)あとはページごとにコピペコピペ。