はじめに
アメブロの文字サイズ(ブログタイトル・ブログ説明文・記事タイトル・記事本文)を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は任意の数字を記入してください。
--------------------------------------------*/
/* 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編集画面の下部にある「表示を確認する」で確認後、保存。