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

こんばんわ！　さ、デザイン変更2日ですね。


ちょっとＣＳＳは、お休みして・・・・


私がリンクルブログを始めて、一番　(〟-_・)ン?不便だなあ！と
思ったのは、自分のブログから、新規作成、ログインができないこと。

そこで、色々見ていたら、　プラグインの追加って項目が
あるじゃないですか・・・

そこで、本来、プラグインの追加は、ブログパーツなんかを貼り付ける
ことが多いのですが、よく見ると、それってタグ（HTMLなど）を貼り付けてる
だけじゃん！ということで、テストで色々してみました。


そこで、今回は、もし、ログインしてなければ、ログイン画面
ログインしていれば、新規作成画面が開いてくるように設定してみました。


１．まずログインして、いつものマイページを表示してください。
　
新規作成をクリックしてアドレスを表示してください



アドレスを全部打つのは、大変なので、アドレスバーのところで
右クリックしてコピーをクリック
　※このとき、アドレス全部が青く反転している事を確認してね。

２．次にプラグインの設定をクリックする



　　　↓



プラグイン名　　　好きな名前でかまいません。　

私は、マイページ　　にしました。

プラグインのところに

<a　href="先ほどコピーしたアドレスを貼り付ける"　target="_blank">ログイン・新規作成</a>

と入力してください。


<a　href="先ほどコピーしたアドレスを貼り付ける"　target="_blank">ログイン・新規作成</a>

↑これをコピペで貼り付けてもらってもいいですが。
　　　ただし、アドレスのところは、きちんと変更してくださいね。

　　　　※コピペとは・・・・　コピーして張り付けるの略語です。
　　　　　　コピーアンドペーストが正式なんですけどね。＾＾；


ａタグは、ＨＴＭＬでリンクの指定になります。
<a　×××>　ここにリンクの文字を入力します</a>

ＨＴＭＬで　</a>のように、</＞がついているものは、終了を意味します。

これからｈ、徐々に、ＨＴＭＬもお勉強していきましょうね！v(=∩_∩=) ブイブイ!!

そのあとの　ｈｒｅｆ　は、ハイパーリファレンスの略と習いましたが、要は、リンク先の
指定になります。なので、ここには、アドレスがきます。


targetとは、リンク先の表示方法です。　今回はブランクを指定しました。

blankとは、現在のウインドウでは、なく、新たにウインドウを開くという命令になります。

ということで、今回は、

ログインしていない場合は、ログイン画面、ログインしていれば、自動的にブログの
新規作成の画面にリンクされるようになります。

そして、プラグインを追加するをクリックしてください。

３．次にサイドバーの設定をします。






数字の順番に、表示されます。
（数字は、自分で打ち直してくださいね）
　（ピックアップは、基本的に一番上に来るようになってますので、ここには、
　　　表示されないみたいですね。）

次に、もし非公開にしたいところは、▼ボタンから非公開を選びましょう


そして、表示件数も初期設定では、１０件になっていますが、自分で変更できます。

そして、すべて作業が終わったら、サイドバーを編集するをクリックします。


４．忘れずにブログの再構築しましょうね。



　　　　↓


とりあえず、▼ボタンから全てのページにして　再構築するをクリックしましょう！



これで作業はおしまいです。

サイドバーにプラグインとして、登場しているはずです。




リンクルさん、こんな使い方しても大丈夫でしょうか？？？？？？

まず、今回はちょっと大きなデザイン改造に
なるので、記述ミスなどが考えられます。
なので、まずはじめに、一つ前の休憩時間の

ＣＳＳのバックアップを必ずしておきましょう！

今回、なにをするかというと、以前に　

body　要素の背景の色を指定したのを覚えてますか？

background-color:色の指定;

今回は、このカラーを消して変わりに画像を
指定しようとしております。

まず、基礎知識を・・・・

スタイルシートで背景に画像を使用する場合

background-image:url(画像のある場所);

background　　←これは、もうおなじみの　背景ですね

image　　←これが、画像で指定するよ！っていう命令です。

