wordpress【THE THOR】で日本語の手書き風フォントを使おう♪

あずきフォントって知ってますか?
↑この字体です。
画像の上に文字を表示させたいなと思った時、「画像の上なら手書きの文字がかわいいな」とおもってフォントの追加について調べました( ̄▽ ̄;)
私と同じように、wordoress【THE THOR】ザ・トールで手書き風の日本語フォントを使いたいなと思っている方向けに紹介します♪
この記事ではwordoress【THE THOR】ザ・トールのフォントの変更方法を説明しています♪
そして記事後半では、手書き風日本語フォントの追加についてを紹介していきます(^^♪
・wordoress【THE THOR】ザ・トールのデフォルトで使えるフォントの編集画面からの変更のやり方。

・wordoress【THE THOR】ザ・トールの基本フォントの変更のやり方。

・最後にwordoress【THE THOR】ザ・トールに日本語の手書き風フォント”あずきフォント”を追加して使うやり方。

この3パターンのフォントの変更方法を初心者向けに紹介いたします(^^)/

初心者向けという事で、仕組みを詳しく説明はありません。

そして、注意です。

ここではブロックエディタではなくクラシックエディタを使用した方法を紹介しています(^^)/

すみません。

手書き風日本語フォントを追加する場合はCSSを使います(;^_^A

場所を指定しますのでコピペでOKです♪

テーマのスタイル本体に追加はしません。

ユーザーの記入場所にCSSを追加します♪

手書き風フォントの追加方法がすぐ知りたいという方は、前半飛ばしてください(;^_^A

wordoress【THE THOR】のフォントの変更について

wordoress【THE THOR】のフォントを変更するには

・デフォルトではいっているフォントを使用して変更する

・プラグインを使用してフォントを追加する。

・WEBフォントを使用してフォントを追加する。

この3個の方法があります。
そして日本語のプラグインを追加して使いたいと思う時に、ネットでよく出てくるのが
「 Google Font 」  と 「 Japanese font for TinyMCE 」だと思います。

wordpress【THE THOR】プラグイン「 Google Font 」とは

その名の通り「 google 」が提供している無料フォントです。
このプラグインを入れて、Google Fontのサイトのフォントから必要なフォントを選択して、使用します。
フォント情報をGoogleの専用サーバーに読みに行ってくれるので
Mac、Windowsなどの環境に左右されることなく文字化けすることはありません。
デメリットは、日本語のフォント数が8個と少ない事と、Googleフォントのファイルが大きい所です。

しかも手書き風の文字がないことでしょうか。

それぞれの考えかと思いますが、日本語フォントを使いたいだけなら必要は無いかなと私は思います。
すすめている方ごめんなさい。
私はデフォルトで入っているフォントと大差がないように感じました。
しかし、英語は沢山あって面白いです(^^♪
興味がある方はリンクを張っておきますので、ここからどうぞ♪
この記事ではwordpress【THE THOR】プラグイン「 Google Font 」の導入や使い方は省かせていただきます。

wordpress【THE THOR】プラグイン「 Japanese font for TinyMCE 」とは

wordpressのテーマ【THE THOR】とは相性が悪くてつかえません(-_-;)

通常、プラグイン「 Japanese font for TinyMCE 」をインストールし、

有効化すれば「フォントファミリー」に表示され使用できます。

【THE THOR】では有効化しても「フォントファミリー」に表示されませんでした。

使えないのに紹介はどうかとも思ったのですが、残念情報として記載しておきます(笑)

このプラグインのフォントを表にしました。

興味がある方はリンクを張っておきましたのでどうぞ♪

・ふい字 ・Noto Sans Japanes(普通・太字・細字)
・ほのか丸ゴシック・エ七ナバJ
・こころ明朝体・青柳衛山フォントT
・たぬき油性マジックここ

wordoress【THE THOR】編集画面でのフォントの変更方法

エディタが下の画像と同じ文字などの変更が表示されていない場合は、ツールバー切替ボタンをクリックして表示させてください。
wordoress【THE THOR】の記事中のフォントを変更したい文字を選択してください。
その後、フォント名が表示されている「フォントファミリー」の「▼」をクリックしてください。

フォントが変更されます。変更できるフォントが表示されますので、希望のフォントをクリックしてください。

フォントが変更されます。

wordoress【THE THOR】記事フォントのサイズの変更方法

wordoress【THE THOR】の記事中のフォントサイズを変更したい文字を選択してください。

その後、フォントファミリーの横にある「数字pt」の「▼」をクリックしてください。

フォント変更と同じように変更できるサイズがプルダウンで表示されます。

希望のサイズをクリックしてください。

wordoress【THE THOR】記事フォントカラーを変更する方法

「 A 」の「▼」をクリックしてください。

カラーパレットが表示されますので、希望の色をクリックしてください。

もし希望の色が表示されていなければ、カラーパレットの下の方にある「 カスタム 」をクリックしてください。

①で大体の色を選択してクリックしてください。

②で希望の色の所をクリックしてください。

「キャンセル」の上に色が表示されますので、希望の色を選択出来たら

最後に「 OK 」をクリックしてください。

wordoress【THE THOR】基本フォントの変更方法

wordoress【THE THOR】の基本フォントを変更するには

画面左側のダッシュボードメニューの刷毛マーク「外観 」→ 「カスタマイズ」をクリックします。

次に「基本設定」クリック→「基本スタイル」クリック

で「基本スタイル設定画面」に行けます。

基本スタイルの一番下にある「■全体のフォントファミリーを選択」で変更ができます。

・游ゴシック体(デフォルト)

・ヒラノギ角ゴシック

・メイリオ 

・Noto Sans JP(WEBフォント)

の中から選択します。

>>>THE THOR(ザ・トール)行間とフォントサイズのカスタマイズで見やすく

で画像付きで詳しく紹介しています♪

wordoress【THE THOR】基本フォントのサイズの変更方法

wordoress【THE THOR】の基本フォントサイズは、

「スマホ表示時」と「PC表示時」の2つのサイズを変更できます。

それぞれ「大」「中」「小」の3パターンから選択します。

wordoress【THE THOR】手書き風日本語フォントの追加方法

この記事を読んでいる方が興味深いのはここからでしょうか ( ´∀` )/

1 フォントファイルをダウンロードしてくる

2 フォントファイルを変換する

3 変換したファイルをサーバーにアップロードする

4 テーマスタイルにコピペ♪

この順に作業していきます。

順番にしていけば、あっという間に完了ます♪

☆注意 すべての作業は、ご自身の判断でお願い致します。

手書き風日本語フォント”あずきフォント”について

”かわいらしさ”と”読みやすさ”とを両立した手書き風のフォントです。

半角・全角英数字、ひらがな、半角・全角カタカナ、JISの第一・第二水準漢字、

ギリシャ文字、ロシア文字、¥や$などの記号、IBM拡張漢字、罫線や絵文字もあります。

そして縦書き表示にも対応しています。

絵文字は、「Microsoft IME」を利用している場合、

“けいせん”と入力して変換すれば表示でききます。

(ひよこ┗や、顔文字┸、”├ ”などのあ行のひらがなに濁点をつけた文字や、

“葛”と吉”の異体字も含まれています。)

手書き風日本語フォント”あずきフォント”をダウンロードする

>>>あずきフォントのダウンロードはこちら♪

↑から*DOWNLOAD*の1番上のフォントをダウンロードしてきます。

縦書きのフォントがあるのが1番上のファイルのようなので、このファイルを今回は使用します♪

赤丸で囲んであるファイルをクリックしてください。

ファイルをどうするかを聞いてきます。

「名前を付けて保存」or「保存」のどちらかをクリックして保存してください。

どこでもいいよ~という方はデスクトップに保存をおすすめします。

展開した後、なくてもいいファイルになりますので削除しやすいかなと(;^ω^)

ファイルは圧縮されています。

保存した圧縮フォルダを右クリックし、すべて展開をクリックしてください。

展開先の保存先は、このままでもいいのですが自分がわかる場所を指定してください。
私は展開する前に、「font」というフォルダを作り、
そこを参照して保存しました。

画面右下にある「展開」をクリックしてください。

azukifont121フォルダの中
・azuki.ttf

・readme.txt

この「 azuki.ttf 」ファイルが使用するファイルになります。

手書き風日本語フォント”あずきフォント”を変換する

残念ながら「 azuki.ttf 」はそのまま使用できません。

無料のオンラインの変換サイトで、ファイルを変換してきます。

会員登録もないですが、使用は自己責任でお願いします♪

☆「Convertio」

白丸の部分をクリックしてください。

自分のPCの「エクスプローラー」が開きますので、

保存したフォルダの中の「 azuki.ttf 」をクリックして「開く」をクリックしてください。

ファイル名がPC画面に表示されますので、「変換」をクリックしてください。

ちょっとだけ変換に時間がかかります。

変換が完了しましたら、「ダウンロード」をクリックしてください。

このダウンロードした「 azuki.woff 」ファイルを使用します。

手書き風日本語フォント”あずきフォント”をアップロードする

最後の手順になりました(^^♪

最後は自分の契約しているサーバーにアップロードです!

ここでは私が契約している「Xサーバー」のアップロード方法を紹介します♪

違うサーバーの方はごめんなさい。

ロリポップの方はこちらからアップロード方法を参考にしてください。

さくらサーバーの方はこちらからアップロード方法を参考にしてください。

①「Xサーバー」にログインをします。

②ファイルを管理をクリック

ファイル一覧が表示されますので、ご自身のサイト名のフォルダ名をクリックしてください。

これは私のサーバーフォルダの中です。

「 public_html 」→「 wp-content 」 → 「 themes 」 → 「 the-thor-child 」 

この順にクリックしていってください。

この階層はどのサーバーでも同じだと思います。

もし違った場合は教えていただけると嬉しいです(^^♪

子テーマの「 the-thor-child 」 の中に

「 azuki.woff 」ファイルをアップロードします。

画面右側にあるファイルのアップロードの「参照」をクリックしてください。

ご自身のPCの「エクスプローラー」が開きます。

先ほどダウンロードしてきていた「 azuki.woff 」をクリックして「開く」をクリックしてください。

上の画像のクリックした「参照」ボタンの横にファイル名が表示されます。

上の画像の下部にある「アップロード」をクリックしてください。

これで、アップロードが終わりです。

「あずきフォント」を使う準備が完了しました

wordpress【THE THOR】手書き風日本語フォントの使い方

wordpress【THE THOR】手書き風日本語フォントのCSS追加

使用するのは「外観」→「カスタマイズ」→「追加CSS」ではありません。

この場所に追加しても、テーマの方が優先されるのか使えませんでしたので、

テーマディターの追加スペースに書き込みます。

(ユーザーの書き込みスペースがあるのです♪)

画面左側の刷毛マーク「外観」→「テーマエディター」をクリックしてください。

 

「テーマの編集」画面が表示されます。

画面右側にある「編集するテーマを選択」で「子テーマ」を選択してください。

必ず赤丸の「style-user.css」をクリックしてください。

テーマを直接さわっておかしくなると困りますので(;^ω^)

wordpress【THE THOR】手書き風日本語フォントのコピペ文

ピンクのラインを引いた部分が、アップロードしたファイル名です。


@font-face{
font-family: ‘あずきフォント’;
src: url(‘azuki.woff‘)format(‘woff’);
}


.azuki{
font-family: ‘あずきフォント’;
}

この文をコピペしてください。

最後に画面左下あたりにある「ファイルを更新」をクリックしてください。

wordpress【THE THOR】手書き風日本語フォントの変更方法

ページの編集画面に戻ってください。

”2 wordoress【THE THOR】編集画面でのフォントの変更方法” で紹介していやり方で

変換したい文字を選択して、例として「メイリオ」にフォントを変更してください。

次に「テキスト」をクリックしてください。

ためしにこの文を変えてみます。

<p><span style=”font-family: ‘メイリオ’,’Meiryo’;”>ためしにこの文を変えてみます。</span></p>

↑上の文の font-family: ‘メイリオ’,’Meiryo’; を font-family: ‘あずきフォント‘;”

に変更して終了です♪

wordpress【THE THOR】手書き風フォントを使う!追加方法を紹介♪まとめ

この記事を書くのにすごく時間がかかりました(;^_^A

書いていて思ったのは、使う画像が多ければ多いほど時間がかかるという事。

言葉のられつより、画像があった方がいいと思うのですが、画像が多いと、手間もかかるし、表示時間もかかる。

考えさせられます( ̄▽ ̄;

 

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

もしもから申請をお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪

 

/TOP/