« | »

2013.12.08

WordPressにWEBフォントを指定し、TablePressで表示する

Webページはデザイン性が高くなるほどに、使用する文字のデサイン・視認性も問題となってきます。

Windows / Mac / スマホ…プラットフォームが異なるとブラウザの違いや画面構成の互いなどからページの見え方が変わってきますし、なにより標準インストールされるフォントが大きく異なります。

当サイトはそれほどデザイン性に優れたというものではないですが、フォントは極力破綻がないようにCSSでシステムフォントをチョイスするように指定しています。 が、それでも個人的に許容できないフォントが有ります。 それはmonospace(等幅)フォント。

特に欧文フォントがいかんともしがたい状況です。

 

等幅フォント自体、パソコンメーカーの利用想定としてCUIコンソール画面用のスクリーンフォントなど…用途的にかなり限定的に扱われています。(まぁ確かにプロポーショナル書体の法が見栄えいいですしね)

そしてマルチプラットフォーム環境での等幅フォントとして見栄えが共通のフォントとなると”Courier”系のフォントとなりますが、私個人としてはこのCourierフォント自体があまり好きではないのです。

等幅フォントを意図的に指定して表示する用途としては、コンソール出力のログを表示するときになりますがコンソール表示でCourierを指定する人はあまりいないと思います。

どちらかと言えばゴシック系のフォントで表示したいところです。

 

なので、標準状態で搭載されて無いのであれば使えるようにしてしまおう…ということで、短絡的思考ではありますがWordPressにWEBフォントを指定して、任意フォントを使用できるようにします。

 

 

まずはフォントの準備

なにはともあれ、フォントを準備しないことには始まりません。

以前と比べてフリーなフォントは比較的入手しやすくなっていますが、それでもライセンスには要注意です。

Freeで公開されていても、再配布前提のWEBで使用できない・商用では別途ライセンスが必要…というものは少なからず存在します。

今回フォント探しで使用したのはこのサイト…「FONT SQUIRREL」商用利用も可能なフリーフォントを扱っています。

 

一般に欧文フォントはフリーフォントがたくさん種類があると言われますが、monospace指定でフォントを検索すると途端に選択肢が少なくなって困りモノ。 フリーフォントを扱っているサイトでmonospaceなゴシック系フォントとしてはgnomeが作ったBitStream系フォントか、その派生のUbuntu Fontが大勢を占めるという状況です。

これらフォントは作成の経緯からディスプレイに表示して視認しやすいフォントなので、WEBページ上にコンソールイメージとして表示するにはちょっと野暮ったい感じ。(へんな拘りですね)

その中で今回発見したHelvitica系ゴシック文字を持っているMonospaceTypewriterはひと目でお気に入りです。

 

このサイトでダウンロードできるフォントはTTFタイプ。

FireFOXやClome、Safari等ではそのままWEBフォントとして使用できます。

しかしながらIEについてはEOTタイプフォントのサポートとなっているため、TTFからEOTフォントに変換してくれるサイト「ttf2eot」にて、フォントの変換を行います。

これによりTTF/EOTのフォントファイルが揃いましたので、次はWordPressに組み込んでいきます。

 

 

WordPressへのWEBフォント組込み。

特に特別な事をするわけではなく、基本のスタイルシート「style.css」にフォントをブラウザから読み込ませる指定を記述します。

今回拡張CSSに記述したのはこの構文。

 

