ネタが出てこないので、、、ひっさびさに
カスタマイズネタを出します〜(^^ゞ

第１２回のファンブログカスタマイズ講座となりました〜

ファンブログのカスタマイズ（目次）

ちょっと長いですよ〜(^O^)／
覚悟してくださいね〜(^_^;)

---

---

ＣＳＳの基礎

---

---

まあ以前にもＣＳＳには触れているんですが、
細かくはやっていないので復習を兼ねてですね〜(^^♪

ＨＴＭＬはわかってもＣＳＳは。。。
って人多いのですよね。実をいうと私もそうです(・.・;)
記事書きながらお勉強です〜(^O^)／


では初めにＣＳＳとはなんぞや？です。
ＣＳＳとはカスケードスタイルシートの略で、
簡単に言えば文字の表示部分をＨＴＭＬで、装飾をスタイルシートで
やりましょう！っていうことです。

たとえば「ブリカマ日記」という文字を表示する、これはＨＴＭＬの役目です。
これにバックに絵柄を表示したり、位置を指定したりする役目がＣＳＳですね(^O^)／

こんな感じでわかりますかね？


ではＣＳＳとＨＴＭＬがどのようにつながりを持っているか？
ここからがちょっと挫折しやすくなります。。。
が、なんとなくわかってしまうとそうでもないです(^^♪
まあ当然複雑なものはなかなか・・・ですけどね。。。

ファンブログの管理画面から「フリースキンの編集」で「メイン」を
表示してみてください。

そうすると以下のような部分があると思います。
＜link href="{$BlogUrl$}style.css" rel="stylesheet" type="text/css" /＞

この部分で読み込むＣＳＳファイルを指定しています。
ファンブログでの形式なので変えたら表示がおかしくなるので、
ここは知識として。。。(^^ゞ

さて、そこから下がっていくと今度は、、、
＜div id="container"＞
＜div class="entry"＞

みたいなのがたくさんあると思います。

これが重要なんですね〜(^O^)／


では装飾したい場所の指定です！

今度はファンブログの管理画面から「フリースキンの編集」で「スタイルシート」を
表示してみてください。

#container {
border-left:4px solid #79F;
border-right:4px solid #79F;
}

このような部分があるかと思います。

おや？何か一緒のものがありますね〜
そうです！「container 」というのが一緒ですね(^O^)／

スタイルシート（ＣＳＳ）では「#container」、ＨＴＭＬでは「id="container"」

これでつながりがわかりますね(^.^)

ん？「class="entry"」はなんでしょう？！

ではスタイルシート（ＣＳＳ）をもう一度見てみますかね。。。

#entries .entry {
margin-bottom: 30px;
}

こういうのがあるはずです(^O^)／

わかりますかね？
スタイルシート（ＣＳＳ）では「.entry」、ＨＴＭＬでは「class="entry"」です。

でもなんか変な書き方ですね・・・
「#entries .entry」となってますね〜

これは以下のような状態のものにスタイルシートは定義して！
と言っているんですね〜

＜div id="entries"＞
＜div class="entry"＞
＜/div＞
＜/div＞

言葉でいうと、タグのＩＤ名がentriesという中にあるタグのclass名がentry
というものにこの定義をしなさいよ！
ってことになります〜(^O^)／

なので、＜div id="entries"＞に囲まれていない＜div class="entry"＞には
定義されないのです＼(◎o◎)／！

他にも・・・
「#entries .entry a」とか「#entries .entry td」なんて書き方もあります。

＜div id="entries"＞
＜div class="entry"＞
＜a href="burikama"＞ブリカマ＜/a＞
＜/div＞
＜/div＞

そうです。直接タグの名前で定義しているんですね〜(^.^)
「#entries .entry a」は上の＜a href・・・の部分に定義しろ！ってことですね。

では上に書いてあるＣＳＳがどのようにＨＴＭＬに定義しているかの説明です〜(^.^)

#container {
border-left:4px solid #79F;
border-right:4px solid #79F;
}
#entries .entry {
margin-bottom: 30px;
}

まず、記述の説明、、、
この「｛」・「｝」で囲まれた部分が定義される内容です。
「#container」で定義する内容は「border-left:4px solid #79F;」と「border-right:4px solid #79F;」
ってことになります。
同様に「#entries .entry」も一緒ですからね〜

では定義されている内容です。
これは＜div id="container"＞に囲まれた場所の左右に縦に線を引く
という定義になっています。
「border-left:」が左に線、「4px」線の太さ、「solid」線の種類（直線）、「#79F」線の色
となります〜(^_^;)

ってここら辺から挫折しちゃう？！

難しく考えるとハマるのでそんな考えないで触ることが大切です(^^♪
そうすればだんだん意味が分かってくると思います(^^ゞ

まずはスタイルシートに定義してある数字部分を色々変えて
プレビューしてみましょう(^O^)／

保存しなければ好きなように変えて大丈夫です(^^♪
とにかく触って変えてどういう風になるかを目で確認すること！！

これが一番の勉強法ですね(^^♪

定義する内容は大量にあるのでここで紹介すると大変な
ことになるので省略しますが、検索すれば色々出てきますので
そちらを参考にしてみてください(^O^)／

まずやってみること！それが上達への近道です！
習うより慣れろですね〜(^^ゞ


てなことで長くなりましたが、基本的にはこのようにデザインは
行われています。

色々変えてみて自分なりのデザインでブログを楽しみましょう(^^♪


おすすめの無料レンタルサーバ