野良ジニアのスクラップブック

野良エンジニアによる雑記帳。技術、本、便利グッズなどを気の向くままに。

仮想通貨ブログを書くなら、仮想通貨ウェブフォントを導入しよう

こんにちわ、野良ジニアです。

ここ最近、仮想通貨界隈(特に Lisk )にどっぷりと浸かってます。仮想通貨特化ブログを(今更だけど)作った方がいい気すらしてます。

さて、今回は仮想通貨ブログ書くなら入れておきたいウェブフォントの話。簡単に導入できるんで、ぜひ試してみて欲しい。

あと、導入した方は Twitter や、記事内で紹介(リンク)なりしてもらえると嬉しいです。


Amazon プライムのメリット総まとめ
内村さまぁ~ず 第1〜50回から選ぶオススメ神回10選

ほぼ日Lisk バックナンバー!
初心者向け!Lisk を安く買う方法 徹底解説!
Lisk Hub の使い方 徹底解説
Lisk 買ったら Vote しよう!完全まとめ!
コイン相場 徹底解説 基本機能編!
コイン相場 徹底解説 API 連携編!

ウェブフォントってなに?

ものすごーくざっくり3行でまとめると

  • インターネット上にあるフォント(字体)ファイルを使うことで
  • 誰の端末でウェブページにアクセスしても
  • 同じ見た目で表示できる便利なやつ

って感じ。もう少し細かい話を知りたいなら、このページを読んだり、ググったりしてみてね。


ウェブフォントといえば Font Awesome!!

上の星マークや電球マークは Font Awesome っていう超有名なウェブフォントのアイコン。他にも身近なところだと、YouTube とか、Twitter も使えるよ。(ブログがっつりやってる人は知ってるよね)


実は Font Awesome にも仮想通貨アイコンがある

知らない人が多そうだけど、Font Awesome にも仮想通貨アイコンがあるんだ!

まずはビットコイン <ビィーーーット

続いてイーサリアム <イーサァーッ

最後にビットコイン <ビィティシィー


…少なっ!3種類て!てか、BTC 2匹いるから2種類やん!! <ビィ...


もっと LSK とか XRP とか XEM とか QTUM とか MONA とか OMG とか NEO とか DASH とか自分の推し通貨のアイコンが欲しいよー!


