※今日の記事は、ちょっと専門的な言葉もあったりしますが、
楽にカスタマイズをしてみたい!という方は、真剣に読んで実行してみてください。
楽しなくて良い方は、面倒なので読まない方がいいです。
どこにどんなCSSタグが入っているのか?
この部分は、どんな名前のCSSタグなの?
これらは、アメブロ開発者でないと、知るよしもありません
![ぎく](https://emoji.ameba.jp/img/user/ou/ougiaina/1624.gif)
例えば、ブログのタイトルは h1 という名前が指定されています。
更にその h1 は header という div に入っています。
HTML上で見ると、下記のようになっています。
<div id="header">
<h1><a href="http://ameblo.jp/amecustom/">ここにブログタイトルが入ります。</a></h1>
</div>
それを装飾するCSSは下記のようになっています。(あくまでも参考です)
#header {
background-image:url(http://xxxxxxxx.gif); /* 画像のアドレス */
height:150px;
margin:0;
padding:0 0 10px;
}
#header h1 {
font-weight:bold;
font-size:1.7em;
line-height:1.2;
margin:0;
padding:0 5px 8px;
}
#header h1 a {
color:#333333;
}
CSSを勉強していない人は、わけ分かりませんよね?
こんなタグをたくさん見るだけで、吐き気をもよおす人もいるかも知れません
![ガーーン…](https://emoji.ameba.jp/img/user/ra/raito080/8114.gif)
私だって、いちいち、どれがどのタグで…なんて見ていません。
なのに、なぜ?カスタマイズが出来るのか?
ブラウザ Firefox の Firebug というツールを使っているからなのです
![ビックリマーク](https://emoji.ameba.jp/img/user/ap/aporitan/242585.gif)
※ファイヤーフォックスのファイヤーバグと読みます。
ブラウザとは?
インターネットを見ているウィンドウです。
おそらく通常Windowsの方は、InternetExplorer(通称「IE」)を使っていると思います。
自分が何を使ってるか分からない方は、今見ているウィンドウの一番上を見てください。
そうすると、何やら小さい画像と、見ているブログの記事名と、
アルファベットで何やら書いているのが分かりますか?それがブラウザの種類です。
最近ではGoogleさんが、Google Chrome と言うブラウザを出しましたね。
あと、Macユーザは、Safari と言うブラウザを使っていることが多いです。
Firefox の Firebug とは?
ブラウザFirefox 内で使用できるHTMLやCSSタグをマウスオーバーするだけで、
どこにどんなタグが指定されているのか?分かるツールです。
また、実際のタグを書き換えなくても、その場で試験的に書き換えることも可能です。
試して問題なければ、実際のタグを書き換えると言う手順を踏むことができます。
下記のような表示が、ブラウザ Firefox のウィンドウの下につきます。
カスタマイズを楽にしたいなぁ~と思っている方は、
是非!ブラウザを Firefox に変えてください。というか、必ずです
![ビックリマーク](https://emoji.ameba.jp/img/user/ap/aporitan/242585.gif)
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
※上記でも分かりずらい場合は、GoogleやYahoo!などで「Firebug 使い方」「Firebug インストール」など検索してみてください。
追記:
WEBデザイナーとして仕事をし、CSSが分かる私ですら、Firebug を使わないとカスタマイズを行えません。
いつまでも人に学ぶカスタマイズより、自分で自在にカスタマイズしてみませんか?
うんとカスタマイズが楽になり、更に楽しくなるはずです
![ハート](https://emoji.ameba.jp/img/user/ki/kirakira-dream/5540.gif)