初心者の方でもわかるように、マニュアルを作ってみました。
説明不足もあるかもしれませんが、わからない点がありましたら、
いつでも気軽にお尋ねください。わかる範囲でお答えいたします。
1 記事の文字を変えてみよう
せっかくできた新機能。
うまく活用してブログをもっと楽しみましょう!
アメブロがリニューアルして「CSSが編集可能に!」なんて言われても、
「CSSってなんですか?」という方へ。
まず、「CSS(シーエスエス)」というのは、Cascading Style Sheets(カスケーディングスタイルシート)の略で、簡単にスタイルシートとも呼ばれています。
ブログの中での「CSS」の役割は、「デザインを統一する場所」。
例えば「CSS」で「文字を青色に」と編集すれば、今まで書いた記事を1ページづつ変える必要なく、一度に青色に変えることができます。
また、「文字色」の他にも「文字の大きさ」や「枠線の色」、「ブログタイトルの文字の大きさや色」「ブログタイトル部分の画像」も自由に変更できます。
では、さっそく「CSS」というものを見てみましょう。
ログインすると、メニュー項目が出ていますが、その中の「デザインと機能」から「CSS」をクリックしてください。
この文字列が「CSS」という言語で書かれた、ブログの設定なんです。
これを見て、「あぁ、ダメだ・・」と思わないでください。
文字の色、大きさを変えるのは、全然難しいことじゃありません。
難しい説明は抜きにして、さっそく「CSS」を編集して、記事の文字色を変更する練習をしてみましょう。
まずは、「CSS」をゆっくり下のほうへ見ていってください。
一番初めは下のような感じから始まりますね。
/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.03/24
Skin for: all_skin
-----------------------------------------------------
*/
/* -------------------- common -------------------- */
/* -------------------- header -------------------- */
/* ---------------- font-information ---------------- */
body {
color: #ff0000; ←「#」のあとの6つの数字はスキンによって違います
font-size: 11px; ←「px」の前の数字はスキンによって違います
}
今回は「CSS」を編集して「タイトルの色」を変えてみましょう。
「タイトルの色」を変えるには、「CSS」編集欄をちょっと下に下げた、
「font-information」の項目、
/* --------------- font-information --------------- */
#header h1 {
font-size: 25px;
line-height: 100%;
color: #ff0000; ← 色を変更する場合はこの行を追加します
}
「タイトル」「サブタイトル」の「文字色」、「サイズ」は変更できましたね?
それでは、もうちょっと細かい設定もしてみましょう。
今度も同じように
/* ----------------- font-information ----------------- */
#header h1 { | ← | 「タイトル」の設定 |
margin-bottom: 10px; | ← | タイトルとサブタイトルの間隔 |
padding-right: 26px; | ← | 画面右からの間隔 |
padding-top: 38px; | ← | 画面上からの間隔 |
text-align: right; | ← | 「タイトル」を右寄せ |
} | ← | 「タイトル」設定終了 |
#header h2{ | ← | 「サブタイトル」の設定 |
padding-right: 26px; | ← | 画面右からの間隔 |
text-align: right; | ← | 「サブタイトル」右寄せ |
margin-left: 400px; | ← | 「サブタイトル」画面左のスペース |
} | ← | 「サブタイトル」設定終了 |
・上記の赤文字の数字を変えれば大きさや幅を変えられます。
・上記の「right」を「left」「center」 に変えれば、左や真ん中に移動します。
「サブタイトル」の左スペース 「margin-left: 400px;」 を入れないと、「サブタイトル」がずらずらと横長になってしまいます。
左に大きなスペースを作ることで、「サブタイトル」が右寄りで改行します。
また、「サブタイトル」が左寄りの人は、「margin-left: 400px」→「margin-right: 400px」に変えると右側にスペースを作と左寄りで改行できます。
/* ---------------- font-information ---------------- */
body {
color: #ff0000;
font-size: 11px;
}
この部分でしたね。
ここに、「フォントを指定する文」を入れます。
例えば、
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
body {
color: #ff0000;
font-size: 11px;
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
}
それでは、もう一度見てみましょう。
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-family: "MS P明朝";
でもいいんですが、これだとWindowsユーザーにしかフォントが反映されない可能性がある、ということです。font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-family: "MS ゴシック", "Osaka-等幅";
font-family: "Tahoma", "MS UI Gothic", "Osaka,sans-serif";