ブログタイトル、ブログ説明文の文字サイズ、文字色、表示位置などを変更する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロの新カスタマイズ向けデザイン(CSS編集用デザイン)のブログタイトルやブログ説明文の文字サイズや文字色の変更、表示位置調整などの方法をまとめていくつかご紹介します。

1.ブログタイトル、ブログ説明文の文字サイズの変更方法

ブログタイトルおよびブログ説明文の文字サイズは、以下のようなコードをユーザーCSSの末尾に追加して変更できます。

/* ブログタイトルの文字サイズ */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus {
  font-size: 30px;
}
/* ブログ説明文の文字サイズ */
.skinDescription {
  font-size: 16px;
}

実際の文字の大きさは、好みの文字サイズになるよう赤文字部分に値を設定してください。

2.ブログタイトル、ブログ説明文の文字色の変更方法

ブログタイトルおよびブログ説明文の文字色は、以下のようなコードをユーザーCSSの末尾に追加して変更できます。

/* ブログタイトルの文字色 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus {
  color: #000000;
}
/* ブログ説明文の文字色 */
.skinDescription {
  color: #666666;
}

文字色は、好みの色の色コードを赤文字部分に設定してください。

色コードについては、こちらのサイトなどが参考になります。

3.ブログタイトル、ブログ説明文の横幅(折り返し幅)の変更方法

ブログタイトルおよびブログ説明文の横幅(折り返し幅)は、以下のようなコードをユーザーCSSの末尾に追加して変更できます。

/* ブログタイトルの横幅(折返し幅) */
.skinTitleArea {
  width: 640px;
}
/* ブログ説明文の横幅(折返し幅) */
.skinDescriptionArea {
  width: 640px;
}

初期状態では、ブログタイトル・ブログ説明文ともに、ブログ幅いっぱい(980ピクセル)で折り返されて表示されますが、この折り返し幅をもっと狭めたい場合などに設定します。

折り返し幅は、好みの幅になるよう赤文字部分に設定してください。

4.ブログタイトル、ブログ説明文の周辺余白の変更方法

ブログタイトルおよびブログ説明文の文字周辺の余白は、以下のようなコードをユーザーCSSの末尾に追加して変更できます。

/* ブログタイトルの周辺余白 */
.skinTitleArea {
  padding: 0px 0px 4px 0px/* 上右下左の順 */
}
/* ブログ説明文の周辺余白 */
.skinDescriptionArea {
  padding: 0px 0px 0px 0px/* 上右下左の順 */
}

値は、好みの状態になるよう赤文字部分に設定してください。

なお、周辺の余白を調整することは、ブログタイトルおよびブログ説明文の文字が表示される位置を調整するという意味合いも持っています。

例えば、文字が表示される位置を右にずらしたい場合は左側の余白を大きくすることで実現することができます。

また、ブログタイトルと説明文の表示開始位置をずらしたい場合などにも応用できます。

なお、初期状態では、ブログタイトルの下側(つまり、ブログタイトルとブログ説明文の間)にわずかな余白(4ピクセル)が設定されていて、それ以外は余白はない状態になっています。

5.ブログタイトル、ブログ説明文を右寄せにする方法

通常は左寄せになっているブログタイトルおよびブログ説明文、右寄せにするには以下のコードをユーザーCSSの末尾に追加します。

/* ブログタイトルを右寄せに */
.skinTitleArea {
  text-align: right;
}
/* ブログ説明文を右寄せに */
.skinDescriptionArea {
  text-align: right;
}

もちろん、右寄せにした上で、上記の周辺余白の設定を併用して、表示位置を微調整することも可能です。

6.ブログタイトルの上とブログ説明文の下を詰める方法

なお、CSS編集用デザインの初期状態では、ブログタイトル領域の上部と、ブログ説明文領域の下側にいくらかの余白が設定されています。

この余白は、上記の余白変更方法で変更できるものとは別のものですが、ヘッダー周りをカスタマイズしていると、時にこの余白が邪魔になってしまう場合があります。

もし、この余白を詰めたいという場合は、以下のコードをユーザーCSSの末尾に追加すればOKです。

/* ブログタイトルの上とブログ説明文の下を詰める */
.skinBlogHeadingGroupArea {
  padding-top: 0px; /* ブログタイトルの上 */
  padding-bottom: 0px; /* ブログ説明文の下 */
}

ちなみに、完全に詰めたい訳ではないという場合は、『0px』の箇所を適切に変更することで余白の大きさを好みに変更することも可能です。

以上、アメブロの新カスタマイズ向けデザイン(CSS編集用デザイン)のブログタイトルやブログ説明文の文字サイズや文字色の変更、表示位置調整などの方法をまとめてご紹介しました。

どうぞ参考にしてください。

アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