ワードプレス

WordPressテーマ「JIN」|Noto Sans Japaneseを軽くする方法【Webフォント】

WordPressテーマ「JIN」|Noto Sans Japaneseを軽くする方法【Webフォント】

WordPressテーマ「JIN」でのフォントはNoto Sans Japaneseを使用しており、とても見た目もよく綺麗な文字表現になっています。

「Noto Sans Japanese」はGoogleがAdobeと共同開発されて、あらゆる言語に対応したWebフォントですが、欠点が一つあります。

「読み込みがすごい重い」サイト表示に影響があり表示速度はSEOでとても重要です。

▪PageSpeed Insights:ページの実際のパフォーマンス確認サイト
https://pagespeed.web.dev/?hl=ja

PageSpeed Insightsで計測確認すると…「警告レベル強

PageSpeed Insights計測
PageSpeed Insights計測

Noto Sans Japaneseのウェブフォントはサーバー上にファイルを呼び出して使用しますが、日本語フォントは欧文フォントに比べて文字の種類が圧倒的に多く、ファイルサイズが大きくなるため、表示速度が遅くなってしまいます。

改善後はPageSpeed Insights計測結果で「過剰なネットワークペイロードの回避」の「警告レベル強」の表示はなくなりました。

PageSpeed Insights計測
PageSpeed Insights計測
プル

「Noto Sans Japanese」の見た目を維持したまま表示速度を改善する方法について解説します。

たまに「JINテーマは重いから使っていません」と見かけますが、自分はデザイン・使いやすさ・テーマのアップデートがしっかりしてるので使い続けたいと思っています。

速度の対応はある程度自身で対応できるところもあるのでいろいろ試して改善しましょう。読んで為になった本を一冊紹介します。

Webページ高速化入門
Webページ高速化入門

▪HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
Webサイト高速化で意図せず組み込んでしまった画像ファイルや、SNSのリンク、CSSファイルの読み込み設定など、案外見おとしがちなWeb設計にあります。Webページの読み込み高速化ノウハウを体系化し、初心者レベルから丁寧に易しく解説されています。

book
created by Rinker
¥2,838 (2022/10/04 21:08:33時点 楽天市場調べ-詳細)

プラグイン導入で改善できる内容もあるのでもっと改善したい方は下記の記事をご確認ください。

webサイトを速く表示する方法
【2022年版】Webサイトの表示速度を改善するプラグイン【WEBページ高速化】Webサイトの動きプラグイン導入やデザインを追加する際に、どうしてもサイトが重くなりパフォーマンスが悪くなってしまい、Googleの評価とユーザーの離脱率が上がってしまいます。Webサイトを見る環境にもよりますが、使用しているネット回線の速度が遅ければ、ダウンロードに時間がかかります。レンタルサーバーの契約している速度プランにも影響がある為、速度が遅い場合はどこに問題があるのかを特定しなければいけません。Webサイトの表示処理を速くしたい、そういった時はページを読み込む時のコード圧縮や画像を圧縮して出来るだけページを読み込む負担を減らす必要があります。高速化プラグイン設定で速度改善した内容をまとめました。...

子テーマにfooter.phpを作る

フォントの指定は<head></head>の中に記述されているのが、ほとんどですがWordPressテーマ「JIN」の場合はfooter.phpにフォント指定が記述されています。

親テーマの記述を変更して対応できますが、テーマアップロードでコードが更新されてしまうので子テーマを作りそこに親テーマと同じfooter.phpをアップロードします。

子テーマ
子テーマ

▪子テーマについて詳しく知りたい方は下記記事をご確認ください。

子テーマアイキャッチ画像
子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

読み込むフォントを指定する

▪Google Fonts
https://fonts.google.com/noto/specimen/Noto+Sans+JP

↑はNoto Sans Japaneseのリンク先になります。今回設定するfont-weightは400、500、700のみになるので他の幅を追加したい方は+ Select this styleをクリックして追加できます。

フォントサイズ追加
フォントサイズ追加

▪WordPressテーマ「JIN」フォント指定の記述をコメントアウト

<!-- <link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" /> -->

すべてのフォントサイズのファイルをダウンロードしてページを表示させているので、サイト全体が重くなってしまします。この記述を<!– –>コメントアウトします。

なので、フォントを分割してページの表示に必要なフォントファイルのみをダウンロードさせるようにコードの記述を変更します。

footer.phpに記述

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

追加CSSに記述

font-family: 'Noto Sans JP', sans-serif;

コードの配置は下記画像のようになります。

footer.phpにコードを記述して、元々あったnotosansjapanese.cssはコメントアウトします。

footer.php
footer.php

外観カスタマイズ追加cssfont-familyを追加し公開を選択。

追加css
追加css

font-weightを追加記述

今の状態で実際のサイトで見た時フォントの太さがかなり細くなっているはずです。

フォントの太さ
フォントの太さ

フォントの太さは追加cssにbody#nts-style pに対してfont-weightを追加して対応していきます。

追加cssに記述
追加cssに記述

下記コードは自身が追加cssに記述しているコードです。

追加cssに記述することで、元々設定されているfont-weightを上書きして反映させています。

!importantで指定されている部分も追加CSSでさらに上書きしています。

追加cssコード(例)

