no title

ツイッターのアイコンや外部リンクのアイコンを、画像じゃなくてフォントで表示したい!

こんにちは。赤ペソ先生(@spinf60 )です。


ブログ記事内にリンクがあった場合……

  • 別のタブで開くのか?
  • 同じタブで開くのか?

どちらかわからないと、地味にストレスになりません?


同じタブで開くと思ったら新しい別のタブが開いちゃって、戻る……とか、私はよくあるわ。

あれ知らないで開くとイラッとしますよね(;´Д`)


そんなわけで今回は、外部リンクは別タブで開きますよというのをわかりやすくするため、アイコンを表示させます。


SPONSORED LINK


現在……この記事では、ツイッターのリンクの後ろにアイコンを表示させています。

残念な事にスマホからだと見えないので、画像つけときますね。こんなかんじ↓

no title

この@spinf60のうしろにある物が、画像ではなくウェブフォントと言うものです。

ウェブ上で使いやすい様々なアイコンを、画像ではなくテキスト(文字)として表示できる

アイコンをWebフォントで表示! Font Awesomeの使い方 [ホームページ作成] All About

これをどうにかして表示させたかったの。

ただlivedoor Blogではそこまで設定できるのかがわからなかったので、調べたところ簡単にできる方法を見つけたので導入しました。


アイコンフォントを表示させるために参考にしたサイト

上の記事でも解説は十分なんですが……

『ライブドア・ブログに特化した記事を誰か書いていないかな~』と思って探したところ、見つけました!

本当に有難うございますm(_ _)m

livedoor blogでもアイコンフォントは使えるぞ! : Stanthorpe
...

詳細は記事中に書いてありますが、Font Awesomeというサイトのアイコンセットを使います。


Font Awesome, the iconic font and CSS toolkit


外部CSSを取得する必要があるので、ブログ設定ページで設定して、

Font Awesomeの、アイコンのページ でお好みのアイコンを探して利用します。


ウェブフォントの何がイイって、 ツイッターのアイコンなどもあるのですが、色付けやサイズ変更などもフォントと同じように設定できるので、画像加工するより断然お手軽なのです。


おすすめのリンク

最新-2015.10:日本語WEBフォント情報。(+アイコンフォント) - NAVER まとめ

こちらは、日本語ウェブフォント、アイコンフォントについての情報がまとめられています♪


サイトの文字をすべてウェブフォントにしたい人におすすめ

もじでぱ|ウェブフォントでブログ&ホームページの文字(フォント)を自由に変更して楽しもう♪
このサイト手書き文字風のフォントなどの日本語フォントが充実しています。しかも無料で利用できるのだ。

色々なブログにも対応していて、ブログ全体のフォントを変えたいと思っている方にはオススメです。


まとめ

今まで手書き風の文字で書かれているブログとか、どうやってるのかしら?とおもっていたのですが、こういったウェブフォントを使っていると知ってびっくりしました(笑) もっと勉強が必要だわ。


そんなわけできょうの備忘録はここまで。
最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~


読者登録すると、ブログ更新した時にLINEでお知らせします♪


【オススメ】▶赤ペソ先生が利用しているサービスまとめ


SPONSORED LINK


この記事が気に入ったら
いいね!お願いします♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!