はてなブログ・ブログタイトルのフォント変更と記事タイトルのデザイン

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

ブログタイトルのフォント変更

「ブログタイトル」のフォントを変更するカスタマイズです。

カスタマイズは下記サイトを参考にさせていただきました。

デザインCSS

まず、「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」に以下のコードを貼り付けます。

#title{
font-family: “XXXX“;/* フォントを指定 */
font-size: 65px;/* フォントサイズを指定 */
letter-spacing: 15px;/* フォントの間隔指定 */
}

XXXXに以下のお好きなフォントを指定してください。

サイズや間隔もブログに合わせて変えてください。

Mplus 1p
Rounded Mplus 1c
Hannari
Kokoro
Sawarabi Mincho
Sawarabi Gothic
Nikukyu
Nico Moji
Noto Sans Japanese

フォントのデザインは下記サイトを参照してください。

ヘッダ

次に、「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「ヘッダ(→タイトル下)」に上のコードで指定したフォントのリンクを貼り付けます。

Kokoroを指定したならKokoroのリンクだけでOKです。

それぞれ指定したフォントのリンクを1つ貼り付けてください。(指定のフォントを変更すればリンクも変更してください)

Mplus 1p

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

Rounded Mplus 1c

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

Hannari

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

Kokoro

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

 
Sawarabi Mincho
 

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

Sawarabi Gothic

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

Nikukyu

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

Nico Moji

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

Noto Sans Japanese

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

記事タイトルのデザイン

「記事タイトル」のデザインは下記サイトを参考にしてください。

いろいろありますのでブログに合ったデザインにしてみてください。