/* Noto Sans Japaneses↓ */
body#nts-style {
  font-family: "Noto Sans JP", sans-serif;
}
body#nts-style p {
  font-weight: 400;
}
body#nts-style .top-image-meta,
body#nts-style .fixed-content a,
body#nts-style .cps-post-date,
body#nts-style .myintro,
body#nts-style .myjob,
body#nts-style .textwidget,
body#nts-style .tagcloud a,
body#nts-style .profile-desc,
body#nts-style .new-entry-item-title,
body#nts-style .widget ul li a,
body#nts-style .widget_categories ul li a,
body#nts-style .widget_recent_comments .recentcomments,
#breadcrumb ul li a,
#breadcrumb ul li,
body#nts-style {
  font-weight: 500;
}
body#nts-style .cps-post-title,
body#nts-style .new-entry-item-title,
body#nts-style .info-title,
body#nts-style #prev-next p,
body#nts-style .myname,
body#nts-style .widgettitle,
body#nts-style .toppost-list-box label,
body#nts-style .pickup-title,
body#nts-style .profile-name {
  font-weight: 500 !important;
  border: 3px double #fff !important;
}
body#nts-style .kaisetsu-box1-title,
body#nts-style .kaisetsu-box2-title,
body#nts-style .kaisetsu-box3-title,
body#nts-style .kaisetsu-box4-title,
body#nts-style .kaisetsu-box5-title,
body#nts-style .cps-post-main-box h2,
body#nts-style .cps-post-main-box h3,
body#nts-style .cps-post-main-box h4,
body#nts-style .cps-post-main-box h5,
body#nts-style .ranking-title01,
body#nts-style .ranking-title02,
body#nts-style .ranking-title03,
body#nts-style .cps-post-main table.cps-table03 th,
body#nts-style .related-entry-headline-text span,
#reply-title span,
#comment-title span,
#drawernav4 ul.menu-box li.menu-item ul.sub-menu li.menu-item a {
  font-weight: 700 !important;
}
/* Noto Sans Japaneses↑ */

コピーペーストでうまく反映されると思いますが、場合によっては実際のclassidが違ったりしてうまく反映できないかもしれませんが、その時は、ブラウザ上で「右クリック」→「検証」でclassidを確認しながらfont-weightを指定していけば解決されます。

JINアイコンフォント

PageSpeed Insightsで確認したところ、「ウェブフォント読み込み中のテキストの表示」項目で「減らせるデータ量」でjin-iconsがありましたので削除します。

Webフォント読み込み
Webフォント読み込み

ms(ping値)「インターネット」における送受信の「応答速度」で通信の「レスポンス(=反応)の速さ」です。以下に基本的な回線速度の目安動作、ping値をまとめましたので参考にしてください。

ping値速度評価
1~15msとても速い
16~35ms速い
36~50ms標準的
51~100ms遅い
101ms~とても遅い
ms(ping値)

とても遅いになっており、気になったのでjin-iconsは削除することにしました。

font-faceでの読み込みとなっておりここは、親テーマに直接記述しないと消せない仕様になっています。

@font-faceはテキストを表示するための独自フォントの指定です。

親テーマを直接変更するためバックアップをとっておくことをお勧めします。親テーマが壊れてしまっては本末転倒なので。バックアップについてはプラグインを使用した内容の記事で解説しているのでわからない方はご確認ください。

インポートバナー
All-in-One WP Migrationアップロードファイルサイズを100MB~10GBに上げる方法【プラグイン】ブログを開設して投稿などのデータが膨大になってくると、必ず必要になってくる作業がバックアップです。自身のローカル環境に毎回データを保存するのは手間がかかるため、WordPressのプラグインを使ったバックアップ方法と復元方法について解説したいと思います。使用するプラグインは「All in One Migration」です。また、復元にはファイルサイズの最大サイズが100MBまでとなっているので、この最大サイズを10GB以上に引き上げる方法についても解説していきます。...

親テーマにコード追加

外観テーマエディタ編集するテーマを選択: JINstyle.cssを選択。

style.css
style.css

「ctrl + f」で検索「アイコンフォント」を入力して「Enter」を押します。
すると4806行目に飛ぶので@font-face {}の中のコードにfont-display: swap;を追記します。

font-display: swap;
font-display: swap;

@font-faceの最後の行にfont-display: swap;を追加するだけですが、一応コメント後のコードをまるっとコピペで反映できるように下記に記述しました。

/* アイコンフォント「jin-icons」 */
/* CSS Document */
@font-face { font-family: 'jin-icons'; src: url("font/jin-icons/fonts/jin-icons.ttf?c16tcv") format("truetype"), url("font/jin-icons/fonts/jin-icons.woff?c16tcv") format("woff"), url("font/jin-icons/fonts/jin-icons.svg?c16tcv#jin-icons") format("svg"); font-weight: normal; font-style: normal; font-display: swap; }

PageSpeed Insightsで再度確認

「ウェブフォント読み込み中のテキストの表示」でjin-iconsがなくなっていることを確認できました。

ウェブフォント読み込み中のテキストの表示
ウェブフォント読み込み中のテキストの表示

▪HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
もっと深くWebサイト高速化に関心がある方は、上記でお勧めした「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」の本がとても分かりやすく、より実践的です。

book
created by Rinker
¥2,838 (2022/10/04 21:08:33時点 楽天市場調べ-詳細)
プル

読み込みが速いWebページはサイト運営者にもSEOなどでさまざまなメリットがあります。問題を探求し改善につとめましょう。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA