リンクルデザイン変えてみよう

   

今回のテンプレートは、全体的な背景の色は、白になっていますので、
この色を変えてみましょう

まず、ログインして管理画面左下の　ブログの設定・管理から
ＣＳＳファイルの設定をクリック




↓クリックすると、この画面が出てきて・・・
w((￣￣0￣￣))wワオッ!!・・・もう、ムリムリムリって思ったあなた
大丈夫です。全部触る必要ないですから・・・必要なところだけ書き換えるだけ。
しかも、ぐちゃぐちゃにしたら、初期化して、もとの設定にすることも出来るから
まずは、やってみるべし！失敗が人を大きくしてくれますから

ヾ(=^▽^=)ノd(*⌒▽⌒*)b ニコニコッ





まず、ページ全体の背景の色を変えて見ましょう。

↓の部分が出てくるまでCSSファイル画面をスクロールしてください。

/* ベースデザイン */
body {
    color: #333333;/*文字の色グレー*/
    background-color: #fff;/*背景の色白*/
    font-style: normal;/*文字のスタイル　標準
    font-weight: normal;/*　文字の太さ　標準
    font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;/*書体の候補*/
    line-height: 130%;/*行高*/
    font-variant: normal;
}

解説：
background-colorこれが背景をさしています。
background-　のあとが　ｃｏｌｏｒになっているので、背景を色で指定する
指示がでているという意味です。

＃ｆｆｆ；　が色を表しています。色の表現方法は

カラーネーム　　　色の名前を英語表記で記載　
例：background-color: white;　
カラーコード　　　色を＃と（3桁）6桁の英数字で決められたコードで記述
例：background-color: ＃FFF;　（大文字、小文字どちらでも可）
例：background-color: ＃FFFFFF;　
※私は、6桁で指定しています。

ということで、この部分の色を自分の好きな色に変更すればいいのです。
ということで、今回は、好きな色に変更してみよう

色のサンプルは

色見本
タグインデックスのＨＰより（リンクしてます）

この応用で・・・・

color: #333333;/*文字の色グレー*/

↑　ｃｏｌｏｒというのは、文字の色を意味しているのでここも
同じように、色の指定だけ変えてあげれば、ブログの文章の文字色が変更
されます。
（リンクや、エントリータイトルなど、変更されないものもあります）

まずは、この色の変更からブログデザインの変更をしてみましょう＾＾




デザインはグループごとに設定されいたり、タグごとに設定されて
いたりとさまざまです。上記の図を見ていただいて
<h1　class="blogtitle">となっていますが、　これは　ｈ１のタグにblogtitleって名前の
クラス名をつけますねっていう目印です。
<div　class="description">も　divという　固まりをあらわすタグにdescprictionってクラス
名をつけますねっていう目印になります。
なので、ＣＳＳファイルの法に　．（ドット）○○○って書いてあるものは、　クラス名に　○○○って
ついているものに対してデザイン指定しますねってことです。

上記の内容を踏まえて・・・・・
それでは、クラス名のついているデザイン指定してみましょう！

次にブログタイトルの文字の大きさについて

.blogtitle{
    font-size: 150%;/*文字のサイズを親要素より1.5倍大きく*/
    line-height: 110%;/*行高を親要素より、1.1倍大きく*/
    width: 738px;/*横幅は738ピクセル*/
    display: block;
    margin: 0px;
    padding-top: 60px;
    padding-left: 20px;
}

.blogtitle a{color:#FFFFFF;text-decoration:none;font-weight:bold}
.blogtitle a:link{}
.blogtitle a:visited{}
.blogtitle a:active{}
.blogtitle a:hover{text-decoration:underline}



font-size: 150%;と今回は、割合を示す　％で設定されていますが
この　150％のところを

例font-size: 15px;
例font-size: 12pt;

などと指定してもかまわない。　ワードやエクセルを普段使っている人は、
どちらかというと、ポイントで指定したほうが、大きさのイメージがもてるかも
しれませんね。

このように、色が指定されているところは、


ｃｏｌｏｒ　という記述と　６桁（３桁）のコードが記載されていますので、まずは、その
色のコードを書き換えるところから、デザインの変更をしてみましょう！



＋＋＋＋＋２時間めの練習問題＋＋＋＋＋

あくまでも、自己の責任において、編集してくださいね。しかし、
リンクルさんは、ぐちゃぐちゃになっても、スタイルシートの初期化
（一番最初の状態）機能があるので、おかしくなったら、初期化すればＯＫと
気持ちをラクにしてください。

ｂｏｄｙ　タグの　背景の色と、文字の色を変更して、どこが
変わるか確かめてみよう

クラス名　【blogtitle】　とついているところの文字の大きさ変更と、文字色の変更を
していみてください。




少しは、あなたのブログのイメージも変わるはずです。


２時間目終了！v(=∩_∩=) ブイブイ!!




３時間目は、外枠の　黒いぶっとい線を少し変更しよう！です。