ＣＳＳで遊ぼう！！
初心者の方でもわかるように、マニュアルを作ってみました。
説明不足もあるかもしれませんが、わからない点がありましたら、
いつでも気軽にお尋ねください。わかる範囲でお答えいたします。
１ 記事の文字を変えてみよう
せっかくできた新機能。
うまく活用してブログをもっと楽しみましょう！
新アメブロで遊んでみよう！ ＣＳＳ入門－１
アメブロがリニューアルして「CSSが編集可能に！」なんて言われても、
「CSSってなんですか？」という方へ。
まず、「CSS（シーエスエス）」というのは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、簡単にスタイルシートとも呼ばれています。
ブログの中での「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; ←「#」のあとの６つの数字はスキンによって違います
font-size: 11px; ←「px」の前の数字はスキンによって違います
}
こんな記述がありましたか？
それではさっそく、少し編集してみます。
まずは、color: #ff0000; → color: #0000ff; としてみましょう。
このとき「#」や「;」を消してしまわないように気をつけてください。
編集はこれだけです。
それでは、編集画面の下の「プレビュー」というボタンを押してみてください。
（プレビューでは、保存する前に編集内容を確認することができます。）
うまく「CSS」の編集ができていれば、記事の文字色が青色に変わっています。
もう1つ試して見ましょう。
今度は、font-size: 11px; → font-size: 20px; としてみてください。
この場合に注意することは、かならず半角文字で「20」と書いてください。
「プレビュー」で見てみるとどうですか？記事の文字が大きくなりましたか？
これが「CSS」の編集の第一歩です。
色の番号は「記事を書く」ところの「カラーパレット」や
こちらのカラーコードを参考にしてみてください。
文字の大きさは、数字を変えれば編集できるわけです。
難しかったですか？
次回はまた別な部分を編集してみようと思います。
もし、「この部分を編集してみたい」というような希望がありましたら、
コメントしてください。
ぜひ、「ＣＳＳ」を使いこなしてもっとブログを楽しみましょう！
タイトルの文字を変えよう！ CSS入門－２
今回は「CSS」を編集して「タイトルの色」を変えてみましょう。
「タイトルの色」を変えるには、「CSS」編集欄をちょっと下に下げた、
「font-information」の項目、
/* --------------- font-information --------------- */
が目印です。前回編集した部分と同じ場所です。
そこから少し下に下がると、
#header h1 {
font-size: 25px;
line-height: 100%;
color: #ff0000; ← 色を変更する場合はこの行を追加します
}
ここを前回と同じように編集すれば、「文字色」「サイズ」を変更できます。
この場合、「#header h1」というのが、「ブログのタイトルの設定」。
ここからもう少し下には、「#header h2」とありますが、これは「タイトル下のサブタイトル」のこと。それぞれ編集したい場合はそこを書き換えます。
「タイトル」「サブタイトル」の「文字色」、「サイズ」は変更できましたね？
それでは、もうちょっと細かい設定もしてみましょう。
今度も同じように
/* ----------------- font-information ----------------- */
が目印です。
そして今度はここから少し上にあがります。
そうすると、そこにも「#header h1」と「#header h2」の設定があると思います。
ここでは、「ブログのタイトルの位置」を設定しています。
| #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」に変えると右側にスペースを作と左寄りで改行できます。
「文字のフォント」を変えよう！ CSS入門－３
記事の文字の設定は、
/* ---------------- font-information ---------------- */
body {
color: #ff0000;
font-size: 11px;
}
この部分でしたね。
ここに、「フォントを指定する文」を入れます。
例えば、
font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
この文を挿入します。
body {
color: #ff0000;
font-size: 11px;
font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
}
こんな感じになります。文末の「;」は消さないように注意してください。
これでプレビューしてみてください。
おそらく、文字が明朝体になったのではないでしょうか？
「文字が全然変わらない」という人は、文を間違えているか、ＯＳ、ブラウザによっては変わって見えないこともあるので、注意してください。
それでは、もう一度見てみましょう。
font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
実はここでは、３つのフォントを指定しています。
「ＭＳ Ｐ明朝」、「細明朝体」、「ヒラギノ明朝 Pro W3」ですね。
どうして３つもフォントを指定するかというと、上にも書いてあるとおり、コンピュータ（ＯＳ、ブラウザ）によっては、こちらでいくらフォントを指定しても、相手に反映されるとは限らないからなんです。相手が持っていないフォントを使ってもダメ。
ですので、Windowsの人でも見られるように「ＭＳ Ｐ明朝」。
Ｍａｃの人でも見られるように、「細明朝体」を設定します。
設定としては
font-family: "ＭＳ Ｐ明朝";
でもいいんですが、これだとWindowsユーザーにしかフォントが反映されない可能性がある、ということです。一般的に使えるフォントに関してはこちらのサイトへ → フォント一覧
このようにして、２つか３つのフォントを指定することで、多くの人に自分の指定したフォントでブログを見せることができるようになるんです。
サンプルとして、以下のフォントなんかも使ってみてください。
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-family: "ＭＳ ゴシック", "Osaka－等幅";
font-family: "Tahoma", "MS UI Gothic", "Osaka,sans-serif";
タイトルに画像をいれよう！（ＣＳＳ入門－４）
画像フォルダに入ってる画像などを使って、好きな画像に変更してみましょう。
まずは、CSS編集画面を開いてください。
画像の設定部分は、下の部分で行います。
/* ------------ background-color-control ------------- */
body {
background-color: #FFFFFF;
text-align: left;
}
#frame {
background-color: #FFFFFF;
}
#subFrame {
}
#header {
background-image: url(ここに画像のURLを入れる);
background-repeat: no-repeat; ← 繰り返しの有無
background-position: center top; ← 画像の位置
}
上のように赤字の部分に好きな画像のURLを貼り付けるだけでＯＫです。
その他にも「no-repeat」を「repeat」にすれば、画像が一枚だけではなく、同じ画像が連続で、タイトル部分を埋め尽くします。
「center top」は、「center」→「right」、「left」に変えたり、
「top」→「bottom」に変更して、画像の位置を変更できます。
left top | center top | right top |
left | center | right |
left bottom | center bottom | right bottom |
入門１ 記事の文字を変えてみよう