fontsが正式版としてリリースされました。fontsを海外テンプレートで使用する手順について紹介します。fontsは対応済みです。海外製のWordpressテンプレートの場合は話が別です。fontsに対応していることがほとんどですが、選べるfontの中に日本語fontが含まれていないことが多いです(対応してないのが普通)。私は海外テーマの使用を以下の記事で推奨しています。【2019年】Wordpress有料海外テーマの本当のおススメは?Wordpressのテーマは国内製よりも海外製の方が、コスト、機能ともに優れてます。fontsの日本語フォント導入手順を調べました。fontsの導入手順は大きく3段階でOKです。fontsのサイトは以下になります。fontsにアクセスすると日本語以外のフォントが表示されるので、まずは日本語フォントに絞り込む必要があります。日本語のフォントを探す場合は、右のLanguagesを『Japanese』にすれば日本語フォントだけ表示されます。TC)なので、実質8種類だとおもいます。JPを選ぶ場合で説明します。JPの+をクリックします。クリックするだけでこんな感じで表示されます。CUSTOMIZEをクリックして、ロードするフォントの条件を指定します。400とLatinだけになっています。LanguagesにJapaneseを追加します。埋め込みコードの画面に戻ると、コードが変更になって『subset=japanese』が追加されています。fontsを使用するには、headセクション内でfontを読み込む必要があります。fontsでフォントを選択した時に表示されていた記述です。fontsを使用するには、この記述を使用しているテーマのheadセクションに追加して読み込まなければなりません。headセクションにユーザーが記述を追加する場合、使用しているテーマによって方法が違います。テーマ側でheadセクションのカスタマイズを提供していない場合は、直接テーマファイルをいじるのではなく、子テーマを用意して子テーマのfunction.phpに記述を追加するのが簡単です。fontsを使用する要素にfont-familyで指定します。フォントの指定はwindowsやmac、iOSやAndroidでいろいろ違うのでややこしいのですが。fontでというスタンスです。font-familyの指定方法についてはサルワカさんのfont-familyメーカーの説明が詳しくてわかりやすいです。Font-familyメーカー:フォント種類一覧からサクッと指定Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単にfont-familyを作成できます。saruwakakun.combodyというのは例です。fontで使いたいfontを探す非同期で読み込まない場合と同じです。非同期で読み込まない場合と同じです。フォントの非同期読み込みを有効化(javascript)ユーザーが用意したjavascriptを読み込めるのであれば、フォントの遅延読み込みを有効にするのがよいです。fontsを読み込む必要ありません。fontsを読み込んでくれます。非同期で読み込むことで、サイトが高速化します。抑えることもでき、美しさと速さの両立が可能です。使うことで、ページを移動してもフォントの再読み込みが必要ありません。利用する追加されるクラス名は、下記のとおりです。フォントに対応していない時とありますので、遅延読み込みのjavascriptが正常に動いていれば、<html>タグにwf-activeというクラスが追加されているはずです。<html>タグというのはページの先頭付近に1か所だけあるやつです。wf-activeが見つからない場合は、<link>タグで通常の読み込みが残っている可能性があります。子テーマに./jsというディレクトリを掘って、my_custom.jsというファイルを用意しておきます。そのjsファイルに読み込みたいjavascriptを書いておきます。fontsの読み込みに関する設定がありました。そこにwebfont.jsを使うという選択肢がありました。Autoptimizeを既に導入しているのであれば、webfonts.jsの導入はすごい簡単なのか?と思いますが、Autoptimize側でGoogleフォントを読み込んでいるか知らないので、その部分の指定は自分でやらないといけないということだと思います。(だったら自分でやるのとかわらなくない?)Noto-Serif-jpが文字化けした時の対策方法Windows環境でも明朝体が美しいのでNoto-Serif-jpを使う人は多いかもしれません。Noto-Serif-jpは、iphoneだけ文字化けする不具合があります。JPを使ったサイトは、iphoneで見ると文字化けが起きることがあります。...nldot.info2019.05.16まとめ最近はいろんな便利なカスタマイズもネットで調べればすぐに出てきます。修正そのものもコピペで済むケースが多く、カスタマイズのハードルは下がってきていると思います。何事もそうですが修正とその確認はワンセットです。確認ができないような修正というのは必ず不具合が起きます。様々なカスタマイズを行うのは自由ですが、自分が考えているように内部状態や動作が変わっているのか逐一確認しておかないと、後々問題が起きますのでご注意ください。海外テーマの導入を考えているのであれば、以下の記事をお勧めします。【2019年】Wordpress有料海外テーマの本当のおススメは?Wordpressのテーマは国内製よりも海外製の方が、コスト、機能ともに優れてます。最新情報をお届けします。この記事を書いた人ブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。国内シェアNo1の安定性と実績が魅力。SSDで死角なしの万能サーバー。JavaScript2020.01.162020.01.23ブーンオランダで生きていく関連記事サイト運営WordPressテーマ変更後に古いサムネイルは絶対に削除するな最近は有料や無料のWordpressのテーマの選択肢が増えています。カッコいいテーマがあれば乗り換えてみようかと思う人も多いと思います。【完全版】WordPressの投稿を他のサーバーへ移転する方法この記事は、Wordpressの過去記事を他のWordpressに移したい、それも画像やアイキャッチを含めて移転したいという人に向けた内容になっています。私のサイトはコメント欄を開放していません。理由はいくつかありますが、一番の理由は需要が無い割にスマホ表示の時にスペースを取るからです。おススメ記事の進んだカスタマイズSANGOの初期状態から、TOPページのTOPに人気記事を表示するカスタマイズとサイドバーにプロフィールを表示するカスタマイズを行いました。その時に、公式や他のサイトに書かれている内容だと、設置した後の設定が面倒すぎるだろうと思っ...2020.02.15サイト運営WordPressのブロックエディタを使いやすくする方法Wordpressのブロックエディタへの拒絶反応が強かったのですが、どうにか克服して最近の記事は全てブロックエディタで書いています。文字数カウントGoogle検索で表示される記事タイトルは32文字までです。SEO観点では、Wordpressのビジュアルエディタでタイトルを入力するときに32文字以下となっているか確認した方が良いのです。【カスタマイズ】アイキャッチ画像の左右の余白を消すホームサイト運営スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次TOPへ情報スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。fontで使いたいfontを探すCSSでfont-familyを指定フォントの非同期読み込みを有効化(javascript)javascriptを読み込むためのfunction.php記述Autooptimizeで同じことができそうNoto-Serif-jpが文字化けした時の対策方法まとめタイトルとURLをコピーしました。