url(画像のある場所)　　←これが、使う画像の指定をする記述なんです
が、リンクルさんの場合、まず画像ライブラリに使う画像をアップしておいて
ください。

以上が背景を画像で指定する記述なんですが、これだけは、色々不都合が
でてくるので・・・・

 background-repeat: no-repeat;　画像の繰り返し指定　今回は繰り返し
 しないので、no-repeatを利用
 ※
 横方向に繰り返す場合　　　　repeat-x
 
 縦方向に繰り返す場合　　　　repeat-y

などもあります。

background-attachment:fixed;　　画像を固定するかしないかの指定

どういうこと？

画面を上下にスクロールさせたとき、背景画像も一緒に
スクロールさせるのか、背景はスクロールさせないのか
を指定します。

今回は、スクロールさせたくないので、fixedを指定します。

スクロールさせる場合は、この記述をしないか、または
fixedの代わりにscrollを指定してください。

background-position:left bottom;　画像の配置する場所

画像に繰り返し指定を　no-repeatにした場合、水平方向（左右）
垂直方向（上下）で、どの位置に配置するかを指定します。

今回、私の使った画像は、左下用の背景素材なので
left　bottomになります。　leftとbottomの間には、半角の
スペースを入れてください。

以上で、body要素の背景に画像を指定する作業は、
完了です。
ちなみに、このブログの記述は

