[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】

スポンサーリンク

ホームページを見ながら、デザインのメリハリをつけたいと思いました。そこで、今回はウェブフォントの変更をした話を書きます。

スポンサーリンク

コンテンツ管理システムとテーマ

このホームページはWordPressCocoonを利用して管理しています。

  • コンテンツ管理システム:Wordpress
  • WordPressのテーマ:Cocoon
  • 利用したウェブフォント:Google Fonts

利用しているシステム・テーマによって、CSSの読み込み・記述をどこにするか変わってきますよー

Google Fontsでフォントを選ぶ

今回はGoogle Fontsのサイトのフォントを利用しました。

Google Fonts
Making the web more beautiful, fast, and open through great typography

「Language(言語)」から「Japanese(日本語)」を選ぶと、日本語対応のフォントに絞り込まれますので、好きなフォントをいくつか選んでは、 「+ Select this style」をクリックします。

Amazonでショッピングカートに商品を入れていくように、フォントを選んでいきます

必要なフォントを選んだら、「View your selected families(選択したフォントファミリーを表示する)」のボタンを押します

今回は「小杉ゴシック」「M Plus 1p(Light 300)」を選びました。本文には「Noto Sans JP(これはCocoonテーマで指定)」、強調には「小杉ゴシック」、吹き出しには「M Plus 1p」を使う予定です。

「Download families」でフォントをダウンロードすることもできますが、今回は「Embed(埋め込み)」のタブに切替えます

HTMLに記述するコード

<link href="https://fonts.googleapis.com/css2?family=Kosugi&family=M+PLUS+1p:wght@300&display=swap" rel="stylesheet">

こちらはHTMLのコードです。HTMLのヘッダー部分に記述すると、指定したウェブフォントをGoogle Fontsに読み込みにいきます(外部CSSで指定しています)。

このサイトの場合は、Wordpressにログインして、設定の「外観」→「テーマエディター」から、編集するテーマが「Cocoon」であることを確認して、「tmp-user」の「head-insert.php」ファイルを編集しました。

ファイルの下の方に貼り付けることで、サイトのどのページでもウェブフォントが読み込まれるようになります。

CSSに記述するコード

font-family: 'Kosugi', sans-serif;
font-family: 'M PLUS 1p', sans-serif;

こちらはCSSのコードです。要素のスタイル指定の中でfont-familyに使いたいフォントの方を記述します。

このサイトの場合はさきほど同様に、設定の「外観」→「カスタマイズ」から、「追加CSS」を編集しました。

.speech-balloon {
    font-family: 'M PLUS 1p', sans-serif;
    font-size: 120%;
    font-weight: 500;
    line-height: 1.3em;
}

例えば、「吹き出し」のフォント(や行の高さなど)については、上記のように「font-family」を指定しています。

テーマ(Cocoon)全体(本文)のフォント

テーマCocoonでは、本文全体のフォントは簡単に指定できます。

WordPressにログインし、設定の「Cocoon設定」から「全体」を選びます。

「サイトフォント」の「フォント」から好きなフォントを選びます(ここでは「Noto Sans JP」)。

このようにすることで、好きなフォントをイメージに変更することができました

ご参考になれば、嬉しいです。

こちらもどうぞ

ブログ村ランキングに参加しています。
ポチっと応援していただけると嬉しいです。

PVアクセスランキング にほんブログ村ブログランキング・にほんブログ村へ
ホームページ運用
\記事が役に立ったらシェアしてね/
\ちいラボをフォローする/
スポンサーリンク
ちいラボ
タイトルとURLをコピーしました