副業ブログ収益化~ブログの見た目が激変? タイトルのフォントを変える方法 ~ ’22年版

色々な文字フォント FIRE

こんにちは。ブログ初心者のアラフォーパパです。

初心者が故にやってしまいがちなミスの一つとしてブログのフォントをノーマルにしていることです。

素っ気な~いタイトルで訪問者の方にワクワクや興味を与えることができず、記事を読んでもらえない要因の一つになりかねないです。

一方でおもしろそう、おしゃれな人といった他とは違った個性や訪問者の方の五感をくすぐるようなデザインの場合、もうちょっとこのサイトを覗いてみたいなとなるかもしれませんよね。

記事を見てくれるブログ訪問者
記事を見てくれるブログ訪問者

へ~デザインがおしゃれでおもしろそうだな。

どんな内容を書いているんだろ。

このサイトの情報なら有用かもしれないな。

見てみよう。

すぐ去る<br>ブログ訪問者<br>
すぐ去る
ブログ訪問者

なんだこのサイトは??

タイトルが暗くてよく読みにくいな

別のサイトを見てみよう。



いろんなフォントデザインが載っている「Google Fonts」が多くのデザインを選べて且つ使いやすいのでこちらのサイトで変更する方法を紹介していきます。

Googleが提供するWebフォントのサービスで、無料で利用でき、さまざまな言語に対応しています 。

※但し、ブログサイト表示のスピードに影響が出る場合もありますのでご注意ください。

Google fontsで好みのフォントを選ぶ

私のブログタイトルは日本語なので言語を日本語指定。

言語の選択

いろんなフォントがありますが、これ!というものが決まったら、クリック。

(今回は、Dela…を参考に使用します。)

google fonts 追加手順2

フォントページが開いたら下部の方へスクロールし、下図のような+(プラス)をクリック。

右にあるプラスボタンをクリック

Googleフォント読み込み用コードCSSコードをコピーして後でcocoonに貼り付けます。

Googleフォント読み込み用コードは <link>の下にあります。


フォント情報をcocoonに反映する

あとはcocoonの設定ページに貼り付けるのみです。

読み込みコードを貼る場所

Cocoonのヘッダーの子テーマ【cocoon child】であることを確認し、下記順で選択
外観 ⇒ テーマファイルエディター ⇒右側の「テーマファイル」⇒tmp-user ⇒ head-insert.php

最下部にGoogleフォント読み込み用コードを貼り付け。

続いてCSSコードを貼り付けます。

cssコードを貼る場所

下記を追加

.logo-header a span{
font-family: ‘Dela Gothic One’, cursive; ←こちらにgoogle fontsから貼り付け
font-size:48px; ←希望のフォントサイズ
color: #1e0f4d; ←希望のフォントカラーNo(“フォントカラー”でググれば色んな色の番号が載ってます)


以上で完了です!


コメント

タイトルとURLをコピーしました