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

まず、ブラウザの丈夫にある余白をなくしてみましょう

上部の余白？



↑この一番上にほんの少しオレンジ色になってるでしょ・・・
ここの隙間をなくしましょう！

ＣＳＳファイルの設定から・・・ｂｏｄｙ部分を探してください
今回は一番下に1行記述を追加します。
スペースを空ける時は、必ず半角でしてくださいね。


body {
 color: #800000;
 background-color: #FF8C00 ;
 font-style: normal;
 font-weight: normal;
 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
 line-height: 130%;
 font-variant: normal;
margin-top:0px;
}

これを追加してください。

前回の復習



マージンは外部余白ですが、　marginだけの指定だと、上下左右が
一括して設定されます。

今回は、それにmargin-topとなっていますから、　上だけの指定になります。

ＣＳＳを触っていくとこの


top
bottom
left
right

が出てきます。
margin-left
padding-bottom

など・・・

かならず　leftやright、topbottomなどの指定の
前には、－（ハイフン）が入ります。

スタイルシートでは、細かい指定ができるのが魅力です。＾＾


次は、記事のタイトルをデザインしましょう。

現在リンクルさんの初期設定では、以下のような記述になっています。

h3.entrytitle{
 color: #fbf2ff;/*文字色指定*/
 line-height: 24px;/*行高指定*/
 padding-left: 15px;/*内部余白*/
 background-image: none;/*背景の画像指定noneはナシ*/
 margin-top: 14px;/*外部余白*/
}



↑このようなタイトルデザインにする場合は・・・

↓↓↓↓このように記述します。

h3.entrytitle{
 color: #ffffff;
 line-height: 24px;
 padding: 5px;
 background-color: #ffcc33;/*背景の色指定*/
 font-size:18px;/*文字サイズ指定*/
 margin-top:10px;/*外部余白指定*/
 border-bottom:4px solid #ff6600;/*外枠指定*/
}
/*○○○[*/の部分は、説明ですから、別に入力しなくて
大丈夫です。＾＾ＣＳＳでは、この／＊　　　　　＊／の記号で挟まれた
ところは、コメントといい。覚書のような役割をもっています。
もし、利用する場合は、必ず半角で記号を入れてくださいね。



↑このようなタイトルデザインにする場合は・・・

↓↓↓↓このように記述します。

h3.entrytitle {
 color: #ffffff;
 line-height: 24px;
 padding: 5px;
 background-color: #ffcc33;
 font-size:18px;
 margin-top:10px;
 border-top:2px solid #ff6600;
 border-bottom:2px solid #ff6600;
}

ほとんど最初と同じなのですが、上にも下にも枠線が入っているので
その分だけ記述が増えています。

↑このようなタイトルデザインにする場合は・・・

↓↓↓↓このように記述します。

h3.entrytitle {
 color: #cc6600;
 line-height: 20px;
 padding-left: 20px;
 background-image:none;
 font-size:18px;
 margin-top:10px;
 margin-bottom:0px;
 border-left:30px solid #ff6600;
 border-bottom:2px solid #ff6600;
}

左側のオレンジ色の■は、実は　線の太さを３０ｐｘに
して太くしているのです。

↑このようなタイトルデザインにする場合は・・・

↓↓↓↓このように記述します。

h3.entrytitle {
 color: #cc6600;
 line-height: 20px;
 padding-top:10px;
 padding-left: 20px;
 background-image:none;
 font-size:18px;
 margin-top:15px;
 border-top:20px solid #ff6600;
}
現在のこのブログのスタイルですね。
上の枠線を２０ｐｘと少し太めにしてあります。


ボーダーの指定で　20px　solid　#000000　など一括で
設定する場合は、かならず、　半角のスペースを入れてあけてくださいね。



次回の休憩時間には、　この

borderというスタイルについてお話しさせてもらいますね。

今回は、　ｓｏｌｉｄ・・・実線しか使ってません。