超簡単カスタマイズ講座その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); /* 背景画像 */
}
レイアウトの中にもかすかなモノクロのグラデ壁を背景に使っているので、これも必要なかったら削除してください。背景色もお好みで。
次回は、メニューや記事の見出しタイトルをスタイルシートで様々に飾ってみよう……の予定。
超簡単カスタマイズ講座その1
カスタマイズははじめて……という人向けにいきたいと思います。
おそらく、BLOG初心者の方は機能的なカスタマイズより、見た目の変化の方が気になると思いますので、見た目を超簡単に変える方法をお教えしますね♪
（機能的なカスタマイズ方法なら、FC2ブログのテンプレート工房さんが大変わかりやすくて親切で、個人的にお勧めです＾＾）
↓のURLは、私がdo_meganeを、ためしに10分程度で色とヘッダー画像を変えるだけの簡単カスタマイズをしてみたものです。（画像加工時間は除く）
http://dokode.blog87.fc2.com/?style2=do_green&index
使っている画像はヘッダーのみ、後は色だけというシンプルさ。
それだけでも。見た目はずいぶん違いますよね♪
さすがに自分のソースだから早いと言うのもありますが、慣れればどなたでも一時間以内にこのようなカスタマイズなら出来るようになりますよ♪
で、具体的にそのカスタマイズ方法を、順に説明していこうかと思います。
元にするのはとりあえず眼鏡テンプレにしますね。
今、登録している最新版に添って、説明していきます。
まずはヘッダー画像を変えてみましょう。
スタイルシートの編集画面から、以下の箇所を探してください。
（わりと上の方にあります）。
/************************************/
/* ヘッダー */
#header{
text-align: left; /* 左寄せ */
width: 800px; /* ヘッダーの幅 */
height: 196px; /* ヘッダーの高さ */
background-color: #fff; /* ヘッダーの背景色 */
background-image: url(http://blog-imgs-14.fc2.com/d/o/k/dokode/bmegane1.jpg); /* ヘッダー画像のURL（変更したい場合はここを変えてください） */
background-repeat:no-repeat;
background-position: left top; /* ヘッダー画像を左上にひとつだけ置いています */
line-height: 1.3; /* 行間 */
padding: 0px;
margin: 0px 0px 10px 0px;
}
説明にも入ってますが、URLを変えるだけです。
画像のサイズは幅が800px以下ならなんでも構いません。
ぴったり合う必要はないので（もちろんぴったりでもOK、あとこのテンプレ自体、幅変更も簡単に出来ますので……この記事参照、サイズは何でも構わないのです）、適当な大きさの好きな画像を、ご自分のブログにファイルアップロードでUPしてください。
そのURLに書きかえます。（URLはアップロード画面で、画像のサムネイルをクリックすればわかります）。
上では
height: 196px; /* ヘッダーの高さ */
と設定してありますが、UPした画像の高さにあわせてここも書き換えてください。
これで左上端にあなたのUPした画像が表示されたはずです。
background-repeat:no-repeat;
background-position: left top; /* ヘッダー画像を左上にひとつだけ置いています */
この部分で画像を繰り返さず、左上にひとつだけ置くという設定をしています。
このleft topをright topにすれば右上端に画像を置けます。
centerにすれば、中央に置けます。
（ぴったりサイズでヘッダーのバナーを作った方は指定は何でも構いません）。
※他にも指定は色々あります。
right bottom（右下）
left bottom（左下）
center bottom（中央下）
center top（中央上）
もっと細かく指定したければ……
background-position:●% ●%;
●のところに色々入れてみると、位置が変わりますよ。
たとえば100% 0%ならright topと同じ指定をしたことになります。
さて、画像を置いた位置によって、ブログのタイトルや説明文の位置も加減してください。
/* ブログタイトル */
h1{
text-align: right; /* 右寄せ */
font-family: Verdana,Chicago,Arial,Helvetica,Osaka; /* タイトルのフォント */
font-size: 18px; /* タイトルの大きさ */
color: #000; /* タイトルの色 */
font-weight: bolder; /* タイトルの太さ */
margin: 0px;
padding: 120px 20px 0px 20px; /* ブログタイトルの位置、上・右・下・左の順に記述 */
}
/* ブログタイトルのリンク設定 */
h1 a:link, h1 a:visited, h1 a:active{
color:#000;text-decoration: none;
}
h1 a:hover {
color: #ccc;text-decoration: underline;
background: transparent; /* 背景透明 */
}
/* ブログ説明文 */
h2{
text-align: right; /* 右寄せ */
font-size: 13px; /* 説明文の大きさ */
color: #666; /* 説明文の色 */
font-weight: normal; /* 説明文の太さ */
margin: 0px;
padding: 10px 20px 0px 20px; /* 説明文の位置、上・右・下・左の順に記述 */
}
text-align: right;を
text-align: left;にすれば、字が左寄せになります。
text-align: center;で中央に配置されます。
paddingは余白を示していると思ってください。ここの数字を適当に変えてみて、画像の大きさや配置とのバランスを取ってください。
需要があるようなら、次回に続きます。
テンプレート部門に参加中。クリックしてくださると励みになります♪
悪あがき中
自分のだけじゃなく、色々なサイトさん……個人的に信用・尊敬していて、なおかつXHTMLの正しい書式で作成している方々のサイトをbrowsershotsで表示してみたら、…軒並み、IE5.5では文字化け・カラム落ちしていたので……なーんだ、それが正解なんだ！？
で、私は考えました、おそらbrowsershotsでは文字化けしていても、日本で見れば平気なんだろう、ということはoverflow: autoでも使って、横スクロールを出せば、カラム落ちは防げる……！?
やってみました、カラム落ちは防げましたが、ネスケではoverflow: autoを入れない状態でなら、普通にはみ出すこともなく表示されていたものが、overflow: autoを入れただけで、あたかもはみ出したかのように表示されてしまいました。しかも高さを指定してないせいか、上下にも出てしまいました
↑とてもマヌケなネスケの図
（あ、悪いプラグインとは、この月別カレンダーのことです(^^;;）
しかも、よく考えてみたら、文字化けのせいでカラム落ちしたんなら、overflowでカラム落ちが防げたとしても、読めないことには変わりなく、そんな悪あがぎはするだけ無駄というものでした(-▽-u
自分のアホさにうんざりしながらも、結構こうやってごちゃごちゃ試すのも、今のところは面白い？
でもそれって結果が問われない遊びだから面白いのであって、これが仕事だったらすごい大変ですよね……世のWEB製作関係の仕事をしている方々はさぞかし苦労してるんだろうなあ……
それにしてもいい加減、誰の役に立つわけでもない半端な疑問（疑問だけで正解がないとこがミソ
）とアホな行動記録が続きすぎの自己満足ブログなのに、さっき見たらブログランキングの順位がテンプレ部門で7位とびっくりするほど上がっていたので（ありがとうございます）、次回はお礼に役立つカスタマイズ情報でも発信しようと思ってます（;´▽｀A``なんて書いたけど、今日はまた発見があったので追記……
文字化け対策？
それにしても、xml宣言どころか、lang属性を指定しただけで、IE5や5.5で文字化けするのは何故！？？
（もっとも私の環境下では問題なく見れるIE6でも、表示結果は文字化けしていたこともあるので、うーん……）。
ゲートウェイで、文法チェックをするたびに怒られる（笑）ので、あの後、公式テンプレであってもカラム落ちさせるという悪さをするプラグインとの両立も何とかして（何か必ず親ブロックに対して幅100パーセント指定になっているような？ 違うかもしれないけど、そのつもりで作るとうまくいったので……）xml宣言他を喜びいさんで入れてみたものをチェックしたんだけど、xml宣言なし、lang属性なしだとちゃんと表示されるものがIE5.1 5,5で文字化けしたことによりカラム落ちするんです＞＜
もちろんこれは私の場合であって、他の方のテンプレは確認してないのでわかりませんが。色々他の部分との兼ね合いや配慮不足とかもありそうだし……。
何がどうなっているのやら……またも迷宮に入り込んでしまうのでした……。
わけはわからないけど、解決法だけはわかったんだから結果オーライ……でいいのかしらね？
解決方法を検索で探していたら、こんなサイトを見つけたんですが、色んな意味で怖くて、まだ読めてません
テンプレート部門に参加中。クリックしてくださると励みになります♪
IE5対策
browsershots
リクエスト（自分のURLをうちこみ、どのブラウザでの表示結果が知りたいかを選択）してから、実際見れるまで1時間以上かかったりもしますが、いったんPC切っても、数時間後でも、またそこにアクセスすれば、結果がわかっているので、すごーーーく、便利です
そこで見たところ、私のテンプレは主だったブラウザではOKだったものの、IE5ではレイアウトが崩れることがわかりました
その時、見た眼鏡テンプレをIE5にも対応させましたので、気になる方はダウンロードしなおしてください。
カスタマイズしてあるので、もう取り替えたくないという方は、以下の2箇所を変更すれば、IE5でも綺麗に見れるようになります。
その1
変更前
/* メイン囲み */
#main{
float: right; /* 右に回り込む */
width: 580px; /* メイン幅 */
margint: 0px;
padding: 0px;
}
上を下に全部でも該当箇所だけでもいいので変えてください。
変更後
/* メイン囲み */
#main{
float: right; /* 右に回り込む */
width: 560px; /* メイン幅 */
margint: 0px;
padding: 0px;
overflow:hidden;
}
その2
変更前
/* エントリー（記事） */
/* 記事囲み */
.entry_block {
text-align:left;
border-collapse:collapse; /* 余白をなしに */
background-color: #fff; /* 記事部分の背景色 */
border: 1px solid #000; /* 記事を実線で囲んでいます */
padding: 0px;
margin: 25px 15px 35px 10px;
}
変更後
/* エントリー（記事） */
/* 記事囲み */
.entry_block {
text-align:left;
border-collapse:collapse; /* 余白をなしに */
background-color: #fff; /* 記事部分の背景色 */
border: 1px solid #000; /* 記事を実線で囲んでいます */
padding: 0px;
margin: 25px 15px 35px 0px;
}
overflow:hidden;は入れても入れなくても……記事幅をはみ出すような画像を貼ると、はみ出した部分の画像は見れなくなるようですが、レイアウトは崩れなくなります。
下の記事で眼鏡テンプレを右メニューにする方法を書いてますが、右の場合は、leftとrightを下で書いた手順で交換し
右メニュー用の変更
/* エントリー（記事） */
/* 記事囲み */
.entry_block {
text-align:right;
border-collapse:collapse; /* 余白をなしに */
background-color: #fff; /* 記事部分の背景色 */
border: 1px solid #000; /* 記事を実線で囲んでいます */
padding: 0px;
margin: 25px 0px 35px 20px;
}
この部分を↑に直していただければ、IE5でも綺麗に見れます。
ふう、それにしても便利なものを見つけるたんびに、色々気にしなくちゃいけないこと増えるなあ……しかもこんな簡単なことで解決できるとは！！ 今まで対応できてなかった方が馬鹿だわ……わかっているつもりと実際に理解しているのとでは大違いでした(-▽-u
どこドアはレベルアップした！ 賢さが1あがった、体力が10下がった！
（解決方法自体は簡単でも、そこに思いいたるまではアホなので大変なのです；）
あとやっぱ、私レベルだと、最初から理詰めできちんと構築していくより、実地に見て、そこから模索していき、理論もそのために利用する……ってノリじゃないと、モチベーションも上がらないのよね……。
それと、どうしてもデザイン先行になるし……（今はレベル低めなので、デザインを考える時間の数倍、確認作業に費やしてはおりますが
）。そして、IEのバージョン違いを共存させるソフトも発見！
TredSoft
IEなんか沢山入れたら重くて仕方ないような気がしますが、大丈夫なのでしょうか？
IE5と6と7が共存できれば、テンプレのためだけじゃなく、そこそこ人が来るサイトもやっているので、便利は便利なんですが、どうしようかなあ……。
ところで、共有テンプレートにはIE6限定というのも多いのですが、私がレイアウトそのものをCSSでやり出して1ヵ月強というスキルのわりに色んなブラウザでの見え方気にするのは、サイトを一時期は、遠隔地に住んでいるMAC・IEユーザーと共同運営していたので、誰にでも見れるってことが最重要だったからかな……。
もっともサイトの方はレイアウトはテーブルONLYで、CSSは修飾的なことだけに限っていたので、そんなに苦労はなかったんですが。
なんせこういうサイトとかこういうサイトの信者（？）だった世代ですから……
自分の力不足や無知・アホさ加減に、めげそうになることも多いんですが
まだ今のところはやる気あるので、頑張りたいです……
テンプレート部門に参加中。クリックしてくださると励みになります♪
眼鏡テンプレを右メニューにする方法
眼鏡テンプレの右メニュー版を作って欲しいというメールをいただいたのですが、簡単にカスタマイズできますので、ここにやり方を書いておきますね
見本は今、表示している感じになります（って、いつまで表示しているかわからないんですが……爆）。
変更箇所は4つだけです。
●その1
/* メニュー囲み */
#menu_block{
float: left; /* 左に回り込む */
width: 220px; /* メニューの幅 */
background-color: #transparent; /* 背景を透明に */
margin: 0px;
padding:0px;
}
上記の箇所を探してください。
赤字のところを
float: right;
に変えてください。
●その2
/* メニュー内枠 */
.menu_body{
margin-left:10px;
padding: 0px;
}
赤字を
margin-right:10px;
に変えてください。
●その3
/* メニュータイトル */
.menu_title{
text-align: left;
font-size: 12px; /* メニュータイトルの大きさ */
color: #fff; /* メニュータイトルの色 */
background-color: #000; /* メニュータイトルの背景色 */
font-weight:bold; /* メニュータイトルの太さ */
margin:25px 0px 5px 10px;
padding: 4px 5px;
}
赤字を
margin:25px 10px 5px 0px;
に変えてください。
●その4
/* メイン囲み */
#main{
float: right; /* 右に回り込む */
width: 580px; /* メイン幅 */
margint: 0px;
padding: 0px;
}
赤字を
margin-right:10px;
に変えてください。
これでOKです
うまくいったら教えてくださると嬉しいです♪
どうでもいいことですが、一番上の
background-color: #transparent; /* 背景を透明に */
って#が余分なので、ソースのアホっぽさが気になるようでしたら#を削除、もしくは行ごと削除しちゃってください(^_^;)
この行自体あってもなくても、影響のない無駄なタグなので、そのままにしておいても問題はなく、見なかったことにして放置しても構いませんが(;^_^A
一度、そういうのちゃんと見直さないとねー
テンプレート部門に参加中。クリックしてくださると励みになります♪
百合アリステンプレ登録されてました！
NECKDOLLさんのイラストがすごくかわいくてミステリアスで素晴らしいので、黒基調に挑戦したくなって作ったものです♪
こういう感じがお好きな方は、使ってやってくださると嬉しいです
不備やご質問など、百合アリステンプレに関するコメントがもしあれば、この記事にお願いしますね。
テンプレート部門に参加中。クリックしてくださると励みになります♪
MACでの見え方がわかるサイトが！
素晴らしいーーー
これでMACがなくても大丈夫！？ 少なくとも、レイアウト崩れがないかどうかの確認は出来るというものです
ありがとうございます、Opuｓ-iさん！！
（上記サイトさんは他にも沢山便利なものを紹介しておられました！）。
ちゃんと見えたのに一安心……そして、むしろMACで見た方が、私のテンプレいい感じのような気が？
フォントにOsakaを指定しているせいかなあ……Osakaがどんなものなのか実際には見たことないにも関わらず、Osakaはよい！ という評判だけは前からよく聞いていたのでMAC用には指定していたんですが、へえ、こんななんだー、何かOsakaってかわいくて読みやすくて、いいですね
テンプレート部門に参加中。クリックしてくださると励みになります♪
