こんにちは。ブログ初心者のアラフォーパパです。
初心者が故にやってしまいがちなミスの一つとしてブログのフォントをノーマルにしていることです。
素っ気な~いタイトルで訪問者の方にワクワクや興味を与えることができず、記事を読んでもらえない要因の一つになりかねないです。
一方でおもしろそう、おしゃれな人といった他とは違った個性や訪問者の方の五感をくすぐるようなデザインの場合、もうちょっとこのサイトを覗いてみたいなとなるかもしれませんよね。
![記事を見てくれるブログ訪問者](https://selfgrowth.wp.xdomain.jp/wp-content/themes/cocoon-master/images/man.png)
へ~デザインがおしゃれでおもしろそうだな。
どんな内容を書いているんだろ。
このサイトの情報なら有用かもしれないな。
見てみよう。
![すぐ去る<br>ブログ訪問者<br>](https://selfgrowth.wp.xdomain.jp/wp-content/themes/cocoon-master/images/ojisan.png)
ブログ訪問者
なんだこのサイトは??
タイトルが暗くてよく読みにくいな
別のサイトを見てみよう。
いろんなフォントデザインが載っている「Google Fonts」が多くのデザインを選べて且つ使いやすいのでこちらのサイトで変更する方法を紹介していきます。
Googleが提供するWebフォントのサービスで、無料で利用でき、さまざまな言語に対応しています 。
※但し、ブログサイト表示のスピードに影響が出る場合もありますのでご注意ください。
Google fontsで好みのフォントを選ぶ
私のブログタイトルは日本語なので言語を日本語指定。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_292,h_-10/https://365day-morning.com/wp-content/uploads/2022/10/image-edited-1.png)
いろんなフォントがありますが、これ!というものが決まったら、クリック。
(今回は、Dela…を参考に使用します。)
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_1024,h_675/https://365day-morning.com/wp-content/uploads/2022/09/image-2-1024x675.jpg)
フォントページが開いたら下部の方へスクロールし、下図のような+(プラス)をクリック。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_642,h_206/https://365day-morning.com/wp-content/uploads/2022/09/image-1-1024x328.png)
Googleフォント読み込み用コードとCSSコードをコピーして後でcocoonに貼り付けます。
Googleフォント読み込み用コードは <link>の下にあります。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_320,h_439/https://365day-morning.com/wp-content/uploads/2022/09/image-2-744x1024.png)
フォント情報をcocoonに反映する
あとはcocoonの設定ページに貼り付けるのみです。
読み込みコードを貼る場所
Cocoonのヘッダーの子テーマ【cocoon child】であることを確認し、下記順で選択
外観 ⇒ テーマファイルエディター ⇒右側の「テーマファイル」⇒tmp-user ⇒ head-insert.php
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_295,h_474/https://365day-morning.com/wp-content/uploads/2022/09/image-3.png)
最下部にGoogleフォント読み込み用コードを貼り付け。
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_756,h_254/https://365day-morning.com/wp-content/uploads/2022/09/image-7-1024x347.jpg)
続いてCSSコードを貼り付けます。
cssコードを貼る場所
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_257,h_430/https://365day-morning.com/wp-content/uploads/2022/09/image-7.png)
![](https://sp-ao.shortpixel.ai/client/to_auto,q_lossy,ret_img,w_216,h_191/https://365day-morning.com/wp-content/uploads/2022/09/image-8.jpg)
下記を追加
.logo-header a span{
font-family: ‘Dela Gothic One’, cursive; ←こちらにgoogle fontsから貼り付け
font-size:48px; ←希望のフォントサイズ
color: #1e0f4d; ←希望のフォントカラーNo(“フォントカラー”でググれば色んな色の番号が載ってます)
コメント