以前仕事の関係でWordPressを扱うことがあった際に、会社概要だけ真面目(？)なフォントに変える事になって調べたのがきっかけです。自分が後で見直しても分かるよう細かい説明は省いています。PHPファイルを扱う部分があるので注意が必要です。
お品書き
- Google Fontsでフォントを選ぶ
- そのフォントに対応したhtmlとCSSのテキストデータをもらう
- WordPressにちょっといじって貼り付ける
- フォントが変わったか確認
Google Fontsとは、Googleが提供するWebフォントサービスです。サイト訪問者の端末に指定のフォントが無い場合、ネットワーク上からWebフォントを読み込み表示させるようになっており、今回はそのGoogle Fontsを利用して部分的にフォントを変更してみようという流れです。
フォントの変更作業
GoogleFontsでフォントを選ぶ
googlefontsと検索して、サイトをクリック。
LanguageからJapaneseを選択し、下の絞り込みで使いたいフォントを絞り込んでいく。
使いたいフォントをクリックして書体の太さを選ぶ。1種類しかない場合もある
右上のGetfontをクリック。
他のフォントをクリックしてたらそれもエントリーに含まれてるので必要ないフォントならゴミ箱マークで削除しておく。
上のGet emded codeをクリック。
フォントに対応したhtmlとCSSのテキストデータをもらう
ラジオボタンを<link>側にして上「thml」と下「CSS」のコードを保存する
とりあえずメモ帳にコピペしときます。
上がhtml用、下がCSS用。
WordPressにコードを貼り付ける
htmlの貼り付け
まずGoogleFontsを使うよとヘッダーに宣言します。
外観からテーマファイルエディターをクリック。
右側のtmp-usrのhead-insert.phpをクリック。
一番下にメモ帳にコピペしておいた「thml」コードを貼り付けます。
後で何をしたか分かるように、<?php //~~ ?>でコメントを残すといいかも。
書き換えたら下の「ファイルを更新」をクリックしてください。（結構忘れる）
フォントを変えるページをチェック
今回は固定ページの「免責事項」のフォントを変えてみようと思います。
ブラウザで該当ページを表示し、「F12」をクリックして開発者ツール(chromeはデベロッパーツール)を開く。
▼マークを開いて下っていってフォントを変更したい範囲のclassを探す。
ページ全体ならclass=”main”だと思うので調べなくてもいいかも。
クラス名を変えてCSSを貼り付け
class名がmainと分かったので、メモ帳にコピペした「CSS」のclass部分をmainに書き換える。
固定ページの「免責事項」(自分が変えたいページ)の編集画面から下にスクロールしていったら、このページのみに対応する「カスタムCSS」があります。
そこに先ほどmainに書き換えたCSSコードを貼り付けます。
右上の「保存」を忘れないように。
ページを確認するとフォントが指定のものに変わりました。他のページは変わっていません。
このフォントには漢字が含まれていないので代用フォントが使われています。
クラス名の指定で好きな所のフォントを変更
また、特定の段落だけフォントを変えたいという時はそこにclass名を指定するやり方もあります。
編集画面からフォントを変えたい段落（見出し、リストなど）をクリック。
右側の上、「段落」（指定したブロック）が間違いなく選ばれてるのを確認したら、「高度な設定」の「追加CSSクラス」に任意のクラス名を入力（半角英数、記号などルールがあるので要確認）。
今回はcherryにしてみました。
そのまま下にスクロールしてカスタムCSSのクラス名を.cherryに変更。「保存」クリック。
指定の「段落」ブロックのフォントのみが変わりました。
まとめ
クラス名を指定することで任意のページやブロックを好きなフォントに変える事が出来るようになります。フォントを使いすぎると表示の速度が遅くなりますので気を付けて下さい。
コメント