2007'01,31 (Wed)
超簡単カスタマイズ講座その2
）、このカスタマイズ講座に関しては需要があるのかどうか、さっぱりわからないものの、どなたかの役に立っていることを祈りつつ、初心者のためのお手軽カスタマイズ講座その2です(;^_^A余談ですが、今回はリンクの説明をするのに、HTMLをここに書き込んだら、そのまんまタグとして解釈されてしまい、2回目にして頓挫するかと思いました
検索で解決策を探してみたところ文字実体参照について書かれているサイトを見つけました。
おお、これで解決！ ……はいいけれど、いちいち書き換えるのはすごい面倒臭そう（爆）。
が、他にも色々と見て回っていると、同じような悩みを持っていらっしゃったブログのリンク先から……こーんな便利なツールが！！(≧∇≦)ｂ
HTML特殊文字変換ツール
もし、HTMLをブログで表示させるのに困ってる方いたら、これを使えばバッチリですよー、HTMLをそのまま表示させたいところを変換するだけでOK！（って知らなかったの私だけだったらどうしよう；）。
ここからが、カスタマイズ講座2回目です（前ふり長っ）。
今度は色を変えてみましょう。
do_meganeを今回も例にとって、説明しますね。
私のテンプレは各部に細かすぎるくらい色の設定をいちいちしているので、面倒臭いかもしれませんが、ソースにどの設定が何の色かは、逐一書いてありますので、頑張って変更してください（;´▽｀A``
ぶっちゃけ、そんなに細かい指定はいらないんじゃ、全部同じ色、同じサイズで構わないんじゃぁー、という方は、bodyで全体の設定した後は、各部のフォント色とフォントサイズ指定などは削除してもらっても構いません。
でも、眼鏡テンプレはモノクロ色でまとめているので、どんな感じのカスタマイズをするにしても、細かい文字の色とかは変更しなくても、さほど違和感はないとは思いますので、面倒臭ければ、そのままでも……。
カラーコードって何？ という方は WEBカラーリファレンスを見て、コピペすると便利ですよ♪
#が頭についてる6桁の数字を入れてくださいね。
（#000000や#cc3366みたいに同じ数字が2組ずつ繰り返している数字は、スタイルシートに書く場合、#000や#c36みたいに3桁に省略することも可能です）。
一番、色を変えて、イメージが変わるのは、背景ですよね。
スタイルシートの編集画面の上の方を見てください。
body{
text-align: center; /* 中央に配置 */
color: #000; /* 画面全体の文字色 */
font-family:"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF","\30D2\30E9\30AE\30CE\20Pro\20W3",'Hiragino Kaku Gothic Pro','Osaka',sans-serif; /* 画面全体のフォント指定 */
background-color: #fff; /* 画面背景の色 */
background-position: center top; /* 背景画像の位置 */
background-repeat: repeat-y; /* 画像を縦にリピート */
background-image: url(http://blog-imgs-14.fc2.com/d/o/k/dokode/kabeg800mono.gif); /* 背景画像のURL */
padding: 0px;
margin:0px;
font-size: x-small; /* 古いIEの文字サイズ */
voice-family : "\"}\""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size: 12px; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}
眼鏡テンプレは全体の背景に白地にレイアウトの横にかすかなグラデが出る壁紙を使っています。
これがあると、背景に色はつけられないので、背景に色をつけたい方は、赤字の行を削除してください。
そして、青い字のところに好きなカラーコードを書きこめば、この緑色を指定してみた見本のように、背景色が変わります。
また、画面全体の背景に壁紙を使いたいのでしたら、
background-position: center top; /* 背景画像の位置 */
background-repeat: repeat-y; /* 画像を縦にリピート */
この2行だけを削除します。
そして、壁紙を自分のブログにアップロードして、そのURLを背景画像のURLのとこの()の中に入れてください。
ところで、素材屋さんで素材を借りた場合は、よーく規約を読んで、リンクが必要な素材屋さんなら、リンクしてくださいね。
商業サイトは使用不可だったり、個人使用の場合はリンク不要だったり、どんなサイトでもリンクは必ずしなくてはならなかったり、ブログで素材は使ってはいけないところもあったり、直リンク以外はOKなところもあったり……と、素材屋さんによって、規約はまったく違いますので、目を皿のようにしてよく読んで、必ず規約は守ってください（うちの規約もー）。
リンクを貼る場合は、スタイルシートではなくHTMLソースの方に書き加える必要があります。
HTMLソースの最後の方にある↓を探してください。
<!--▼フッターここから▼-->
<!--削除不可ここから-->
<div id="footer">
<p>copyright © <%blog_name> all rights reserved</p>
<p><%ad> <%ad2> / Template by <a href="http://dokode.blog87.fc2.com/" target="_blank">どこドア</a>
</p></div>
<!--/削除不可ここまで-->
<!--/フッターここまで-->
どこドアというのがある行のすぐ下に
Material by <a href="素材屋さんのURL" target="_blank">素材屋さんの名前</a>
赤字のとこを書き換えて、入れてください。
左右の点線がいらなければ、下の青字の行も削除してください。
/* 全体のレイアウト */
#layout{
width: 800px; /* レイアウトの幅 */
margin: 0px auto; /* 左右のマージンを自動計算して中央に配置 */
padding: 0px;
background-color: #f5f5f5; /* レイアウト部分の背景色 */
border-left: dashed 1px #000; /* 左に点線 */
border-right: dashed 1px #000; /* 右に点線 */
background-image: url(http://blog-imgs-14.fc2.com/d/o/k/dokode/grag1.gif); /* 背景画像 */
}
レイアウトの中にもかすかなモノクロのグラデ壁を背景に使っているので、これも必要なかったら削除してください。背景色もお好みで。
次回は、メニューや記事の見出しタイトルをスタイルシートで様々に飾ってみよう……の予定。
