ライブドアブログでアイコンフォントを使う方法

  • ブックマーク

no title

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

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

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

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

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

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

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

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

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

no title

この@spinf60のうしろにある物……

画像ではなくウェブフォントと言うものです。

ウェブフォントとは

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

このウェブフォントをどうにかして表示させたかったの。

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

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

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

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

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

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

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

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

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



おすすめのリンク

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

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

このサイト手書き文字風のフォントなどの日本語フォントが充実しています。しかも無料で利用できるのだ。

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

まとめ

もっと勉強しなくっちゃ

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

そんなわけできょうのブログここまで。

最後までご覧いただきありがとうございます。

またどこかのLogで(^_^)/~

※ライブドアブログのカスタマイズ方法を色々まとめてみたので、こちらもご覧ください(*^_^*)

  • ブックマーク

この記事を書いた人

赤ペソ先生

とにかく仕事をしたくないオッサンです。自分の好きなペースで働きたいので、契約社員+在宅ワークの複業で生計を立てています。#今日の買物 ヤギと昼寝が大好き。