「Daily Maxim 365」で毛筆フォントを使ってみる

Daily-Maxim-365バナー画像
巻物風デザインで毛筆フォントを使った画像
例）表示の際のデザインを「巻物風」にして、毛筆フォントを使った例

表示の際のデザインを「巻物風」にした際、毛筆フォントで表示するようにしてみましょう。
有償で毛筆フォントを提供するサービスや毛筆フォントを使用できるレンタルサーバーなどもありますが、ここでは、無料の方法をご案内します。

無料フォントの「青柳衡山フォント（あおやぎこうざんふぉんと）」を使います。
ここではMac環境での解説を行いますので、Windows環境の方は適宜読み替えてください。

作業の進め方としては

  • フォントファイルをダウンロード
  • Webフォントへ変換
  • 必要なファイルを準備
  • CSSにコードを追加

となります

それでは、やって行きましょう！！

● フォントファイルをダウンロード

「武蔵システム 青柳衡山フォントT」のページからフォントファイルをダウンロードします。

青柳衡山フォントをダウンロード
※画像は、「武蔵システム 青柳衡山フォント」のホームページキャプチャ画像です。

いずれのファイルからでもWebフォントを作成できますので、ここでは、Macでも「Windows TrueTypeフォントのダウンロード」を選び、フォントファイルをダウンロードします。（「OpenTypeフォントのダウンロード」を選んだ場合はEOTファイルは作成されませんので、ご注意ください。）

ダウンロードしたファイル「AoyagiKouzanT.zip」をダブルクリックして解凍すると、「青柳衡山フォントT.ttf」ファイルが現れます。

● Webフォントへの変換

変換アプリを使って、先程ダウンロードした「青柳衡山フォントT.ttf」フォントファイルの変換を行います。
「武蔵システム WOFFコンバータ」のページから「WOFFコンバータ」をダウンロードします。お使いのコンピュータに合ったものをダウンロードしてください。

WOFFコンバータをダウンロード
※画像は、「武蔵システム WOFFコンバータ」のホームページキャプチャ画像です。

ここでは、「Mac OS X 10.9 〜 macOS Catalina 10.15 用 Ver3.3.0のダウンロード」を選びます。

ダウンロードしたら、解凍してインストール後、「WOFFコンバータ」を起動します。

WOFFコンバータの設定
※画像は、「武蔵システム WOFFコンバータ」のキャプチャ画像です。

「変換前ファイル」の欄に先程ダウンロードしたフォント「青柳衡山フォントT.ttf」をドラッグドロップして、必要な項目にチェックを付けます。

ここでは、
・WOFF2を作成する
・EOTファイルを作成する
にチェックを付けて、「変換開始」ボタンを押します。

無事に変換が終了すると、次のファイルが出来上がります。
・青柳衡山フォントT.eot
・青柳衡山フォントT.html
・青柳衡山フォントT.woff
・青柳衡山フォントT.woff2

このアプリの操作に関して詳しくは
https://opentype.jp/woffconvhowtouse.htm
をご覧ください。

● 必要なファイルを準備

出来上がったファイルをWebで使うための準備をします。

フォントファイルを格納するフォルダ「aoyagikouzan-font（名前は任意）」を作成します。
次にこのフォルダに先程出来たファイルを移動します。
日本語のファイル名だとうまく動作しないことがありますので、ファイル名を変更します。
・青柳衡山フォントT.eot -> AoyagiKouzan.eot
・青柳衡山フォントT.woff -> AoyagiKouzan.woff
・青柳衡山フォントT.woff2 -> AoyagiKouzan.woff2

この時点で、ファイルの階層はこんな風になっています。
\—
    +—aoyagikouzan-font
    |   |   AoyagiKouzan.eot
    |   |   AoyagiKouzan.woff
    |   |   AoyagiKouzan.woff2

●これらのフォントをWebで使えるように、CSSファイルを作成します。
次のようなコードを書き、「aoyagikouzan.css」という名前で「aoyagikouzan-font」フォルダに保存します。

