WordPressの優秀で、かつ無料のテーマであるCocoonでかわいい特殊文字のようなフォントの追加方法を紹介します。
以下のブログ村ではカテゴリーごとに、記事を探すことができます。
WordPressに関するたくさんの記事を見たい方は以下ボタンよりお越しください。
[temp id=2]Cocoon設定
元々、Cocoon設定にて「明朝体」「ゴシック」「メイリオ」などのよく使うフォントの変更はできますが、種類は５つほどしかないので、ここだけかわいい文字にしたい！というようなフォントはありません。
一応、この記事の趣旨とは反しますが、紹介します。
①Cocoon設定に行きます。
②全体をクリックします
③少しスクロールしたら
「サイトフォント」が出てくるので
ここのフォントにて変更します。
・終わり。簡単ですね
Googleフォント
Googleフォントをご存じない方もいらっしゃるかもしれませんので、少しご紹介させていただきますが、
先にURLを張っておきます。使い方は以下で説明します。
ではまず、画像をご覧ください。
どうでしょうか？
GoogleフォントにはCocoonにはないようなたくさんのフォントが存在します。
丸文字、シャープな文字、太い文字、かっこいい文字、かわいい文字など多種多様です。
機能紹介
では、便利な使い方を紹介していきます。
検索機能
ページ上部にて好きなフォントがある場合検索する事ができます。
プレビュー表示
「彼らの機器や装置はすべて生命体だ」
と書かれているのが、基本のプレビューですが、実際に書きたい文字がどのように表示されるかわからず、困りますね。
いいえ！困りません。サイト上部の検索の横の窓に「Type Something」と書かれているところがあります。
そこに好きな文字を入れることで、その文字をプレビューした状態で一覧を見ることができます。
とても便利ですので、試してみてください。
Googleフォント使い方
とても簡単なのでごらんください。
まずは、使いたいフォントをクリックしてください。
そうしたら、以下の画像に変わります。
「彼らの機器や装置はすべて生命体」の右にある
＋Select this style をクリックしたら以下になります。
※もし出てこない場合は右上の四角形が３つと＋で構成されているマークをクリック
するとこのような画面になります。
ここからが大事です。
●link 〇＠importとあり、
「<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap” rel=”stylesheet”>」
と書いている部分をCocoonのhead内に、
その下の、CSS rules to specify families の
「font-family: ‘Sawarabi Mincho’, sans-serif;」
と書いている部分をCocoonのCSSに、貼り付けます。
ではその貼り付け方法を説明いたします。
※貼り付けるコードは選んだフォントによって異なりますので、本記事のコードをコピペしないようお気を付け下さい。
CocoonにGoogleフォント貼り付け
貼り付け方法をご紹介する前に注意点があります。
今からCocoon内のphpを触りますので、間違えて変なところを触ってしまうと実際にそのコードを見ないと修復不可能な状態になりますので大変ご注意ください。
とまあ、強めに言いましたが、大丈夫です。
わかりやすく丁寧に解説していきますので、しっかりこの記事を読んでいれば大丈夫です。
headに張り付け方法
「外観」→「テーマエディター」で上記の画面みたいになります。
そしたら、右側のテーマファイルと書かれた部分の「tmp-user」→「head-insert.php」をクリックすると完全に上記の画面になります。
そこに、先ほどの
●link 〇＠importの下の
「<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap” rel=”stylesheet”>」
を貼り付けます。（赤色の部分だけだよ！鍵括弧もいらないよ）
上記画像では、12.13行目に当たります。何かの間に入れるのではなく、一番下に張り付けましょう。
！1P アドバイス:貼り付ける前に元々書いてあるコードをメモや何かに保存しておくことで、もしものための備えになります。
CSSに張り付け方法
CSSの書き方はみなさんご存じですか？
プログラミング言語の一種で、（正確には違う。Style Sheetといいます。）書き方にルールがあります。
CSSの書き方はこちらの記事で簡単解説していますので、ご確認ください（準備中）
先ほど同様、「外観」→「テーマエディター」で下記の画面になります。
右のテーマファイルが「Style.css」になっていたらOKです。
上記画像の３５行目をご覧ください。
私はheaderのフォントを変えたいのでheaderを指定していますが、変えたい部分は人それぞれなので、ご閲覧者様の変えたい部分を指定して、
「font-family: ‘Sawarabi Mincho’, sans-serif;」
をコピペしましょう。（鍵括弧はいらないよ）
以下のブログ村ではカテゴリーごとに、記事を探すことができます。
WordPressに関するたくさんの記事を見たい方は以下ボタンよりお越しください。
[temp id=2]以上で終了です。もしできない場合、何かが間違っているので、見直してみてください。
それでもうまくいかない場合は下記より気軽にお問合せ下さい。（SNSより、画像付きで問い合わせいただいた方がお答えしやすいです。）
