【カスタマイズ】コピペで簡単！タイトルのフォント＆見出しを変更する方法

こんにちは、まほろばんです。

先日、ブログのデザインテーマを変更し、
いろんなカスタマイズに挑戦しています。

この記事では、はてなブログ初心者に向け、
タイトルのフォントと見出しを変更する方法をご紹介します。

コピペだけで簡単にできる作業です。
それほど難しくありませんので、参考にしていただければ幸いです！

では、ご紹介していきましょう！

f:id:mahoroban:20180713162203p:plain

タイトルのフォントを変更
- ①HTMLの設定方法
- ②デザインCSSの設定
「見出し」デザインの変更
- 選んだ見出しのデザインはこちら
まとめ

タイトルのフォントを変更

つい先日、はてなブログのデザインテーマを
「Brooklyn」から「Minimalism」に変更しました。

変更理由や方法などは、こちらの記事にまとめています。

www.mahoroban.com
その作業のおかげで、ずいぶんとブログがスッキリしたので、
タイトルや見出しなどをカスタマイズしようと考えました。

まずは、タイトルのフォントから変更します。
作業手順は、「ミニマムコラム」のアズさんの記事を参考にしました。

いつもありがとうございます！

ここから作業手順をご紹介しますが、カスタマイズするときは、
必ずバックアップをとっておいてください。自己責任でお願いします。

①HTMLの設定方法

まずはじめに、「デザイン」→「カスタマイズ」にいきます。
そこから、「ヘッダ」の「タイトル下」に下記のコードを貼り付けます。

f:id:mahoroban:20180713163327j: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" />

②デザインCSSの設定

続いて、デザインCSSの設定をします。

場所は、先ほどと同じように「デザイン」→「カスタマイズ」。
その一番下に「デザインCSS」という欄があります。

f:id:mahoroban:20180713164142j:plain

ここに下記の記述をコピペします。

#title{
font-family: "XXXX";
font-size: 65px;
letter-spacing: 15px;
}

・font-family フォントの種類
・font-size フォントサイズ
・letter-spacing フォントとフォントの間隔

フォントの種類は、 XXXXのところを下記に変更すると変わります。

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

ここで好きなフォントを選んだら、①の手順で設定した不要な記述は削除します。

ぼくの場合、「Rounded Mplus 1c」を選んだので、
XXXXにRounded Mplus 1cをコピペしました。

そして、①に入力した上から２つ目の記述、
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

だけを残して、他の８つの記述を削除しました。

完成したタイトルがこちら。
ちょっと丸みのあるポップな仕上がりです！

f:id:mahoroban:20180713165327j:plain

フォントの変更作業は、以上になります。

「見出し」デザインの変更

続いて、「見出し」を変更します。

この作業は、サルワカさんの記事を参考にしました。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

いろんなデザインがまとめられていて、とっても便利です。
ありがとうございます！

選んだ見出しのデザインはこちら

ぼくは、見出しの大きさによって３つのデザインを選びました。

①「タイトル」

まずは、ブログタイトル。
水色の背景色に、青い下線をひいたデザインです。

コードは下記になります。

h1 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #eaf3ff;/*背景色*/
border-bottom: solid 3px #516ab6;/*下線*/
}

これを「デザイン」→「カスタマイズ」から
いちばん下にある「デザインCSS」に貼り付けます。

タイトルのフォント変更でも使った欄ですね。

f:id:mahoroban:20180713164142j:plain

②「大見出し」

続いて大見出しがこちら。
青いラインで文字を囲いました。

ここで注意することがあります。
サルワカさんの記事にも説明がありますが、
コードは、全てh1から始まっています。

ここを書き換えると、他の大きさの見出しが変わります。
はてなブログの見出し欄にある「大見出し」は「h3」です。

なので、最初のh1をh3にしてコピペすればいいだけです。

h3 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
}

③「中見出し」

最後が「中見出し」です。
こちらは、ラインだけですが、２色にしています。

中見出しのサイズは、「h4」です。
なので、「h1」のところを全て「h４」に書き変えてからコピペです。

h4{
border-bottom: solid 3px #cce4ff;
position: relative;
}
h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}

簡単ですね！

ぼくの場合は、青い色で統一感を出しました。
いろんな色やデザインがあるので、お好きなものを選んでみてください！