ブログ文字のサイズ変更方法 | 知恵の樹・アメブロテンプレート

知恵の樹・アメブロテンプレート

アメブロテンプレート・カスタマイズ

はじめに

アメブロの文字サイズ(ブログタイトル・ブログ説明文・記事タイトル・記事本文)をCSSで変更する方法を説明します。

適応テンプレート:CSS編集用デザイン


文字サイズの指定について

文字サイズの指定方法はいくつかありますので、少し説明したいと思います。
こんな単位があるんだ的に見てもらえれば大丈夫です。

em(エム)=「1em = 1文字分の長さ」
ex(エックスハイト)=「1ex = 「x」文字の長さ」
px(ピクセル)=「1px = 画面上の1ピクセル」

単位の詳細については触れませんが、いずれも数字でサイズ変更できます。


今回は比較的に目にしたり聞いたことのあるだろうpx(ピクセル)で指定したいと思います。

(例)

10pxで指定した場合ここは10px
14pxで指定した場合
ここは14px
18pxで指定した場合
ここは18px

ブログタイトル文字サイズの指定方法

①CSS編集画面を表示
※CSS編集画面の表示が解らない方は「テンプレート設定の基本画面」を見てください。

CSS編集画面の次の場所を見つけてください。

下記の赤字の「2.11em」を「○○px」に変更してください。
※○○pxは任意の数字を記入してください。

/* (1-2) ブログタイトル文字
--------------------------------------------*/


/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}


②CSS編集画面の下部にある「表示を確認する」で確認後、保存。

ブログ説明文の文字サイズの指定方法

①CSS編集画面の次の場所を見つけてください。(ブログタイトル文字変更時のすぐ下です)

下記の赤字の「font-size:○○px;」を追記してください。
※ブログタイトル文字サイズ変更では書き換えましたが今回は追記になります。
※○○pxは任意の数字を記入してください。

/* (1-2) ブログタイトル文字
--------------------------------------------*/


/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
font-size:○○px;
}


②CSS編集画面の下部にある「表示を確認する」で確認後、保存。

記事タイトルの文字サイズ指定方法

①CSS編集画面の次の場所を見つけてください。

下記の赤字の「1.31em」を「○○px」に変更してください。
※○○pxは任意の数字を記入してください。

/* (1-3) 記事/メッセージボード内の文字のスタイル
--------------------------------------------*/

/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}


②CSS編集画面の下部にある「表示を確認する」で確認後、保存。

記事本文の文字サイズ指定方法

①CSS編集画面の次の場所を見つけてください。(上記、記事タイトルの文字サイズ指定をした場所です)

下記の赤字追記します。
※○○pxは任意の数字を記入してください。

/* (1-3) 記事/メッセージボード内の文字のスタイル
--------------------------------------------*/

/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}
/* articleText 記事本文文字 */
.articleText{
font-size:○○px;
}


②CSS編集画面の下部にある「表示を確認する」で確認後、保存。