注記:16年9月、当ブログはライブドアブログからWordPressに移転しました。現在はライブドアブログではありませんが、引き続き、ライブドアブログを使っている方のお役に立てれば幸いです。ライブドアブログからWordPressへの移転方法の解説はこちら。
こんにちは。ユージーン(@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のように2語以上のものや、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宣言![]() ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。 |