[ライブドアブログ]ヘッダー(タイトル)のデザインをカスタマイズしよう

こんにちは。ユージーン(@Eugene_no2)です！

ライブドアブログの初心者向けに、デザインをカスタマイズする方法をまとめています。

このページでは、ブログのヘッダー部分（タイトル部分）のカスタマイズ方法について解説します。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

まず、ブログのCSS編集画面を開こう

まず、ライブドアのブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【カスタマイズ】→【CSS】と進みます。

ブログタイトルのデザインを変更するには、主にこのCSSの中の記述をいじっていきます。

CSSって何？という方でも分かるように解説していますが、もう少し詳しく知りたいという方は、「HTMLとCSSのこれだけは知っておこう！」をご覧ください。

ブログタイトルのデザインをカスタマイズする

ブログタイトルの部分のデザインを変更するには、CSSの中の、

#blog-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin: 30px 0;
    letter-spacing: 1px;
    font-family: ‘メイリオ’;
    text-align: center;
}
#blog-title a {
    color: #000;
}

という感じで記述されている部分がありますので、ここをカスタマイズしていきます。

なお、該当する行が無い場合は、付け加えればOKです。

タイトル文字の大きさを変更する

難易度：★☆☆☆☆

文字の大きさを変更するには、

#blog-title {
    font-size: 24px;
}

の太字部分を数字で指定します。

タイトル文字の太さを変更する

難易度：★☆☆☆☆

文字の太さを変更するには、

#blog-title {
    font-weight: bold;
}

の太字部分を変更します。

• bold：太字
• normal：標準

です。

タイトル文字の字体（フォント）を変更する

難易度：★☆☆☆☆

文字の字体（フォント）を変更するには、

#blog-title {
    font-family: ‘メイリオ’;
}

の太字部分に、指定したいフォント名を記述します。

ただし、 Arial Boldのように２語以上のものや、MSゴシックのように日本語のフォントの場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要があります。

ちなみに当ブログでは‘メイリオ’　フォントを使用しています。

読みやすくてオススメですよー！

タイトルの配置（中央、左右寄せ）を変更する

難易度：★☆☆☆☆

タイトルの配置（中央寄せ、左寄せ、右寄せ）を変更するには、

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

の太字部分を変更します。

• center：タイトルを画面の中央に配置します
• left：タイトルを画面の左に寄せて配置します
• right：タイトルを画面の右に寄せて配置します

です。

タイトル行の高さを調整する

難易度：★★☆☆☆

タイトル行の高さとは、タイトル行の上下の余白を含めた高さです。

タイトル行に余裕を持たせたい場合には、行に高さを出しましょう。

タイトル行の高さを変更するには、

#blog-title {
    line-height: 1.4;
}

の太字部分を数値で指定します。

1.4とは、文字の大きさ（font-size）の1.4倍ということを意味します。

140%または1.4emと指定しても同じ意味となります。

または、font-sizeと同様に、〇pxのように指定することも出来ます。

タイトル文字間の幅を変更する

難易度：★☆☆☆☆

タイトルの文字と文字の間を広げるには、

#blog-title {
    letter-spacing: 1px;
}

の太字部分を数値で指定します。

タイトル文字の色を変更する

難易度：★★☆☆☆

文字の色を変更するには、

#blog-title a {
    color: #000;
}

の太字部分を変更します。

色は、16進数カラーコード（#＋英数字6ケタ）で指定することが出来ます。

例えば、

• 黒(balck)：#000000
• グレー(gray)：#808080
• 青(blue)：#0000ff

という感じです。

色コードの検索には、「WEB色見本　原色大辞典」が便利です。

ブログ説明文のデザインを変更する

ブログ説明文とは、ブログタイトルの下に入る、ブログについての説明文です。

文章自体は、ブログ管理画面の【ブログ設定】→【基本設定】から編集できます。

ブログタイトルと同様にCSSの中の次の部分を編集していきます。

#blog-description {
    color: #979797;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
    margin: 30px 0;
    font-family: ‘メイリオ’;
}
#blog-description a {
    color: #0000ff;
}

文字の大きさ（font-size）、文字の太さ（font-weight）、フォント（font-family）などの変更は、タイトルと同じであるため、ここでの説明は割愛します。

文字の色を変更する

難易度：★★☆☆☆

ブログ説明文の文字の色を変更する場合、通常の文字とリンク付きの文字で設定が異なります。

#blog-description {　
    color: #000000;　/* 通常文字の色 */
##blog-description a {　　
    color: #0000ff;　　/* リンクの文字の色 */

例えば、上記のCSSの記述では、通常文字は黒、リンク付き文字は青になります。

↓実際はこんな感じになります。

ヘッダーにタイトル画像を挿入する

難易度：★★☆☆☆

ヘッダーに画像を挿入する場合は、ブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【タイトル/背景】からアップロードして挿入することが出来ます。

挿入方法については、「かんたんタイトル画像機能を利用する（公式ヘルプ）」をご覧ください。

メニューバーを挿入・デザインする

メニューバーとはライブドアブログで用意されている、URLやカテゴリーのリンクを帯状に設置できる機能です。

（画像：ライブドアブログのヘルプ）

メニューバーの挿入方法については、「メニューバー機能を利用する（公式ヘルプ）」をご覧ください。

ただし、メニューバー機能が使えるのは、　メニュー　マークのついたテンプレートのみとなります。

メニューバーのデザインについては、別のページにカスタマイズ方法をまとめています。

「メニューバーのデザインをカスタマイズしよう」をご覧ください。

まとめ

今回は、ライブドアブログの「ヘッダー部分（タイトル部分）」のカスタマイズについてまとめました。

別の部分のデザインのカスタマイズ方法もまとめていますので、合わせて参考にしてください。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

では、今日も頑張らずに楽しんでいきましょう～！