FC2ブログでスマホからでもAAを表示できるようにする方法
問題点
FC2ブログで、スマホのブラウザにおいてAAがずれる。「MS Pゴシック」がないOSのブラウザでAAがずれる。
ウェブフォントを使用すればいいのだがFC2ブログのファイルアップロード機能ではウェブフォント(拡張子.ttf .woff .woff2)は許可されていない。例えできてもサーバが異なるのでウェブフォントを表示できない。
解決策
ウェブフォントをBase64エンコードしてCSSファイルにします。
フォントファイルの中身はバイナリ形式という内容になっています。それをテキスト形式に変換する方法がBase64エンコードです。英数字や記号のみの形式になるのでファイルサイズは元のバイナリファイルより大きくなる特性があります。
ただしSaitamaar.woff2をCSSファイルにすると544KBにもなります。
テンプレート用のcss内に直接挿入すると、後のcssの編集に支障があるので別ファイルとします。
実施手順
- Saitamar_woff2.css.zipをダウンロード、解凍します。
- ブラウザで[FC2ブログ管理ページ]の[ファイルアップロード]に移動します。
- 1で解凍したcssファイルをアップロードします。
- [ファイル一覧]の中にCSSファイルが表示されるのでURLをコピーします。
- [FC2ブログ管理ページ]の[テンプレートの設定]に移動します。
- テンプレートのヘッダー内に以下を記述します。4でコピーしたURLを挿入してください。
<link rel="stylesheet" type="text/css" href="(コピーしたURL)" media="all">
申し送り事項
長らく利用されてきたkeage(http://keage.sakura.ne.jp)さんのウェブフォントのサーバが停止したので、自前で表示することを前提にした内容です。
本記事ではwoff2形式のウェブフォント(Saitamaar.woff2)を使用しています。woff2形式はChrome36 Safari10 Edge14以降で対応しています。
他の古い形式のウェブフォントは作成していません。より古いブラウザ・スマホでも表示させたい場合には各自でBase64エンコードして作成してください。
ttf woff woff2形式の各種AAフォントのダウンロード AAHub Fonts アスキーアート表示対応フォント収集サイト
変換ツールと解説 Base64エンコードしてCSSに直接埋め込む]