@font-face {
	font-family: 'aoyagikouzan';
	font-style: normal;
	font-weight: normal;
  src: url("AoyagiKouzan.eot") format('eot'),
         url("AoyagiKouzan.woff2") format('woff2'),
         url("AoyagiKouzan.woff") format('woff');
  font-display: swap;
}

この時点では、ファイルの階層はこんな風になっています。
\—
    +—aoyagikouzan-font
    |   |   aoyagikouzan.css
    |   |   AoyagiKouzan.eot
    |   |   AoyagiKouzan.woff
    |   |   AoyagiKouzan.woff2

● CSSにコードを追加

ワードプレスでお使いのテーマファイルにある「functions.php」に次のコードを追記します。（※変更前にバックアップを取ることをおすすめします。）

wp_enqueue_style( 'AoyagiKouzan', get_template_directory_uri() . '/fonts/aoyagikouzan-font/aoyagikouzan.css', array(), '1.0' );

ここでは、先程作成した「aoyagikouzan-font」フォルダが「fonts」フォルダに格納されていることを想定しています。

「Daily Maxim 365」プラグインのCSSファイル「daily-maxim-365.css」にコードを追加します。（※変更前にバックアップを取ることをおすすめします。）

CSSファイル「daily-maxim-365.css」は以下の階層にあります。
\—daily-maxim-365
    +—assets
    |   +—css
    |   |   +—frontend
    |   |   | daily-maxim-365.css

.dm3-makimono {
（ 〜 中略 〜 ）
	font-family: "aoyagikouzan", ( - 省略 - );
（ 〜 中略 〜 ）
}

ブラウザで表示してみましょう。

巻物風デザインで毛筆フォントを使った画像

うまく表示されましたでしょうか？

うまくいかない場合は、ファイル名やwp_enqueue_styleのフォルダ階層の指定箇所、CSSファイルの修正箇所をチェックしてみてください。

それでは、また。

● ご留意いただきたいこと

青柳衡山フォントは字体も美しく、商用でも無料で使用できる素晴らしいフォントですが、JIS非漢字、JIS第一水準漢字までの対応のため、一部の漢字は表示出来ません。

「Daily Maxim 365」プラグインで標準で搭載している格言の中には、表示されない漢字が含まれています。

ちなみに、次の格言や出典・作者名には、表示されない文字が含まれています。
ご使用には、ご留意ください。

※（）内の文字が表示されません。

● フレーズ・格言では
・不（撓）不屈
・人に善言を与うるは布（帛）よりも（煖）かなり
・切（磋）琢磨
・剛毅木（訥）仁に近し
・千万人と（雖）も吾往かん
・嘉肴ありと（雖）も食らわずんばその旨きを知らず
・天を怨みず人を（尤）めず
・太鼓も（撥）の当たりよう
・子は（鎹）
・学んで思わざれば則ち（罔）し思うて学ばざれば則ち殆し
・山（椒）は小粒でもぴりりと辛い
・我が身を（抓）って人の痛さを知れ
・疾風に（勁）草を知る
・知者は惑わず勇者は（懼）れず
・胡（椒）の丸呑み
・（艱）難汝を玉にす
・（蜀）犬日に吠ゆ
・（襤褸）を着ても心は錦
・触らぬ神に（祟）りなし
・（隗）より始めよ
・雲無心にして（岫）を出ず
・（韋）編三度絶つ
・（驕）れる者は久しからず

● 出典・作者名では
・陸（遊）
・（淮）南子
・大島（蓼）太
・（荀）子
・（范）仲（淹）
・ジェフリー（＝）チョーサー
・韓愈「原（毀）」から
・「親（鸞）上人絵詞伝」から
・夏目（漱）石「草枕」から
・クルチュウス（＝）ルーフスの言葉から
・フランシス（＝）ベーコン
・柳宗元「答（韋）中立論師道書」から

作成者: admin カテゴリー：Daily Maxim 365