ブログ文中にビットコインの通貨記号マークを簡単に入れる方法

ビットコインの「B」に二重線が入ったマーク(シンボル)をブログ本文に使いたいなぁという場合に簡単に使える方法を紹介します。ウェブ世界の方ならご存じウェブフォントの「Font Awesome」を使うだけなので楽ちんです。

font-awesome-bitcoin

表示のサンプルです。フォントなので高さあわせとか必要無くしっくりなじみます。
Please send 0.01 to me

拡大すると
Please send 0.01 to me

 

色とか付けてみると
Please send 0.01 to me

これらを表示するには、まずFont Awesomeのスタイルシートを呼び出します。これは記事毎ではなくテーマやテンプレートのHeaderで呼び出すのが良いと思います。

ダウンロード&インストールしなくてもCDNから呼び出すのが楽です。コードはメールアドレスを登録すると教えてもらえます。
▼こちらにメールアドレスを記入して「Send…」ボタンをクリックして下さい
Get Started with Font Awesome

すると、

<script https://use.fontawesome.com/aなになに.js></script>

のようなコードが送られてきますので、それをテーマやテンプレの<head>〜</head>の中にコピペします。

そしてブログ記事の中でマークを表示したい場所に

<i class=”fa fa-btc”></i>

を書きます。fa-btcという箇所がビットコインのマークを指定するものになります。ここを変えると別のマークも表示できます。たくさん用意されていますよ。(ここでは拡大表示するために fa-5x も追加しています)

fa-btc → <i class=”fa fa-btc fa-5x”></i>
fa-yen → <i class=”fa fa-yen fa-5x”></i>
fa-usd → <i class=”fa fa-usd fa-5x”></i>
fa-eur → <i class=”fa fa-eur fa-5x”></i>
fa-money → <i class=”fa fa-money fa-5x”></i>
fa-line-chart → <i class=”fa fa-line-chart fa-5x”></i>

▼使えるマークを探すにはこちらから
Font Awesome Icons

あと色付けですがビットコインのあのオレンジ色のカラーコードは「#F69619」もしくはセーフカラーで「#FF9900」です。
<i class=”fa fa-btc” style=”color: #f69619;”></i>

<i class=”fa fa-btc” style=”color: #ff9900;”></i>

本文中にいちいち画像を指定するのは面倒だし大きさを変えるのも大変という場合は、文字と同様に使えるウェブフォントを使ってみてください。
よく使うものはHTMLタグを定型文や辞書登録すると早いですよ!

なお、残念ながらWebフォントはフォントが無い環境では何も表示されませんので、RSSリーダーやEvernoteなどで取り込んだ時には空白になってしまいます。

とはいえ、ビットコインのマークはUnicodeに登録されることになっています。
既にUnicodeにある「฿」はタイ・バーツなので、似ていますがビットコインではありません。

そのうちビットコインが当たり前に普及し、スマホからもビットコインのマークが絵文字として使えるようになったらいいですね。
過渡期の現時点で手軽に通貨記号を表示できるようにする方法の紹介でした!

あわせてどうぞ
ビットコインの著作権フリー無料素材画像でアイキャッチを作成しよう

この記事が気に入ったら
いいね!しよう

この記事はお役に立ちましたでしょうか?
▼投げ銭をいただくとSHUMAIコインをお返しする寄付ボタンを実験中(手動です)
Donate with IndieSquare