SC

Webフォント化 -作業中-

ネットであれこれと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–>

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

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestEmail this to someone

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA