この度レバーレスコントローラーのキー入力をSVG画像ファイル化したセットの配布を開始した。

これはブログやサイト上でレバーレスコントローラーのキー表記を画像を使う事無く可能にする為のセットなのだが、最初公開した際に予想以上にDMへ使用方法を問い合わせる人が多かったので急遽マニュアル記事を作成して対応する事にした。

今回はゲームの話は1ミリも出てこないので、興味の無い人はバックボタンを押して欲しい。

概要

LEVERLESS CONTROLLER SVG ICON SET

• ダウンロード（ZIP）はコチラから

このセットはブログ等でWEBアイコンとして使う事を目的に制作されたSVGファイルセットとなっており、登録してCSSから呼び出す事でFontAwesomeのWEBアイコンの様に記事やメモ内でレバーレスコントローラーのキー入力表示が行える様になる。

表示例

この様にフォント（文字）として出力されるので、CSSでデザインの調整（マージンや大きさや色等）も可能・元が高解像度ベクターであるSVGファイルなので、拡大してもボケたりジャギーが出るといった事も無い。

今回はこの使用マニュアルを記載していきたいと思う。

外部サービスでWEBアイコン化

まずはお手軽にWEB上で形式変換が可能なIconMoonを使ってSVG画像をWEBアイコン化していく手順を記載していこうと思う。

• IconMoon

IconMoonにアイコンを登録

まず最初にIconMoonにSVGファイルをドラッグ＆ドロップをしてWEBアイコン化していく必要があるので、ページ上部の「IconMoon App」をクリックし、出てきたアイコン一覧の中にダウンロードしたSVGファイルを全てドラッグ＆ドロップする。

全て登録が終わったら、上部メニューからカーソルのアイコンをクリック後に登録したアイコンをクリックして背景が白いアクティブな状態にする。

この時選んだアイコンがWEBアイコンとして出力されるので、登録したアイコンが全てアクティブ（背景が白い状態）になっている事を確認したら、ページ下部の「Generate Font」をクリックする。

WEBアイコンのダウンロード

Generate Fontをクリックするとアイコンの一覧ページに移動するので、アイコンが正しく登録されているかを確認し、ページ下部の「Download」をクリックする。

これでWEBアイコンファイルと設定用のCSSファイルをダウンロード出来るので、後はダウンロードファイルを使用しているサーバーにアップすればWEBアイコンが使える様になる。

ダウンロードしたファイルの設置

SVGファイルをWEBアイコンとして使うには、サーバー上にWEBアイコンのデータをアップロードする必要がある。

先程ダウンロードしたフォルダを解凍すると沢山のファイルが入っているが、この内必要になるのは「fontsフォルダ」と「style.css」の2つのみなので、他のファイルは処分してしまって構わない。

fontsフォルダをアップロード

サーバーのレンタルスペースに上記の「fontsフォルダ」をフォルダごとアップロードする。

筆者の様にWordPressを使ってブログを書いている人は、「themeフォルダ」内の使用テーマフォルダ内にfontsフォルダをアップロードする事が望ましい。

このアップロードした階層次第ではWEBアイコン等のファイルパスが変わってしまうので、後からCSSで相対指定されている箇所を変更する必要がある為だ。

基本的に特別な理由が無い限りフォルダ名はデフォルトの「fonts」を使用・アップロードは最上部のルートディレクトリに対して行う。

CSSの記載を変更

ファイルのアップロードが終わったら、最後にstyle.cssの設定を行えば記事上にWEBアイコンとして呼び出せる様になる。

変更が必要な箇所は以下の通り。

src: url('fonts/icomoon.eot?177dbj');

上記は見易い様に抜粋したものだが、設置場所やフォルダ名を変更した人は「fonts/」となっている箇所を全て設置した場所のファイルパスに変更する必要がある。

そのままアップロードした人は以下の様にstyle.cssをhead内に呼び出すか、普段使用している既存のcssファイルにstyle.cssの内容をそのまま貼り付ければ問題無い。

<link type="text/css" media="all" href="https://example.jp/style.css" rel="stylesheet" />

※赤文字の「example.jp」部分を自身のサイトの物に変更する。

使用方法

style.css最下部、

.icon-h2:before {
content: "\e900";}

この様に記載されている部分がアイコンに関するものなので、赤字で強調しているクラス名を

<i class="icon-h2"></i>

の様にiタグで呼び出せば記事内に登録したSVGファイルをWEBアイコンとして出力する事が出来る。

なお、このクラス名はいつでも任意のものに変更可能だ。CSS上で定義されているクラス名とiタグで呼び出されるクラス名が一致していれば問題無い。

総括

筆者は以前仕事で制作したWEBでFont Awesomeに無いSNSのシェアアイコン（Feedly）をSVGファイルで作成・上記の方法でCSSに組込みWEBアイコンとして実装した事があるが、その時と全く同じ手法で今回レバーレスコントローラーのキー入力WEBアイコンを作成した。

レバーレスコントローラーの人口が増え、攻略ブログを運営していたり自身のオンラインメモとして使っている人も増えてきたので、是非今回のWEBアイコンを活用して欲しい。