はてなブログのブログタイトルのカスタマイズ・コピペで簡単にできる!

はてなブログのブログタイトル(自分のブログ名)はオリジナルだと、ちょっと味っ気ないですよね。

自分のブログに合うようにブログタイトルをカスタマイズして、他のサイトと差別化を図りましょう。

ブログタイトルのカスタマイズ

私がやっているはてなブログのブログタイトルは、customize-testと言ってカスタマイズの練習をしているブログなのですが、ブログタイトルはこんな感じです。

はてなブログ ブログタイトルのカスタマイズ

背景の色も白だし、タイトルも左に寄っているし、文字も小さいのでちょっと変更してみました。

はてなブログ ブログタイトルのカスタマイズ

背景をナビゲーションバーと同じ色にし、文字も大きく、白に変えてみました。ナビゲーションバーの設置方法は「Innocentにグローバルメニューをコピペで設置する方法」を参考にどうぞ。

ブログタイトルに画像を使う人も多いですが、高速化をしたいのならお勧めしませんので。

一昔前はみんな画像を貼っていたと思うのですが、写真ブログ以外は特にこだわりがなければ、画像を使わない方がユーザビリティも上がります。

 

ブログタイトルのフォントサイズ、色、背景を変える方法

カスタマイズのコードを張る場所は、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」です。

はてなブログ ブログタイトルのカスタマイズ

まずは、タイトルの背景とタイトルの色、フォントサイズを変えるコードです。

1行目のbackgroundの#00bfffを、任意のカラーコードに変えると、タイトルの背景色が変わります。

  • 黒・・・#000000
  • 赤・・・#ff0000
  • 青・・・#0000ff

カラーは原色大辞典よりどうぞ。

4行目のcolorの#以降を変えると、文字色が変わります。

5行目のfont-sizeは文字の大きさで、2emはブログで使っているフォントの2倍の大きさと言う意味なので、任意の大きさに変えましょう。

  • 1.2em・・・1.2倍の大きさ
  • 1.5em・・・1.5倍の大きさ
  • 3em・・・3倍の大きさ

今の段階では、こんな感じに表示されます。ブログタイトルの枠が大きいですね。しかも左に寄っているのでアンバランスだし・・・。

はてなブログ ブログタイトルのカスタマイズ

ブログタイトルを真ん中に位置し、ヘッダー狭める方法

次に、文字を真ん中に位置し、ヘッダーを狭くします。下記コードを同じデザインCSSに貼り付けます。

2行目のpadding-topはタイトル上の余白を、padding-bottomはタイトル下の余白をどのくらいにするかと言うものです。

私は狭くてよかったので0pxにしていますが、お好みでサイズを変えて下さい。

はてなブログ ブログタイトルのカスタマイズ タイトルを真ん中に持ってくる方法

もしヘッダーの幅はそのままでタイトルを真ん中に持ってくるだけなら、上のコードは使わずに、以下のコードだけで大丈夫です。若干太いですが、ブログタイトルの大きさを変えたら問題なさそうですね。

はてなブログ ブログタイトルのカスタマイズ タイトルを真ん中に持ってくる方法

#blog-title {
text-align: center;
}

 

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

ブログタイトルのフォントを変えたい場合は、Google fontを使って変えるのが簡単です。

以下に9つの文字例があるので、気に入ったもので設定してみて下さい。Google fontで確認できます。

はてなブログ ブログタイトルのフォント変更する方法

気に入った文字の番号のCSSを下記からコピペして、タイトル下に貼り付けて下さい。場所・「ダッシュボード」→「デザイン」→「レンチマーク」→「ヘッダ」→「タイトル下」

はてなブログ グローバルメニュー カスタマイズ Innocent

  1. <link href=”https://fonts.googleapis.com/earlyaccess/mplus1p.css” rel=”stylesheet” />
  2. <link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” />
  3. <link href=”https://fonts.googleapis.com/earlyaccess/hannari.css” rel=”stylesheet” />
  4. <link href=”https://fonts.googleapis.com/earlyaccess/kokoro.css” rel=”stylesheet” />
  5. <link href=”https://fonts.googleapis.com/earlyaccess/sawarabimincho.css” rel=”stylesheet” />
  6. <link href=”https://fonts.googleapis.com/earlyaccess/sawarabigothic.css” rel=”stylesheet” />
  7. <link href=”https://fonts.googleapis.com/earlyaccess/nikukyu.css” rel=”stylesheet” />
  8. <link href=”https://fonts.googleapis.com/earlyaccess/nicomoji.css” rel=”stylesheet” />
  9. <link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />

次に以下のコードの「ここに貼る」部分を任意のものにし、デザインCSSに貼れば完成です。

  1. Mplus 1p
  2. Rounded Mplus 1c
  3. Hannari
  4. Kokoro
  5. Sawarabi Mincho
  6. Sawarabi Gothic
  7. Nikukyu
  8. Nico Moji
  9. Noto Sans Japanese

例えば8番を選ぶと、こんな感じになります。(日本語用のフォントなのでcustomize-testをカスタマイズテストに変更しました)

はてなブログ ブログタイトルのフォント変更する方法

#title{
font-family: “Nico Moji”;
font-size: 30px;
letter-spacing: 15px;
}

ちなみにfont-sizeで文字の大きさを変え、letter-spacingで文字と文字の間隔を変えます。

<参照記事・ミニマムコラム

グーグルフォントを使と、こっちのCSSの文字サイズが反映されるので、最初に紹介した文字サイズは反映されません。

最後に

ブログタイトルはブログの顔なので、他のサイトと差別化を図ってインパクトがあるもの、もしくは覚えやすいものにしたいですね。

その他のカスタマイズは、「はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめ」からどうぞ。Lazy Loadで高速化や、サイドバーに画像リンクの貼り方など色々なカスタマイズを紹介しています。