グーグルフォントを特定の箇所だけに設定する方法 ペライチコーディング 【応用編】
pera-professional
特定の箇所だけフォントを変えれば、デザイン性もアップします！
ペライチのサイトでフォントを変えたい時、ページ編集画面の「フォント変更」からフォントを変更している方が多いかと思います。
しかし、デフォルトの機能である「フォント変更」では、好みのフォントが見つからなかったり、フォントを指定すると「サイト全体」のフォントが変更されるデメリットがあります。
そこでこの記事では、ペライチで「Google font（グーグルフォント）」を使う方法と、特定の箇所だけに「グーグルフォント」を設定する方法を解説していきます。
特定の箇所だけフォントを変更できるようになれば、サイトのデザイン性も一気にアップしますので、是非最後までご覧ください。
コーディングを始める前に
ペライチで「グーグルフォント」を使うには、ペライチの「HTML埋め込み」機能を使って、コーディングで設定を行う必要があります。
そこで、前提条件として簡単な「コーディング知識」が必要となります。
ペライチでコーディングを行う際に必要な「コーディング知識」は、以下の記事で解説しておりますので、まずはこちらをご覧ください。
セクションタグの取得方法 ペライチコーディング【基礎知識】
ペライチでコーディングを始める際「セクションタグ」の取得方法は基礎となりますので、この記事で必ず覚えましょう。 「セクションタグ」を取得できれば、ブロックごとに…
ペライチ攻略ガイド 
グーグルフォントの使い方
「Google font（グーグルフォント）」とは、Googleが提供しているWebフォントサービスになります。
こちらで使えるWebフォントは、日本語から多言語まで対応しており、フォントの種類も多数用意されております。
また、お持ちのサイトで簡単に設定することができ、「商用利用」も無料で使用できます。
フォントの選択
では、実際に設定を行っていきますが、まずは使用するフォントを選択していきます。
以下より「グーグルフォント」のページへ進んでください。
Google fontはこちら
上記がホーム画面になりますが、日本語のフォントを探す際は「Language」をクリックして「Japanese」を選択してください。
日本語を選択すると、以下のように日本語のフォントが表示されます。
フォントの中から使用したいフォントが見つかりましたら、「フォント名」をクリックして次に進んでください。
今回は「Noto Sans Japanese」を選択していきます。
「フォント名」をクリックして、フォントページに移りましたら、次に「Get font」をクリックしてください。
このボタンをクリックすることで、後に設置する「タグ」の中にこちらのフォントが埋め込まれます。
また、今回はフォントを二種類使いますで、同様に「Noto Serif Japanese」も「Get font」をクリックしてください。
「グーグルフォント」では、多数のフォントを一度に使用することができ、日本語だけでなく多言語も同時に使用することができます。
埋め込みタグの取得方法
次に選択したフォントの「埋め込みタグ」を取得していきます。
この「埋め込みタグ」はペライチ側の設定で必要となり、取得した「タグ」を埋め込むことで、選択したフォントが使用できる仕組みとなります。
フォントを選択した後「Get font」をクリックすると、上記のページに移行します。
こちらのページで赤枠の「Get embed code」をクリックしてください。
「Get embed code」をクリックすると、上記のページへ移行します。
取得する「埋め込みタグ」は赤枠の箇所になりますので、赤枠内の「Copy code」をクリックしてコードをコピーしてください。
こちらで「グーグルフォント」の設定は完了となりますが、今回は二種類のフォントタグを取得しておりますので、選択した二種類のフォントがペライチで使えるようになります。
ペライチでフォントを設定する
では、次にペライチ側の設定を行っていきます。
フォントを変更したいサイトの「ページ情報編集」をクリックしてください。
タグを埋め込む
「ページ情報編集」をクリック後、「タグの埋め込み」を選択してください。
次に赤枠の「headタグ内の埋め込み」の中に、先ほどコピーした「埋め込みタグ」を貼り付けてください。
タグの貼り付けが完了しましたら、最後に「保存」をクリックしたら完了です。
CSSでフォントの設定を行う
タグの埋め込みが完了したら、次にCSSを使って指定の箇所だけに「フォント」を設定していきます。
まずは赤枠の「グーグルフォントの設定方法」と記載のある、タイトルのフォントを変更していきます。
セクションIDの取得
こちらのタイトルには「Noto Serif Japanese」を設定していきますので、まずはブロックの「セクションID」を取得してください。
こちらのブロックのセクションIDは「section-4」になりますので、こちらのIDに対してCSSでフォントの指定を行っていきます。
CSSのコードは「埋め込みタグ」を取得した、「グーグルフォント」のページに記載されておりますので、以下からご確認ください。
上記の「赤枠」の部分だけコピーしてください。
こちらのコードで「section-4」に対して、「Noto Serif Japanese」のフォントを設定していきます。
ペライチでCSSを記述する方法
では次に、ペライチでCSSを使う方法を解説していきます。
ブロックの選択画面で、以下の「HTML埋め込み(横幅フル)」を選択して、こちらにCSSを記述していきます。
フォントを変更するブロックのセクションIDが「section-4」になりますので、実際に記述するコードは以下になります。
#section-4 {
font-family: "Noto Serif JP", serif;
font-weight: 400;
font-style: normal;
}こちらのコードを<style></style>で囲い、以下のように記述して「保存」をクリックしてください。
上記のCSSを記述し「保存」をクリックしたら、こちらでフォントの設定が完了です。
以下のように、フォントが変更されているのを確認してください。
上記のようにタイトル部分だけ、「Noto Serif Japanese」のフォントに変更されております。
特定の箇所だけフォントを変更する方法
では次に、ブロック内の特定箇所だけフォントを変更する方法を解説していきます。
特定の箇所だけフォントを変える事で、デザイン性が一気にアップしますので、是非試してみてください。
今回は赤枠の「フォントが変わればデザイン性もアップ！」のフォントを変更していきます。
前回と同様に、まずはこちらのブロックの「セクションID」を取得してください。
こちらのブロックの「セクションID」は「section-5」と分かりました。
では次に、指定箇所の「class名」を取得していきます。
「class名」とは、HTMLタグに付けられた名前で「class名」を取得することで、ブロック内の細かい指定ができるようになります。
指定の箇所の「class名」は、以下の名前が設定されておりました。
u-mbmd p-article-lead-text pera1-removableペライチでは、上記のようにタグに「class名」が何個も設定されています。
名前は「半角スペース」で区切られており、今回は三個の名前が付けられてました。
この中から指定箇所だけに設定された「class名」を探して、そちらの「class名」に対してCSSを記述していきます。
p-article-lead-text指定箇所だけに設定されている「class名」は上記となりますので、こちらの「class名」を使ってCSSを記述していきます。
なお、こちらの箇所には「Noto Sans Japanese」のフォントを設定しますので、先ほどと同様に以下の箇所からCSSのコードをコピーしてください。
セクションIDが「section-5」で、フォントを変更する箇所のclass名が「p-article-lead-text」になりますので、以下のようにCSSを記述します。
#section-5 .p-article-lead-text {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}上記のCSSをコピーしましたら、ペライチの「HTML埋め込み(横幅フル)」に記述をしていきます。
先ほどのCSSコードの下に記述をしてください。
CSSを記述しましたら、こちらで指定箇所のフォント設定が完了です。
以下のように、フォントが変更されているのを確認してください。
元々のフォントと似ているので、少し分かりにくいかもしれませんが、赤枠の箇所だけ「Noto Sans Japanese」のフォントに設定されております。
以上が、指定箇所だけにフォントを設定する方法になりますが、万が一サイト内の全てのテキストに「グーグルフォント」を設定したい場合は、以下の方法で設定ができます。
全てのテキストにフォントを設定する方法
「グーグルフォント」のフォントを、サイト内の全てのテキストに設定する場合は、以下のコードになります。
body {
font-family: "Noto Serif JP", serif;
font-weight: 400;
font-style: normal;
}上記の通り「body」に対してフォントのCSSを記述することで、サイト内全てのテキストのフォントを変更することができます。
まとめ
今回はペライチで「グーグルフォント」を使う方法を解説しましたが、最初は「class名」などを取得するのが難しいかと思います。
ですが、こちらの記事を何度も見直してトライしていく内に、頭が覚えていきますので安心してください。
また、今回ご紹介した「特定の箇所だけフォントを変更」する方法は、デザイン性が一気にアップするテクニックですので是非試して欲しいのですが、フォントの変更は「HTML埋め込み」が必須となり、ペライチの「有料プラン」のみで使用可能な機能となります。
当社では様々な機能が使える「レギュラープラン」以上をおすすめしております。是非あなたもペライチでサイト制作に挑戦してみてください。
「ペライチ」でサイトを作るなら、機能が豊富な「レギュラープラン」以上がおすすめです！