/* ベースデザイン */
body {
 color: #800000;
 background-image:url(http://linkul.net/antenna/image/1222145671850.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:left bottom;
 font-style: normal;
 font-weight: normal;
 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
 line-height: 130%;
 font-variant: normal;
    margin-top:0px;
}

になります。

background-image:url(http://linkul.net/antenna/image/1222145671850.jpg);
↑ここは、1行で入力してくださいね。

今回は長すぎるため2行に改行されているように見えますが、1行でお願い
します。
++++++++++++++++++++++ここから画像のアドレスの調べ方と指定です++++++++

(　　　　）の中にはいるアドレスは、コピーしてしまいましょう＾＾

1.画像ライブラリをクリックする



2.背景画像にしたい写真の　見るをクリックする


3.別ウィンドウで、写真が開いてきますので、アドレスのところコピーします。



4.アドレスの上にマウスポインタを置いて右クリックして、コピーします。

そして、("　　　　　")の中に貼り付けてください。

ＦｉｒｅＦｏｘは、別タブで開いてきますから、同じようにしてください。＾＾

++++++++++++++++++++++ここまでは、画像のアドレスの調べかたと指定です+++++

 そこで、(〟-_・)ン?ちょっと、しっくりきませんよね。
なにが？それは、本文の背景の白色が邪魔をして、なんか、
中途半端な感じです。そこで、この背景の白色たちを
消してしまいましょう！

CSSから以下の記述を探しましょう

.box {
 background-color: #000000;
 width: 760px;
 padding: 1px;
}

ここの、 background-color: #000000;を思い切って
消してしまいましょう！
そうすると、枠線が無くなってしまうので、代わりに、私は
        border-left:1px solid #000000;
     border-right:1px solid #000000;

を追加しましたが、別になくてもかまいません。

私のブログは、こうなってます。↓↓↓
.box {
 width: 760px;
 padding: 1px;
 border-left:1px solid #000000;
 border-right:1px solid #000000;
}

ε- (￣、￣A) フゥー　　これで安心しないでくださいね。
まだまだ、白い背景は消えておりません。

ＣＳＳの記述の中から

/* エントリー関連 */

.main {
 background-color: white;
 padding: 10px;
}

↑を探してください。そして
 background-color: white;
の部分を消してしまってください。

そうすると、背景を色で指定したところがなくなりますので
bodyに入れた背景要素がきれいに表示されます。

今回の改造で、ガラっとブログイメージが変わったはずです。

今回利用させていただいた背景画像は、

自然いっぱいの素材集さんです。

素材の小路さんなんかも、固定背景に
使えるキレイな背景がありあるようです。

このほかにも色々背景画像に利用できる素材サイトが
ありますから、調べてみてください。

ホームページ用の素材を配布しているサイトは
どういうわけか、目的の場所に（素材のあるところ）
に行くまでがものすごくわかりにくいところが
多いので、気長にさがしてくださいね。

とりあえず、これで１日目の授業を終わります。

２日目の授業も考えていかないと・・・・

 

 

ＣＳＳの変更も色々進んできました！？

しかし、人間だれしも、間違います。そして、リセット！
(〟-_・)ン?人生ならリセットしてもいいかも！と考えるアンテナ2号ですが←Σ(;￣□￣Ａ アセアセ


しかし、せっかく苦労していろいろ変更してきたＣＳＳをちょっとした、記述ミスや
記号抜けで、修正できてるうちは、ＯＫだけど、自分で修正できなくなったら

ＣＳＳをリセット・・・・・たしかにリセットされるけど、みんな初期設定に
戻ってしまいます。


あ～んなことやこ～んなことをしたのに・・・・(ノ_・、)シクシクとならないために
ＣＳＳのバックアップをお勧めします。



バックアップ？？？？そんなのどうすんの？と思った(・_・)σアナタ


まず



ＣＳＳファイルの設定からいつものあの画面を出します。




↑これこれ



そしてこの中の文字を全部範囲指定します。

(一番上から、一番下までドラッグします。　もし、面倒な人は、
この中にカーソル（字を打つときに出てくる点滅してる棒）があることを
確認して、ｃｔｒｌ（コントロールキー）を押しながら、　Ａ（ち）のキーを
押すと、全て選択する　ショートカットキーの操作になるので、とにかく
全部の文字を青く反転させてください。

反転すると、以下のようになりますので、その青く反転したところにマウスポインタを
持って行き、右クリックします。そうすすと




↑右クリックすると、ショートカットメニューが出てくるので、コピーを
クリックします。

そしてつぎに、メモ帳にそれをはりつけましょう。




メモ帳の出し方は　スタート　→　全てのプログラム　→　アクセサリ　メモ帳

になります。





メモ帳が出てきたら、先ほどコピーをとったものを貼り付けます。







こんな感じで張り付いたら、あとは、テキストファイルとして保存します。

保存の方法は　ファイル　→　名前をつけて保存　→保存先を決めて
(今回はマイドキュメントにします）あとは、ファイル名のところに好きな名前をつけて保存
しておいてください。


そうすれば、もし、ＣＳＳがぐちゃぐちゃになったとしても、バックアップを
とった最終の日までのＣＳＳの記述は残ってますからこのメモ帳に
保存した記述をＣＳＳの方に貼り付けてあげればＯＫ


データと言われるパソコンのファイルは、必ずバックアップをとっておかないと
泣かないといけないことが起こる可能大です。

さて、6時間目を考えねば・・・


皆さんの知りたい事を教えてください。お待ちしています。

ヾ(=^▽^=)ノ


あ！本文の中に使う、画像ですが、大きさを最大５００ピクセルくらいにして
おくほうがいいみたいです。

今回は、TOP画像と文字の配置について変更してみましょう。

ＴＯＰ画像の変更の仕方は、リンクルさんのヘルプにも載っているので
割愛させていただきます。

しかし、選ぶ写真によっては、文字と重なってしまい、タイトルが見えにくく
なってしまします。そこで、ブログのタイトルを自分で好きな位置に配置
できたら・・・という思いで紹介しますね。




今回のポイントは　パディング　です。


そして、触っていただくＣＳＳは

/* ブログタイトル */
.blogtitle{
 font-size: 150%;
 line-height: 110%;
 width: 738px;
 display: block;
 margin: 0px;
 padding-top: 5px;/*内部余白上の位置*/
 padding-left: 300px;/*内部余白左の位置*/
 color:#000000;
}

上の余白を少なくしたい場合は、topのあとの余白の数値を小さく
逆に上との間を空けたい場合は、数値を大きめに設定てください。
なるべく右の方に起きたい場合は、leftの数値を大きく。
しかし、大きいと言っても限度がありますかｒ、上記数値は、このブログの
設定になりますので、イメージを見て数値の調整をしてください。


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


ここは、ブログタイトルの色を設定します。
本来は、.blogtitle　のcolorで設定するのですが、このブログ
タイトルには、リンクがつけられているため、上記の　color:#000000;
だけ変更しても変わりません。なので、こちらでも色の変更をしておいて
ください。

/* ブログ詳細 */
.description{/*ブログタイトル下説明文*/
 color: #FFFFFF;
font-weight:bold;/*追加太字の設定です*/
 width: 738px;
padding-left: 400px;
font-weight:bold;/*追加太字の設定です*/

}

ブログタイトル下の説明文です。
こちらも、左からの距離を開けたい場合・・leftのところの数値を変更してください。
そして、今回は、変更するだけでなく、新たに自分でデザイン記述を追加してみました。
といっても、　【太字】の設定なんですけどね。　font-weight（フォント－ウエィト）
少し　字を太くすることで、文字が見やすくなるということもありますしね。＾＾


文字の色などは、colorのところのコードを変更してください。



本当は、画像の作成方法もご説明できれば、いいんですが、
ソフトがペイントでは、役不足なので・・・
自分でＴＯＰ画像作れたらもっと、楽しくなるのにね。

写真加工が出来たら、もっと、もっとブログをキレイにカスタマイズできますよ。



次回は、BODYの背景に画像の指定をしてみましょう！


(〟-_・)ン?どういうこと？って方は、私の本館ブログのスクロールしても
動かない猫の画像のような設定をしてみましょう！

スタイルシートは、要素をボックス（四角い枠）として扱っていきます。


そしてそのボックスの外側には、枠線をつけることができるのです。


4時間目では、　ｓｏｌｉｄ（実線）を主に利用しましたが、実線のほかに

ボーダーの種類について

double（ダブル）　二重線

dotted（ドット）　点線

dashed（ダッシュ）　破線


groove（グルーブ）　　凹んでみえる感じ

inset（インセット）ボーダーに囲まれた範囲全体が凹んでみえる感じ

ridge（リッジ）　飛び出してみえる感じ

outset（アウトセット）　ボーダーに囲まれた範囲全体飛び出してみえる感じ

などがあります。



枠線の太さ指定
border-width … 上下左右をまとめて指定します。

border-○○○-width … 上下左右を個別に指定します。
　　（○○○の部分には、top、right、bottom、left など指定したい場所がはいります）

例1.

border-width: 10px; … ［上下左右］全部同じ太さ

border-left-width 20px;　[左]だけ２０ピクセルの太さ

例2.
○○{
              border-left-width: 20px;
              border-bottom-width: 1px;
 }

↑の場合は、左は20ピクセルで下は1ピクセルと個別に太さの指定だできます。


ボーダーの色指定

border-color　　　上下左右をまとめて指定します。
border-○○○-color 　上下左右を個別に指定します。
　　　（○○○の部分には、top、right、bottom、left など指定したい場所がはいります）

例1.

border-color: #000000; … ［上下左右］全部指定した同じ色

border-left-color red;　[左]だけ指定した色

例2-1.

○○{
              border-color: red;
   }

なのですが、線の種類を指定していないと、表示されない場合もあるので

例2-2.

○○{
              border-color: red;
              border-style: solid;

   }

一緒に線のスタイルも指定しておくといいと思います。




ボーダーの個別一括指定と全体一括設定


個別一括指定


○○{
border-left : 6px double #999999;
border-raight : 1px solid #000000;
border-top : 20px dashed #cccccc;
border-bottom : 1px outset #cccccc;
｝
※↑これは、あくまでも例ですから、すごく変な枠線の設定になります。



○○{
border: 6px double #999999;
｝

↑この場合　上下左右全てのボーダーに対して6ピクセルの二重線で、指定したコードの
色の線という指定になります。

指定する順番は自由です。

このほかにも、いろんな設定方法がありますので、あとは、自分たちで調べてみてください、

私がいつもお世話になってる　タグやＣＳＳのサイト

タグインデックス


5時間目は、タイトル画像を変更しよう！　関係です。

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

上部の余白？



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

ＣＳＳファイルの設定から・・・ｂｏｄｙ部分を探してください
今回は一番下に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というスタイルについてお話しさせてもらいますね。

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

ブラウザは、なにを使ってますか？


ネット関係でトラブルが起きると、決まりきって聞かれる言葉です。


ぶ・・・・ら・・・・・・・・・・・・・・・・・う・・・・・・・・・・・・・・・・・ざ？


ブラウザとは、インターネットを閲覧できるソフトの総称です。


ちなみに、アンテナのパソコンには、現在4種類のブラウザを入れて
いろいろ見比べています。


世界的シェアは、やっぱり　マイクロソフトさんのＩＥ　インターネットエクスプローラー

ＦＸ（ＦｉｒｅＦｏｘ）ｓａｆａｒｉ（サファリ）そして、このほど、グーグルブラウザも登場
しましたね。


個人的には、閲覧のみなら、ページの読み込みの早さから言うと、
グーグルは、ＯＫなんですが、ちょっと、閲覧できないページがあったり、
ときたま、固まったり・・・　（ＰＤＦファイル関係は弱いですね。ＦＸもですけど）

同じページでも、若干見た目の雰囲気が違ったりもします。






↑インターネットエクスプローラー６で見た場合




↑ＦｉｒｅＦｏｘで見た場合



↑ｓａｆａｒｉで見た場合





↑グーグルブラウザで見た場合

なぜか、インターネットエクスプローラーで見たときだけ
サイドバーのカレンダーの2008年9月いう文字の色が赤いでしょ？
ＣＳＳの仕様の違いだと思うんですが・・・・


こんな感じでブログを多方面から、色々検証しております。！
(。・_・。)ノ


それでは、４時間目の準備をしま～す！

みなさんからも、こんな事について教えて！があれば、お聞かせください
わかる範囲で答えます
わからないときは、はっきりわかりません！といいます！

私に、リンクルブログ改造計画を踏み切らせたのは、この外枠の
ぶっとさを、細くしたい！というところからはじまったと言っても過言ではありません。


Σ(;￣□￣Ａ アセアセ

ということで、２時間目でも見てもらった・・・



このＣＳＳから、　borderというスタイルを探しまくり・・・・
太さをあらわす　border-width：○○;というのを探すも・・・
該当するようなものがみつからない！・・・


そこで色々見てみたところ・・・どうも

.box { 
background-color: black;
 width: 760px;
 padding: 10px; 
}

このアタリがあやしい！ということで早速数値を変更して、見た。


ビンゴ！でした。

 background-color: black;

こちらは、昨日もしましたが、　背景を色で指定する記述です。
そして、今回は、ブラックとカラーネームで書いてありますが、特に
深い意味はないと思います。　背景の色は黒！っていう意味です。

そして
今回の主役は、↓です。
padding: 10px;

パディングとは・・その前に


ＣＳＳでは避けて通れないボックスの概念をお話しましょう！


ＣＳＳでは、要素を（タグだったり、クラスだったり、ＩＤだったり）１時間目２時間目を参考に

ボックスと呼ばれる四角い中に表示させるのです。

水色のところが、文字や画像を表示させる領域です。いわゆる　内容ですね。
そしてその四角い部分を枠線で囲むことができます。

ボーダーから外側の余白を　マージン　marginと呼び、ボーダーから
内容までの内側の余白をパディング　paddingといいます。


そして、今回のぶっとい線を細くしよう！は、実はボーダーの数値を大きく
して太い線にしてたのでなく、　パディングの数値が10pxになっているので
内容からボーダーまでの間に10ピクセルの余白が出来ていたのでした。

ということで

 padding: 10px; 

↑この10を　細い線がいい人は　1pxに変更してみてください。

そして、黒い色が嫌な方は、
background-color: black;

↑のblackのところを、別の色指定にしてくだい。
カラーコードでも、カラーネームでもどちらでも可能ですよ！


ということで、今回は、ぶっとい線を細くしてみよう！そして色を変えて
見よう！でした。

ここまでのカスタマイズは、すでに記述されている内容の
カラーコードをやカラーネームを変更したり、数値を変更したりするだけの
比較的簡単なカスタマイズです。

とにかく　　記述の中に　　カラーコード表示やカラーネーム表示
があったら。　Ｃｏｌｏｒ　って書いてあったら　【色】　関係ですから自分で
色々変えて見てはいかがですか？

もちろん、中にはＣＳＳデザインの設定は記述してあるものの、
実際のブログの中にその要素が現時点ではない！という場合もあるので
変更しても


あれ？どこかわったん？っていう場合もありますよ！v(=∩_∩=) ブイブイ!!


ブログカスタマイズは、自己責任で行ってくださいね。
そして、失敗したら、　ＣＳＳだけ初期化してくださいね。！


次回からは、ちょっとずつオリジナルなデザインを組み込んでいきましょう！

どんどん、楽しくなりますよ！d(*⌒▽⌒*)b ニコニコッ

３時間目に行く前に・・・・


スタイルシートの基本構造

p { color: red }

セレクタ{プロパティ:値}

セレクタのところには、　タグ（要素名）や．○○（クラス名）や＃○○（ID名）

※cssの設定のところに　．からはじまるものは、　class="○○○"となって
いるもので、＃からはじまるものは、ID="○○○"となっているものです。

クラス？ＩＤ？と頭が沸きあがってきますが・・・今は、あんまり難しく考えない
考えない。

私は、何が違うんですか？って聞かれると、ごまかしのようですが

とりあえずヒトツのページの中に、　ID名は　一回しか登場してはいけない
ことになってます。class名は何回登場してもＯＫなんですよ！といいますが

これでは、たしかに聞いたほうは　？？？？？？？？？？？？

ですよね。なので。

Ａ組にアナタはヒトリしかいないでしょ？
たとえ、同姓同名の人がいたとしても・・・・

ｃｌａｓｓ名は、　学校で言ったら　そのまんま・・・クラスという広範囲を
指定していますが、ＩＤ名は、特定の人を指してるんですよ！

んー　これでもやっぱり？？？？？？？？？？？なんですけどね。

んでもって・・・


Ａクラスさ～ん　いらっしゃ～いって　呼べば　Ａクラスさん全員来ますよね。
だけど、　山田太郎さ～ん！って（同姓同名はいないという設定です）言えば、
山田太郎さんしか来ませんよね。

それが、クラス名とＩＤ名の違いです。


ε- (￣、￣A) フゥー　　　でも、難しいですよね。＾＾；



さてさて、話は本題に戻さないと・・・・


まずセレクタにて、設定する対象を指定して・・・

複数のセレクタにてまとめて同じ設定をしたい場合は、　，（カンマ　必ず半角）で
区切ってください。

そうそうＣＳＳファイルのいきなり最初の方に出てくる

h1,h2,h3,h4,h5,p,ul,ol,li,table,th,td,address {
 margin: 0;
 padding: 0;
 border: 0;
}

こんな感じで（ちなみにこれは全て　タグを指定していますね！


そして　｛のかっこのあとに色々設定していきます。

１．
p{color:red;font-size:12px;}

２．
p{
　　color:red;
　　font-size:12px;
　}


など、記述方法は、どちらでも結構です。

セレクタに対して、複数のプロパティを指定する場合、１．のように
続けて記述していくと、わかりにくいかもしれませんね。

私もですが、リンクルさんの場合も　２．の方で記述していますよね。

複数のプロパティを設定する場合、かならず　値の最後に；（セミコロン　必ず半角）
を入れて区切ってください。


それでは・・・プロパティと値についてご説明いたしましょう！


プロパティってなんですか？と聞かれたら、私はいっつも

　詳細　ですよ！って答えます。

たとえば、上記を例にとると

Ｐというタグに対してカラーの詳細は赤で、文字の大きさの詳細は１２ピクセル
を指定しなさいってことになります。

そして、プロパティと値の間は、：（コロン　必ず半角）で区切らないといけません。


ＣＳＳファイルの変更をする際は、　この　：（コロン）だったり、，（カンマ）だったり
；（セミコロン）を間違って消さないようにしてくださいね。

このちいさい記号たちを消してしまったばっかりに、何もかもが無効に
なってしまう場合がありますから・・・その記号たちも重要な役割を持って
いますから、変更するときは、　値のところの　カラーコードだったり、数字だったり
のみを修正しましょうね。そして　プロパティと値の間の　：（コロン）は消して
ないか、値の後ろの；（セミコロン）は、消してないか・・・
セレクタのあとの｛や、一番最後の値の｝を消してないか・・・・確認してくださいね。



休憩時間が終わりそうです・・・


ただ、３時間目までは、もうちょっと時間がかかりそうです！

ということで、今からお仕事の準備しま～す！

   

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

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




↓クリックすると、この画面が出てきて・・・
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(=∩_∩=) ブイブイ!!




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

2時間目に行く前に・・・・


私がいっつもお世話になっている

HTMLやＣＳＳの参考サイトは

http://www.tagindex.com/

タグインデックスというサイト です。


これからいろいろ出てくる　色について・・・・

http://www.tagindex.com/color/safe_color.html
カラーチャートです。


そして色と同様これから深いかかわりの出てくる
長さの単位

ｐｘ　ピクセル（画面上の1ピクセル）
%　パーセント(割合）
pt　ポイント（72ｐｔ＝１インチ）　※１インチ＝２．５４センチ

このほかにも沢山ありますが・・・・とりあえずこんだけ知ってたら
コトたりるかと・・・。




(￣０￣;アッ　そろそろ休み時間も終わりです。　
ダッシュ!((( 三( -_-)

最近は、ブログという便利なツールがあるので、あっというまに
ホームページが作成できますよね。

(゜ー゜)(。_。)(゜-゜)(。_。)ウンウン


しかし、少し文字を入力するだけの作業に慣れてきたら、
ふと・・・ここの色、もうちょっと変えたいな・・とか
ここの文字、もう少し大きくしたいな～とか・・・


人間ってちょっぴり欲が出てきませんか？

ムリ!! ☆＼(＞＜;;＞＜)ヘ☆ ムリ!!

ムリじゃないですよ！　＾＾


いきなり高度なことは、さすがに簡単だよ！ってはいえないけど
まずは、簡単なところから始めてみませんか？


それでは・・・・はじまりはじまり　パチ☆＼＼￣ー￣)(￣ー￣//☆パチ


まず、みなさん。このページってどうやって構成されてるか知ってますか？


どんなにホームページ簡単に出来る時代になっても、根底には、

ＨＴＭＬ（ＸＨＴＭＬ）というものを避けて通る事はできません。


では、まずこのリンクルさんのブログがどうやって出来ているか覗いて
見ましょう＾＾

みなさんのブログを表示して



表示(v)をクリックして→※ソースをクリックします。

ソースとは・・・コロッケを食べるときにかけるアレ！ではなくて

簡単に言ってしまえば、コンピュータにわかる言葉で記述された内容
ホームページの場合、HTML（ハイパーテキストマークアップランゲージ）と
呼ばれる言語で記述された内容をブラウザ（インターネットを見るためのソフトを
総称してこう呼ぶ）を通してみた時に、　文字だったり、写真だったりする。
しかし、実際は、文字だけで記述されたたファイルなのです。

その証拠に・・・・このソースをクリックして出てくるのは、



↑こんな文字しか出てこないでしょ！


これ全部を理解するのは、大変だから、今回は・・・・

＜ｂｏｄｙ＞から、下少しだけ変更してみますか・・・＾＾ｖ



↓抜粋した図




今回のポイント

＜ｂｏｄｙ＞とか＜ｈｅａｄ＞とか＜ｔａｂｌｅ＞　＜○○○＞＜/○○＞とか　なっているのが　タグです。

そしてそのタグの中に　ｃｌａｓｓ＝”blogtitle”　　とか　　ｃｌａｓｓ＝”ｄｅｓｃｐｒｉｐｔｉｏｎ”　とか書いて
あるのが、今回の　ＣＳＳ　（カスケーティングスタイルシート）にかなり深い関係が
あります。


ということで、この続きは・・・・　次回です。





ま、多分あと30分もしないうちにはじまると思いますが・・・・
とりあえず　1時間目　終了！。v(=∩_∩=) ブイブイ!!