さて早くも第２回を迎えたファンブログのカスタマイズですが、
今回はＣＳＳ、実践編です。

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

ＣＳＳとはカスケーディング・スタイル・シートのことです。
当然知らない人はそりゃなんだ？ってなりますよね。

通常ＨＴＭＬファイルと別にＣＳＳファイルというのを
用意して使用します。

でもＣＳＳはなくてもＨＴＭＬは表示できるんですね。

じゃあなんで必要なのでしょうか？

利点としては、
ＣＳＳは決まったタグに一気に効果を出す事が出来ます。

ＨＴＭＬ内に書き込むことは出来ますが、非常に煩雑になり
後で見たときに何をやっているかわからなくなるくらいに
見た目が悪くなります。
そしてタグ一つ一つに指示を出さなければなりません。

実際に比較して見ましょう。

画面内にイメージを３つ、大きさ縦100px、横200pxを
表示させるとします。

----------------------------------------------------------------------------------
HTMLでは・・・
＜img src="https://fanblogs.jp/burikama/???01.jpg" heght="100px" width="200px"＞
＜img src="https://fanblogs.jp/burikama/???02.jpg" heght="100px" width="200px"＞
＜img src="https://fanblogs.jp/burikama/???03.jpg" heght="100px" width="200px"＞
----------------------------------------------------------------------------------

----------------------------------------------------------------------------------
ＣＳＳとＨＴＭＬでは・・・
img {
height:100px;
width:200px;
}
＜img src="https://fanblogs.jp/burikama/???01.jpg"＞
＜img src="https://fanblogs.jp/burikama/???02.jpg"＞
＜img src="https://fanblogs.jp/burikama/???03.jpg"＞
----------------------------------------------------------------------------------

このくらいの量ではさして違いを感じないかもしれません。
しかし、ページ内に１００枚のイメージを大きさそろえて･･･
とかなった場合は・・・＼(-o-)／ですよね。

このようにＣＳＳを使う事で見た目をすっきりさせて、
面倒な作業を一気に行う事が出来るのです。

だからイメージの大きさ変更も簡単(^^♪
ＣＳＳの一箇所を変更すれば、一気に１００枚の
イメージが変更されます。

そしてこういう利点と、後はＳＥＯ対策にもなります。
何故でしょうか？？？

詳しい事は長くなりますので控えますが、
要は検索エンジンが検索ワードを見やすくなるためです。
だから検索上位に出来るわけです。

では簡単に実践してみましょう(^^♪

メモ帳（ノートパッド）等を開いてください。

そこに以下を記述してください。
コピーする場合は＜＞が全角になっているので半角に直してください。
これは全角にしないとこのページ上にこのＨＴＭＬで書いたものが表示
されてしまいますので全角にしています(^^ゞ

＜html＞
＜body＞
＜a href="https://fanblogs.jp/burikama/"＞
＜img src="https://fanblogs.jp/burikama/file/183/YnVyabM4.jpg"＞
＜/a＞
＜/body＞
＜/html＞

できたらデスクトップなどわかる場所へ保存してください。
ファイル名はとりあえず「buri.html」とします。

さてそのファイルを開いてみてください。

ブラウザが立ち上がって私のバナーが表示されれば成功です！

クリックすれば私のブログが表示されるはずです(^^♪

ここまで出来たらＣＳＳを試してみます。

「buri.html」を右クリックして「プログラムから開く」で
メモ帳（ノートパッド）で開いてください。

そうしたら先ほど入力したものが画面に表示されると
思いますので、以下のように書き換えて保存してください。

＜html＞
＜head＞
＜style type="text/css"＞
img {
height:50px;
width:300px;
}
＜/style＞
＜/head＞
＜body＞
＜a href="https://fanblogs.jp/burikama/"＞
＜img src="https://fanblogs.jp/burikama/file/183/YnVyabM4.jpg"＞
＜img src="https://fanblogs.jp/burikama/file/183/YnVyabM4.jpg"＞
＜img src="https://fanblogs.jp/burikama/file/183/YnVyabM4.jpg"＞
＜img src="https://fanblogs.jp/burikama/file/183/YnVyabM4.jpg"＞
＜img src="https://fanblogs.jp/burikama/file/183/YnVyabM4.jpg"＞
＜/a＞
＜/body＞
＜/html＞

出来たら同じように開いて見てください(^^♪

おっきくなったブリカマバナーが５個表示されれば成功です！

そうしたら「height」「width」の数字を変えてみたり、
「img」の数を増減させてみたりしてください。

思うように変更できたでしょうか？

表示できなかった方は全ての文字が半角になっているか等
チェックしてみてくださいね（＾◇＾）

これで前回の説明と若干つながったのではないでしょうか？

なんとなくでも構いませんよ。
こういじるとこうなるんだ〜ってのがわかっていただければ(^O^)／

次回は実際にファンブログをカスタマイズしたいと思います（＾◇＾）