Google chrome（グーグル ク...
続きを読む
ワードプレスでウェブサイトやブログを運営していると、使いたいフォントが無い事があった経験はありませんか？筆者も特に日本語フォントは選択肢が少なく、既存のフォントから仕方なく一番使いたいフォントに近いものを選んでいました。
しかし、今回ご紹介する方法を使えば、Google Fontsにある様々なフォントをワードプレスでも使うことができてしまいます！
今回の記事では、Google Fontsにあるフォントをワードプレスで使う方法をスクリーンショット付きで詳しく紹介します！
まず初めに、Google Fontsで好きなフォントを選びます。
Google Fontsには約30種類以上の日本語フォントがあるので、WEBサイトやブログの雰囲気に合うものを探して選ぶことができます。
↑Google Fontsから、好きなフォントを探します。
↑フォントを選んだら、画面右上の「Get font」をクリックします。
今回は「Yusei Magic」というフォントを見本に紹介していきます！
↑次の画面で、画面右側の「Get embed code」をクリックします。
↑画面右に表示されている2つの埋め込みコードの内、上に表示されているコードの「Copy code」をクリックします。
ここまででGoogle Fonts側での必要な作業は終了です！
Google Fontsで好きなフォントの埋め込みコードをコピーしたら、ワードプレスにコードを貼り付けていきます。
※今回はワードプレステーマ「Cocoon」を使用している場合を見本に紹介します。（基本的にその他のテーマでも方法は同じです）
↑ワードプレスのメニューから「外観」→「テーマファイルエディター」をクリックします。
↑「テーマを編集」の画面が表示されたら、右側のテーマファイルから「テーマヘッダー（header.php）」をクリックします。
header.phpの中の「</head>」の直前に、先ほどGoogle Fontsでコピーした埋め込みコードを貼り付けます。元からあるコードを消さないように注意します。（画像赤枠部分）
画面最下部の「ファイルを更新」をクリックします。
※テーマファイルを編集するときは、必ず事前にメモ帳などにバックアップをとっておきましょう！
ここまで完了したら、あとはカスタムCSSを貼り付けるだけです（簡単です！）
↑ワードプレスのメニューから「外観」→「カスタマイズ」をクリックします。
↑カスタマイズの画面から「追加CSS」をクリックします。
↑追加CSSに下記のコードをコピペしてください。（フォントのところはGoogle FontsのCSS Class参照）
body {
font-family: "Yusei Magic", sans-serif;
font-weight: 400;
font-style: normal;
}
↑font-family 〜の箇所はGoogle FontsのCSS Classの箇所を参照（上記画像）
↑サイトのフォントが変わりました！
今回の記事では、Google Fontsのフォントをワードプレスのサイトに取り入れる方法を紹介しました！フォントは、WEBサイトやブログの雰囲気を左右する大きな要素です。
ぜひ、今回の記事を参考にお気に入りのフォントを見つけて、ワードプレスのサイトに取り入れてみてください！
2024-10-16
Wednesday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
記事の検索数やGoogleにインデックス...
続きを読む
