こんにちは、ユキです＾＾
インターネットで色んなWebサイトを見てると、
全体的なページデザインとテキストのフォントが合ってないことってないかしら？
全体的にはポップなデザインなのにテキストが硬い感じのフォントだと、
違和感があって見てて何となく気持ち悪いのよねぇ。
Elementorは標準だと日本語フォントは1種類だけだから、
ElementorでWebサイトを作ると何となく気持ち悪い感じになっちゃうことがあるわ。
じゃあElementorでデフォルト以外の日本語フォントを使うことはできないのか、
使えるとしたらどうすれば良いのかなどについて詳しく見ていくわね。
Elementorで日本語フォントを増やす方法
冒頭でも書いたようにElementorで使える日本語フォントはデフォルトだと
1種類だけなんだけど、Elementorで使える日本語フォントを増やすことは可能よ。
WordPressはアメリカ、WordPressのプラグインであるElementorはイスラエルの会社が
提供してるから、英語だとデフォルトでも色んなフォントが使えるようになってるわ。
ところが日本語のフォントは1種類のみだから、ElementorでWebサイトを作ると
ページデザインとテキストのフォントが合わないってことがでてきちゃうのよ。
ただ、多少手間はかかるものの、Elementorで使える日本語フォントを増やすことは
できるから、ページデザインとテキストのフォントが合わない問題は解決できるの。
Elementorで使える日本語フォントを増やす方法としては
・Elementorにフォントファイルをアップロード
・サーバー提供のフォントを利用
・フォントが追加できるWordPressのプラグインを利用
の3つが挙げられるわ。
1つ目の「Elementorにフォントファイルをアップロード」する方法は、
有料・無料に関わらずフォントを提供してるサイトでファイルをダウンロードして、
それをElementorにアップロードするの。
2つ目の「サーバー提供のフォントを利用」する方法は、Elementorで作った
Webサイトを公開するサーバーが提供してるフォントを使うってこと。
最後の「フォントが追加できるWordPressのプラグインを利用」する方法は、
Elementorとは別にフォント用のプラグインをインストールするのよ。
Elementorにフォントファイルをアップロード
まずElementorにフォントファイルをアップロードする方法だけど、
この方法は有料版であるElementorProでしか使えないから気を付けてね。
有料版のElementorProには「カスタムフォント」という機能があって、
フォントを自由に追加することができるようになってるの。
ここではGoogleが提供してる「Googleフォント」をカスタムフォント機能を使って
ElementorProに追加する方法を紹介するわ。
まずGoogleフォントの公式サイトもしくは「Google Webfonts Helper」というサイトで、
日本語のGoogleフォントファイルをダウンロードするのよ。
どちらのサイトでも「JP」とか「Japanese」と検索して使いたい日本語フォントを選び、
文字の太さを選択してダウンロードボタンをクリックすればOK。
ダウンロードした日本語フォントのファイルは恐らくZIP形式になってるから、
解凍してファイルの中身が取り出せるようにしておいてね。
またGoogleフォントでは気にしなくて良いけど、Googleフォント以外の日本語フォントを
利用する場合はファイルの拡張子が「.ttf」になってるか確認するのよ。
「.ttf」じゃないとElementorProで使えないから、拡張子が「.otf」とかになってる場合は
拡張子が変換できるサイトを利用して「.ttf」に変換しておきましょう。
ダウンロードしたファイルをElementorProにアップロード
Googleフォントをダウンロードしたら、ElementorProを起動してダッシュボードの
「Custom Fonts」を選んで、画面右側で「Add New」をクリック。
「Add New Font」という画面が表示されたら、空欄に任意のフォント名を入力して
「ADD FONT VARIATION」ボタンを押す。
ダウンロードしたファイルの一覧表示されたら、
拡張子が「.ttf」もしくは「.woff2」のファイルを選んで「UPLOAD」ボタンをクリック。
Googleフォント以外のフォントファイルも追加するんだったら、
「ADD FONT VARIATION」ボタンを押すところから同じことを繰り返すと良いわよ。
そして最後に画面右上にある「公開」ボタンを押すとフォントの追加が完了、
ElementorProでデフォルト以外の日本語フォントが使えるようになるわ。
フォントが商業利用できるか確認しておくべし
日本語フォントのファイルをダウンロードする際には、有料・無料に関わらず、
フォントが商業利用できるか一応確認しておきましょう。
ダウンロードしたフォントそのものを売り買いしなくても、
商品やサービスを販売するサイトやバナーの広告料が発生するサイトではフォントを
商業利用してると見なされるかもしれないわ。
フォントを提供してる側の中には、
商業利用しないことを前提に無料や安価でフォントを提供してることもあるのよねぇ。
そういった商業利用しないことを前提に提供されてるフォントを商業利用すると、
あとあと揉める原因になっちゃうのよ。
だからElementorProで作るWebサイトでフォントを使うんだったら、ファイルを
ダウンロードする前に商業利用可能かどうかを確認しておいた方が良いってわけ。
商業利用可能ならそのままダウンロードして使えば良いし、
商業利用不可なら商業利用できる似たようなフォントを探すようにしましょう。
サーバー提供のフォントを利用
WordPressではサーバーの提供は行ってないから、Elementorで作ったWebサイトを
公開するには自分で立てるなりレンタルするなりして別途サーバーを調達しないと
いけないわ。
そのサーバーをレンタルしてる事業者の中には、
WordPress用のフォントプラグインを提供してるところがあるのよ。
WordPress用のフォントプラグインを提供してるのは
・エックスサーバー
・さくらのレンタルサーバー
・お名前.comレンタルサーバー
の3つ。
この3つのレンタルサーバーでは、Webサイトに使われる日本語フォントしては
比較的ポピュラーな「モリサワフォント」が使えるのね。
もしこれからElementorを使ってWebサイトを作ろうと考えてる場合は、
プラグインでフォントが追加できる先の3つのサーバーのいずれかをレンタルしておくと
良いんじゃないかしら。
エックスサーバーのフォントプラグインを使う方法
エックスサーバーが提供してるフォントプラグインを使うには、
まずエックスサーバーサイトの「サーバーパネル」にログインして「ホームページ」の
項目内にある「Webフォント設定」に進むの。
「Webフォント設定」画面が表示されたら、「Webフォント設定の追加」をクリックして
Webサイトを公開するのに使うドメイン名を選択、「設定する」ボタンを押すのよ。
次にWordPressを起動してログイン、管理画面で「プラグイン」→「新規追加」に進んで、
画面右側の検索窓に「TypeSquare Webfonts forエックスサーバー」と入力して検索。
ヒットしたプラグインの「今すぐインストール」ボタンをクリックし、
インストールが完了したら「有効化」しておくの。
あとはWordPressの画面左側に追加された「TypeSquare Webfonts」を選び、画面右側で
「フォントテーマ」を選択して「フォントテーマを更新する」ボタンをクリックすればOK。
これでエックスサーバーが提供するモリサワフォントがWordPressで使えるようになるわ。
さくらのレンタルサーバーのフォントプラグインを使う方法
さくらのレンタルサーバーのWordPress用フォントプラグインを使うには、まずさくらの
レンタルサーバーのサイトで「サーバーコントロールパネル」にログインするの。
ログインしたら「Webサイト/データ」→「Webフォント」→「ドメイン追加」に進んで、
Webサイトを公開するのに使うドメイン名を選択して「設定」ボタンをクリック。
次にWordPressを起動してログイン、管理画面から「プラグイン」→「新規追加」に進み、
画面右側の検索窓に「TypeSquare Webfonts Plugin for さくらのレンタルサーバー」と
入力して検索。
ヒットしたプラグインの「今すぐインストール」ボタンをクリックし、
インストールが完了したら「有効化」ボタンを押すの。
WordPressのメニューの「Typesquare Webfonts」を選択して、「フォントテーマ」を選んで
「フォントテーマを更新する」をクリックすればモリサワフォントが使えるのよ。
お名前.comレンタルサーバーのフォントプラグインを使う方法
お名前.comレンタルサーバーのフォントプラグインを使うには、
まずお名前.comレンタルサーバーのサイトで「コントロールパネル」にログイン。
「基本設定」→「Webフォント」へと進んで「はじめる」をクリック、
「＋ドメインを追加」を押してWebサイトを公開するのに使うドメイン名を選択する。
次にWordPressにログインして管理画面から「プラグイン」→「新規追加」へ進み、
画面右側の検索窓に「TypeSquare Webfonts for お名前.com」と入力して検索。
ヒットしたプラグインの「今すぐインストール」ボタンをクリックして、インストールが完了したら「有効化」ボタンを押すの。
最後にWordPressの管理画面から「Typesquare Webfonts」に進み、「フォントテーマ」を
選択して「フォントテーマを更新する」をクリックすれば日本語フォントが追加されるわ。
サーバー提供のフォントには利用条件がある
サーバーが提供してるフォントプラグインの利用は、
そのレンタルサーバーユーザーなら無料なんだけど、
それ以外の部分に条件がいくつか付けられてるのよ。
エックスサーバー・さくらのレンタルサーバー・お名前.comレンタルサーバーのいずれも
フォントプラングインが使えるのは3ドメインまで。
そしてフォントプラグインが利用するには
・エックスサーバー・・・X10プラン、X20プラン、X30プラン
・さくらのレンタルサーバー・・・スタンダードプラン以上、さくらのマネージドサーバー
・お名前.comレンタルサーバー・・・レンタル―サーバー
の各プラン、サービスへの加入が必須なの。
またサーバーが提供してるフォントを利用してるWebサイトのプレビュー数が、
月間で75億回を超えるとフォントの適用が解除されちゃうのよ。
要するにWebサイトのプレビュー数が月間75億回を超えたら、
Webサイトのフォントがデフォルトに戻るってこと。
ただしさくらのレンタルサーバーについては、プレビュー数に上限が設けられてるのは
・スタンダードプラン
・プレミアムプラン
のみで、それ以外のプランにはプレビュー数の上限は無いわ。
月間プレビュー数75億回って目指してもなかなか達成できる数字じゃないから、
あまり気にしなくて良いとは思うけど、一応プレビュー数によってフォントの適用が
解除されるということは頭に入れておきましょう。
フォントが追加できるプラグインを利用する
WordPressにはElementorのようなページビルダー系以外にも色んなプラグインが
あって、フォントが追加できるプラグインもあるのよ。
そのフォントが追加できるプラグインをWordPressにインストールすれば、
Elementorで使える日本語フォントを増やすことができるわ。
日本語のフォントが追加できるプラグインの代表的なものには
・Japanese font for TinyMCE
・Google Fonts Typography
なんかがあるのね。
Japanese font for TinyMCEで日本語フォントを追加
「Japanese font for TinyMCE」を使う場合は、WordPressの管理画面で「プラグイン」→
「新規追加」に進んで、画面右側の検索欄に「Japanese font for TinyMCE」と入力して
検索。
検索結果に表示された当該プラグインの「今すぐインストール」ボタンを押して、
インストールが完了したら「有効化」をクリックすればOK。
これだけでWordPressで固定ページや投稿ページの編集画面を開くと、
画面上部のツールバーにフォントメニューが追加されるの。
Wordで文章を書く時に、フォントメニューのプルダウンメニューを開いて使いたい
フォントを選択するでしょ。
あれと同じ要領でフォントを選択すれば、
Webサイトにデフォルト以外のフォントでテキストを書き込むことができるのよ。
Google Fonts Typographyを使って日本語フォントを追加
「Google Fonts Typography」も、WordPressにGoogle Fonts Typographyのプラグインを
インストールして有効化するところまで先のJapanese font for TinyMCEと同じ。
プラグインを有効化したら、
WordPressの管理画面で「プラグイン」→「インストール済みのプラグイン」に進んで、
Google Fonts Typographyの項目内にある「設定」をクリック。
そうするとWordPressのカスタマイザーが開いて、
カスタマイザーのオプションとしてGoogleフォントが追加されるの。
カスタマイザーに追加されたGoogleフォントを選択して「基本設定」に進み、
「ベースタイポグラフィ」の「フォントファミリー」の項目で使いたいフォントを検索して
指定すればOK。
基本設定内の「見出しのタイポグラフィ」や「ボタンや入力のタイポグラフィ」でフォントを
変更すれば、Webサイト内の見出しやボタンののテキストだけフォントを変えることが
できるわ。
Google Fonts Typographyを使うとGoogleフォントの日本語フォントが追加できるから、
どんなフォントが使えるかはGoogleフォントの公式サイトで確認してね。
細かくフォント設定するのはおすすめできない
WordPressのカスタマイザーで「高度な設定」に進むと、制作するWebサイトページの
セクションごとにテキストのフォントを変えることもできるのよ。
プラグインなんかを使ってデフォルト以外のフォントが使えるようになったからって、
あまり細かくフォントを変えるのはおすすめできないわね。
1つには、セクションごとのように細かくフォントを変えると、
Webサイト全体の統一感が無くなってかえって見た目が良くないの。
テキストが見にくい読みにくいってことにもなるから、
リピートされずにプレビュー数が伸びないことにも繋がっちゃうわ。
それから細かくフォントを変えることで、
Webサイトにアクセスした時に全体が表示されるまでの時間が少し長くなるのよ。
Webサイトを見る側からすると多少表示が遅くても大きな問題は無いんだけど、
Webサイトを作ったり運営する側にすると表示時間が長いのは大きな問題なの。
Googleなどの検索エンジンで関連ワードが検索された際、
表示時間の長いWebサイトは上位に表示されない可能性が高いのね。
多くの検索エンジンは順位を決めるアルゴリズムを公表してないものの、
サイトの表示時間も検索順位を決める重要な要素の1つと言われてるわ。
だから1つのWebサイト内で細かくフォントを変えると、Webサイトの表示時間が
少し長くなって検索順位を下げ、結果的にプレビュー数が伸びないってことに
繋がっちゃうのよ。
プログラミングコードを使ってフォントを追加することもできる
Elementorで使える日本語フォントを増やす方法をいくつか紹介したけど、
もう1つプログラミングコードを使う方法もあるのよ。
「WordPressのようなノーコードツールを使ってWebサイトを作るのに
プログラミングコードを使うのか？」って思う人も居るかもしれないわ。
でもね、長々とよく分からないプログラミングコードを書くわけじゃなくて、
用意されてるプログラミングコードをコピーして指定位置に貼り付けるだけなの。
まずWordPressで「プラグイン」→「新規追加」に進んで、
画面右側の検索窓に「head」と入れて検索するのね。
検索結果の中に「Head、footer and Post injections」っていうプラグインがあるはずだから、その「今すぐインストール」を押して、インストールが終わったら「有効化」しておくの。
プラグインをインストールしてWordPressの「設定」から「Header and Footer」を選ぶと、
画面右側中央辺りに「
コードが書き込める欄が表示されるわ。
次にフォントファイルをダウンロードする時にも使った「Google フォント」という
サイトにアクセスして、使いたい日本語フォントを選択するのよ。
さらに使いたい文字の太さを選んで右側の「Select this style」をクリックすると、
「Selected family」という別ウインドウが現れるわ。
その別ウインドウの「Use on the web」の項目にプログラミングコードが記載されてるのよ。
それをコピーして、WordPressの「
PAGE SECTION INJECTION」に貼り付ければ日本語フォントが使えるようになるの。
ただこの方法、
ちょっと面倒なのとある程度プログラミングコードが分かってないと使いにくいわ。
だからあんまりおすすめしないんだけど、プログラミングコードを使う方法だとフォントを
細かく設定してもWebサイトの表示時間が長くならないというメリットがあるのよね。
テキストを画像にしてWebサイトに貼り付ける
かなり強引な方法だけど、Webサイトに使うテキストを画像にすることでElementorで
使えないフォントを使えるようにすることもできるわ。
通常はElementorでWebサイトを作る時には、
追加したセクション内に直接テキストを書き込む形になるのよね。
これだとElementorで使える日本語フォントが限られてるから、
これまでに紹介したような方法で使える日本語フォントを増やさないといけないの。
でもWordやExcelなんかでWebサイトで使うテキストをあらかじめ作り、
ペイントなどを使って画像として保存しておくのよ。
そしてElementorでWebサイトを作る際に、テキストを書き込む場所に
あらかじめ作って画像として保存しておいたテキストを挿入するってわけ。
WordやExcelだとデフォルトでもたくさんの日本語フォントが使えるから、
ファイルのダウンロード・アップロードやプラグインのインストールが不要だわ。
また文字の大きさや色を変えたり、影を付けて立体的にするなどの効果を
加えたりするのもWordやExcelなら簡単にできちゃうのよ。
ただ正直なところ、先に紹介した方法よりも手間がかかるし、
Webサイトを作るのに融通が利かなくなるし、スマートな方法とは言えないのよねぇ。
だからこの方法もあまりおすすめはしないけど、ファイルのアップロードやプラグインの
インストールがよく分からないという場合に試してみると良いんじゃないかしら。
まとめ
Elementorで使える日本語フォントを増やす方法についていくつか紹介したわ。
どれもちょっと手間はかかるけど、面倒なのは最初だけで導入しちゃえば、
あとは自由に使えるのよ。
デフォルトのフォントだとどうしてもオリジナリティに欠けるWebサイトになるから、
Elementorを使うならぜひ日本語フォントを追加して、
オリジナリティ溢れるWebサイトに仕上げてね。
