Rikiによる知識財産の共有

【素敵なおじさん化計画中!】

【ブログを見やすくする12】タイトルのフォントを変える

どうもみなさん!Rikiです!

読みやすいブログを作るためにデザインを試行錯誤していて、今回は第12弾となります。

前回までは、目次のデザインを変える方法を記事にしてきました。

今回からはタイトルのデザインを変える方法をお伝えします。

 

ブログを見やすくする12〜タイトルのフォントを変える〜

タイトルのフォントを変える方法

HTMLの設定

まずはじめにHTMLの設定をします。

”デザイン”→”ヘッダ”→”ヘッダ下”をクリックします。

f:id:Riki-Riki:20200319174716p:plain

 

そして、以下のテキストをコピペします。

 

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

 

これはグーグルフォントを使用するために入力する必要があります。

これを入力しておくことで以下のフォントを使用することができます。

 

Mplus 1p

Rounded Mplus 1c

Hannari

Kokoro

Sawarabi Mincho

Sawarabi Gothic

Nikukyu

Nico Moji

Noto Sans Japanese

 

デザインCSSの入力

次にデザインCSSに入力します。

”デザイン”→”デザインCSS”をクリックします。

f:id:Riki-Riki:20200319174736p:plain

ここに以下のテキストを入力します。

 

#title{     /*タイトルの編集*/

font-family: "Sawarabi Gothic";     /*フォント*/

font-size: 65px;     /*文字の大きさ*/

letter-spacing: 15px;     /*文字間隔*/

}

 

それぞれの項目の意味はメモに書いてある通りです。

フォントを変えるには”Sawarabi Gothic”の部分を先に記述したフォントの種類を記入することで変えることができます。

また数字部分を変えることで、文字の大きさと、文字と文字の間隔を変えることができます。

 

いろいろいじってみて、好きなデザインにしてみてください。

 

デザインCSSの入力方法は以下の記事にも書いてありますので参考にしてください。

https://www.riki-riki.com/entry/2020/02/26/224804

 

今後

これからはタイトルについてデザインを変える方法をお伝えしていこうと思います。これからも引き続き、ブログを見やすくする方法を調べてお伝えしようと思います。