/*   WEB Font Import   */
/* for IE */
@font-face {
    font-family: MonospaceTypewriter;
    src: url(http://www.wendy-net.jp/otoyo/MonospaceTypewriter.eot);
}
/* for Firefox, Opera, Safari */
@font-face {
    font-family: MonospaceTypewriter;
    src: url(http://www.wendy-net.jp/otoyo/MonospaceTypewriter.ttf) format("truetype");
}

 

URLでフォントの場所を指定していますので、URLが通るならば任意で大丈夫。

今回はWordPressホーム直下にフォントファイル2種類をアップロードしています。

 

このCSSによりフォント名(font-face)「MonospaceTypewriter」が追加されます。

そして今回欧文等幅フォントを入れたのはTablePressを介してコンソールログ出力表示を統一した等幅フォントにすることなので、先日カスタムCSSを追加したTablePressにターミナルスクリーン表示用の拡張CSSにこのフォント名で置き換えます。

 

.terminal_screen1 tbody td,
.terminal_screen2 tbody td {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #ffffa0;
    line-height: 1.1;
    margin: 0;
}

.terminal_screen3 tbody td {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #222244;
    line-height: 1.1;
    margin: 0;
}

 

font-family要素に、 「“Courier New”, Courier, monospace」を指定していますが、これはクライアント側でWEBフォントをダウンロード出来ない場合の救済用として記述しています。 CSSでは定義されている左からフォントを探して合致したフォントを表示する仕様なので、WEBフォントのダウンロードが正しくできていれば「MonospaceTypewriter」が選択されます。

 

今回は任意のフォントを自分でダウンロードしてインストールする方法を取りましたが、Googleが公開しているフリーフォントを使用するのであれば、「WP Google Fonts」というプラグインが公開されており、もっと簡単にWEBフォントを取り扱うことも出来ると思います。

 

 

ついでにボールド文字のクラスも追加する。

TablePressのセル内文字をカスタムCSSで指定した場合、ボールド文字(strong属性)をインラインで指定しするとフォント等の情報が上位のCSSのものと置き換わってしまい、折角WEBフォントで文字の見栄えを統一しても強調表示で崩れるという問題が発生します。

これに対応するには、TablePressの拡張CSSのなかに、ボールド文字の時専用のclass指定を設定して、Strong要素指定時でもフォント情報などを統一されるようにします。

 

カスタムCSSには下記内容でCSSを記述。

オレンジ色強調の「tb_mb_or」、青色強調「tb_mb_bl」というクラス名称で必要な情報を記載しています。

/* オレンジ強調指定 */
.tp_mb_or {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #ff6600;
    font-weight: bold;
    line-height: 1.1;
}

/* ブルー強調指定 */
.tp_mb_bl {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #3333cc;
    font-weight: bold;
    line-height: 1.1;
}

 

実際の使用する場合はTablePressセル内に記述した文字列に、

<strong class=”tp_mb_or”> ~ ボールド表示したい文字 ~</strong>

というふうにインラインでstorong属性のclass指定することで、ボール文字でのフォント・色・フォントウエイト等を指定することが出来るようになります。

 

前回のTablePressカスタマイズ、そして今回のWEBフォント対応など修正を加え終わったカスタムCSSは下記のようになっています。

/* TablePress全体の書式を調整 */
.tablepress thead th {
    font-size: 11pt;
    padding: 5px 10px;
    color: #444466;
    text-align: center;
    border-width: 1px;
    border-color: #666688;
    border-style: solid;
}

.tablepress tbody td {
    font-size: 10pt;
    padding: 5px 10px;
}

/* コンソールログ表示用のセル書式指定 */
.terminal_screen1 {
    width: 640px;
    background-color: #000030;
}

.terminal_screen2 {
    width: 640px;
    background-color: #003000;
}

.terminal_screen3 {
    width: 640px;
    background-color: #f8f6ff;
}

.terminal_screen1 tbody td,
.terminal_screen2 tbody td {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #ffffa0;
    line-height: 1.1;
    margin: 0;
}

.terminal_screen3 tbody td {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #222244;
    line-height: 1.1;
    margin: 0;
}

/* ボールド文字用の指定。(色指定付き) */
.tp_mb_or {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #ff6600;
    font-weight: bold;
    line-height: 1.1;
}

.tp_mb_bl {
    font-family: MonospaceTypewriter, "Courier New", Courier, monospace;
    font-size: 10pt;
    color: #3333cc;
    font-weight: bold;
    line-height: 1.1;
}

 

もともとのこのカスタマイズの動機がコンソール画面 / ソースコード表示用途なので、CSSそのものの利用シーンとしては限定的かもしれないですが、TablePressのカスタマイズのヒントになればと思います。 ではでは。

 

Trackback URL

Comment & Trackback

No comments.

Comment feed

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">