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

注記:16年9月、当ブログはライブドアブログからWordPressに移転しました。現在はライブドアブログではありませんが、引き続き、ライブドアブログを使っている方のお役に立てれば幸いです。ライブドアブログからWordPressへの移転方法の解説はこちら。

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

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

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

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


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

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

144-2

ブログタイトルのデザインを変更するには、主にこの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のように2語以上のものや、MSゴシックのように日本語のフォントの場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要があります。

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

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

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

難易度:★☆☆☆☆

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

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

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

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

です。

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

難易度:★★☆☆☆

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

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

line-heightの説明

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

#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色見本 原色大辞典」が便利です。

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

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

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

144-3

ブログタイトルと同様に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の記述では、通常文字は、リンク付き文字はになります。

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

144-4

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

難易度:★★☆☆☆

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

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

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

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

144-6
(画像:ライブドアブログのヘルプ

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

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

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

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

まとめ

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

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

ブログの各パーツと目次

【ブログデザインのカスタマイズ方法 もくじ】

★.スマホ向けページのカスタマイズについての解説
★.ライブドアブログのメリットまとめ

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

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