CSS応用編: フォント追加

2019年元旦の丹沢にて、下山開始してからガスが晴れて登り返すまでの一連の流れをドラクエのコマンド風にブログに起こせないか、と仲間から提案され、これを実行するべく色々と調べてドラクエのコマンド画面風のエフェクトをCSSで導入することに成功しました。忘れないよう備忘録も兼ねてアウトプットしておきたいと思います。

枠と背景

フォントの導入の前に、まずはコマンドの枠を用意することにしました。実装にあたってはこちらのウェブサイトを参考にさせていただきました。ありがとうございました。参照URL：http://www.02320.net/tech/dragonquest-css3-text-effect/

上記サイトで紹介されているCSSを応用させてもらい、以下のようなコードを作成しました。

.textboard {
  color: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #FFF inset;
  background-color: rgba(0,0,0,0.9);
  display: inline-block;
}

文章無しで枠のみ表示させると以下のようになります。

枠の用意ができたら、次はフォントの導入です。

フォント実装

ドラクエ風のフォントを探す前に、まずはどうやったら新しいフォントをウェブサイトに導入できるのか調べました。導入の方法をまとめると以下のように集約できるようでした。

フォント選択
ファイル形式を.woffに変換
ファイルをサーバーにアップロード
CSSでフォントを定義

順番に解説していきます。

フォント選択

色々と調べた結果、今回は以下サイトにてダウンロードできるドラクエフォント（DragonQuestFC）を選択しました。

ドラクエフォント
http://ifs.nog.cc/slime4.hp.infoseek.co.jp/font/font.html

ファイル形式を.woffに変換

次はダウンロードしたフォントファイルの形式を.ttfから.woffに変換します。変換には『WOFFコンバータ』というソフトを使用し、これは以下のサイトよりダウンロードできます。

WOFFコンバータ
https://opentype.jp/woffconv.htm

上記サイトよりWindows版をダウンロードしインストール。ソフトを起動し、『変換前ファイル』にダウンロードした.ttfファイルを指定、『変換開始』をクリックすると少しして.woff形式のファイルが出力されます。

ファイルをサーバーにアップロード

.woffファイルが用意できたら、FTPソフトを使用してファイルをサーバーにアップロードします。WordPressサイト構築時の記事にも書きましたが、現在使用しているソフトはCyberduckです。アップロード先は使用しているテーマのフォルダの直下。このサイトはfirstというテンプレートの子テーマfirst_childを使用しており、具体的には：

/wp-content/themes/first_child

にアップロードします。ここまでの流れで以下のような画面に至りました。

CSSでフォントを定義

アップロードしたフォントをサイトで認識させるため、フォントに定義付けをします。具体的には、CSSに以下のような記述を追記します。

@font-face{
font-family:dqfont;
src:url('DragonQuestFC.woff')format('woff');
}

font-familyプロパティは任意の名前で、今回はdqfontとしています。urlはファイル名、formatはwoffです。「’」で囲う際、半角になっているか要確認です。

CSS加筆

枠の用意が終わりフォントをサイトに実装したので、あとはフォントを指定して文章を書き枠で囲えば基本的には完了ですが、文字のサイズや枠内での文章のポジションなど微調整が必要だったので色々と試して以下の記述をCSSに追記しました。

.textboard .dqtext {
  line-height: 1;
  padding:0px 14px 14px;
  font-family:dqfont;
  text-align: left !important;
  font-size: 32px !important;
}

.textboardクラスの下に.dqtextクラスがいる場合、上記が反映される設定です。実際に書いてみると以下のようになります：

<div align="center">
<div class="textboard">
<div class="dqtext">
りゅうおうが あらわれた！
</div>
</div>
</div>

りゅうおうがあらわれた！

まとめ

フォントの導入は思っていたよりも難しくなく、意外とあっさりできてしまった印象です。ブログでの表現の幅が増えたのは嬉しい限りです。今後も思いついたことはウェブサイトにどんどん反映させていきたいと思います。

Yusaku Days