ブログ

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

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

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

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

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

    私がやっているはてなブログのブログタイトルは、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で高速化や、サイドバーに画像リンクの貼り方など色々なカスタマイズを紹介しています。