…あれっ!?君たちどこから来たの??(すっとぼけ


Cryptocoins フォントを使おう!

ざっくり紹介

今回使ってるのは、Cryptocoins というウェブフォント。

labs.allienworks.net

このページを見てもらえば分かる通り、とてもたくさんの仮想通貨に対応してるんだ。全部で140種類以上あるから、生まれてそれなりに時間が経ってて、知名度もそこそこなコインは大体あるんじゃないかな。

2018/02/10 現在の対応通貨を書いておくね。ここは読み飛ばしても OK!

ADA, ADC, AEON, AMP, ANC, ARCH, ARDR, ARK, AUR, BANX, BAT, BAY, BC, BCN, BFT, BRK, BRX, BSD, BTA, BTC, BCH, BTCD, BTM, BTS, CLAM, CLOAK, DAO, DASH, DCR, DCT, DGB, DGD, DGX, DMD, DOGE, EMC, EOS, ERC, ETC, ETH, FC2, FCT, FLO, FRK, FTC, GAME, GDC, GEMZ, GLD, GNO, GNT, GOLOS, GRC, GRS, HEAT, ICN, IFC, INCNT, IOC, JBS, KMD, KOBO, KORE, LBC, LDOGE, LISK, LTC, MAID, MCO, MINT, MONA, MRC, MSC, MTR, MUE, NBT, NEO, NEOS, NEU, NLG, NMC, NOTE, NVC, NXT, OK, OMG, OMNI, OPAL, PART, PIGGY, PINK, PIVX, POT, PPC, QRK, QTUM, RADS, RBIES, RBT, RBY, RDD, REP, RISE, SALT, SAR, SCOT, SDC, SIA, SJCX, SLG, SLS, SNRG, START, STEEM, STR, STRAT, SWIFT, SYNC, SYS, TRIG, TX, UBQ, UNITY, USDT, VIOR, VNL, VPN, VRC, VTC, WAVES, XAI, XBS, XCP, XEM, XMR, XPM, XRP, XTZ, XVG, XZC, YBC, ZEC, ZEIT


はてなブログに導入しよう!

Wordpress や他ブログの人は自分の環境に置き換えて考えてね。


Jsdelivr で配信されてるから、それをそのまま読み込めばいいよ。

ブログの管理画面に移動して、設定をクリック。

f:id:ryota-17:20180311205957p:plain


詳細設定検索エンジン最適化headに要素を追加この下の内容をコピペすれば OK!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cryptocoins-icons@2.7.0/webfont/cryptocoins.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cryptocoins-icons@2.7.0/webfont/cryptocoins-colors.min.css">

f:id:ryota-17:20180311210230p:plain


ここからは Font Awesome を使ってない人向けの話を書くから、使ってる人は次のステップにいってね。


アイコンサイズを調整できるようにしよう

Font Awesome には fa-2x とか fa-3x とかって名前の CSS 設定(クラス)があって、それを使うと簡単にアイコンサイズを変更できるんだ。残念なことに Cryptocoins には同じ機能がない(´・ω・`)

なので Font Awesome も一緒に導入しよう!さっき設定した部分に下の内容をコピペ

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

どうしても Font Awesome を導入したくない人は、カスタム CSS で同じ機能を作ろう。一例だけど、こんな内容を追加すればいいよ!

.cc2x {
  font-size: 200%;
}

.cc3x {
  font-size: 300%;
}

.cc4x {
  font-size: 400%;
}

.cc5x {
  font-size: 500%;
}


さっそく使ってみよう!

使い方は簡単だよ!

<i class="cc BTC"></i>


え?サイズが小さいって?そんな時は fa-2x とか fa-5x とかを追加だ!

<i class="cc BTC fa-3x"></i>


え?色を変えたいって?style="color: " で変更しよう!

<i class="cc BTC fa-2x" style="color: red"></i>
<i class="cc BTC fa-2x" style="color: blue"></i>

こんな感じで戦隊モノみたいにもできる!

    \アンゴウ センタイ ビットコインズ!!/


とまぁ、こんな感じで使えるよ。class="cc (好きな通貨コード)" でアイコン変更できるから、あとは好きな通貨を使って色々と試してみてね!


他にもウェブフォントやフリーアイコンはあるよ!

Cryptocoins 以外で見つけたウェブフォントは、Cryptofont と coinicon の 2つ

cryptofont.com

www.signalsupply.co


Cryptofont を使いたい!

同じようにJsdelivr で配信されてるよ。下のコードで導入 OK!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cryptofont@0.1.1/css/cryptofont.min.css">


表示するにはこんな感じ!

<i class="cf cf-btc cf-2x"></I>

<i class="cf cf-lsk cf-2x"></I>


けど、Cryptofont にしかないアイコンは無かった(Cryptocoins 側でカバーできてる)から、ぶっちゃけ使う必要ないと思うよ!便利なのは cf-2x とかのサイズ調整クラスが用意されてるぐらいかな。


coinicon を使いたい!

残念ながら CDN での配信がなかったよ。github 上でどうにかできないかやってみたけど上手くいかなかった。(こうすれば上手くいくよって分かる方がいれば教えて欲しい)

Wordpress 使ってる人たちなら、ダウンロードして自分のサーバ上にアップロードすれば使えると思う。coinicon はちょっとおしゃれな雰囲気だから、普通のアイコン使いたくないって人には良いかも!


もっともっと色んなアイコンが使いたい!

ちょうど数日前に素敵な記事が公開されてたから、そっちも参考にしてみてね!

【すべて無料!】仮想通貨に関するフリーアイコン、おすすめリスト【カラーアイコンからWebフォントまで】|SeleQt【セレキュト】 を見た。


まとめ

仮想通貨ブログで簡単に使える Cryptocoins ってウェブフォントがあるよ
ブログ設定を少しいじるだけで簡単に導入できる
他にも便利そうなアイコンとかあるみたいだからチェックしてみてね!

素敵な仮想通貨ブログライフを送るグワ〜 ノシ

導入したら Twitter や記事で紹介して欲しいグワ!


Amazon プライムのメリット総まとめ
内村さまぁ~ず 第1〜50回から選ぶオススメ神回10選

ほぼ日Lisk バックナンバー!
初心者向け!Lisk を安く買う方法 徹底解説!
Lisk Hub の使い方 徹底解説
Lisk 買ったら Vote しよう!完全まとめ!
コイン相場 徹底解説 基本機能編!
コイン相場 徹底解説 API 連携編!