Archive for Jan 7 2017

FFXIV ジョブアイコン ウェブフォント Jan 7

ジョブアイコンのウェブフォント化

このサイト用にFFXIVのジョブアイコンをウェブフォント化してみました。本当は公式でジョブやクラスのアイコンをウェブフォントにして配布してくれたら嬉しいんだけど色々大人の事情があるのかななんて思いつつ、せっかくなので他のファンサイト等でも使ってもらえるようにダウンロードできるようにしてみました。

実際に表示したものがこちら。

スマートフォンで拡大するとわかると思いますが、ベクターデータなのできれいなままです。

ダウンロード

ダウンロードできるZIPファイルの中身はサンプルとフォントファイルに CSSSCSS ファイルが含まれています。解凍してご利用ください。

ご利用について

利用についてはファンサイトで利用する分には問題ないと思いますが、ジョブのアイコンデザイン自体はスクエア・エニックスに著作権があるはずなので商用利用当は禁止します。また、このジョブアイコン自体のベクターデータは記事の最後に記載しているウェブサイトからダウンロードしたものに手を加えています。

ご利用の際に発生した損害等には一切責任を負いませんので自己責任でお願いします。

ダウンロード

使い方

フォントファイル(fonts フォルダ)と style.css (または style.scss)をサイトのフォルダにコピーして CSS を HTML ファイルに読み込ませます( CSS のファイル名は使いやすい名前に変えてください)。

1
<link href="style.css" rel="stylesheet" />

あとは好きなところにアイコンの HTML <i class="ffxiv-job-pld"></i> を書くだけ。とっても簡単!文字として扱われるので CSS で色を付けたり、フォントサイズを変えることでサイズも自由です。

アイコンを埋め込む HTML とジョブの指定方法

ジョブは class 属性で指定します。class に指定している pld(ナイト)の部分を他のジョブの記号に差し替えます。例えば 学者であれば sch になります。

1
2
<i class="ffxiv-job-pld"></i>
<i class="ffxiv-job-sch"></i>

ジョブ毎のアイコンとサイズ

ダウンロードできる CSS にサイズを変更する機能はありませんが、ジョブ毎のアイコンと拡大した時のイメージを用意しました。ジョブ毎の class 名も付けてあります。

タンクロール

ジョブ ナイト 戦士 暗黒騎士
class ffxiv-job-pld ffxiv-job-war ffxiv-job-drk
通常
2x
3x

ヒーラーロール

ジョブ 白魔道士 学者 占星術士
class ffxiv-job-whm ffxiv-job-sch ffxiv-job-ast
通常
2x
3x

アタッカーロール(近接)

ジョブ 竜騎士 モンク 忍者
class ffxiv-job-drg ffxiv-job-mnk ffxiv-job-nin
通常
2x
3x

アタッカーロール(遠隔)

ジョブ 詩人 機工士 黒魔道士 召喚士
class ffxiv-job-brd ffxiv-job-mch ffxiv-job-blm ffxiv-job-smn
通常
2x
3x

今後について

とりあえず 3.X 時代のジョブアイコンを用意しましたが、今後赤魔道士や侍?のジョブアイコンがわかったときに追加していこうかと思います。要望等あればコメントください。良ければ使ってみてください!

参考・参照元情報