このポストは文字数 約：2463文字、約 4分で読めます。
フト・・・
ブログカスタマイズとまったまんまだったので、なんとなく。
今のテンプレはHTMLもCSSも１から全部書き起こしでやってて
独自タグやループ部分をひっぱってきてるだけな感じ。
なんとなく、それに関するメモ。
html、bodyから、loop部分まで・・・とおもったら、preもcodeも効きませんｗｗｗｗｗｗｗ
xmpタグ使うと、なんかbrが勝手にオマケについてくるしｗｗ
SS撮るのもメンドーくさいし・・・。
ってことでCSSのみ。
むちゃくちゃ長いのでヘッダ指定まで。
あと、ちなみに、このコードだとCSSのバリデートは通りません。
HTMLなんてもっとヒサンだしｗｗｗ警告ばっかだったｗｗｗｗ
*{
margin: 0px;
padding: 0px;
font-family:Modern, "メイリオ", Meiryo, Osaka;
}
なぜか、bodyとかに設定したものが効かなかったのでワイルドカード使用・・・・。
Modernは、windowsなら標準で入ってるっぽいので、英数字の見た目良くするのに利用。
Mac用に、Osaka（ゴシックフォント）を指定。
Vista以前はもう除外する勢いでMSゴシックなどはハズシマシタ。
まあ、標準フォントが勝手に割り当てられるはずです・・・確か。
あと、IE８以前も除外する勢いで対応させてませんｗ
可読性を考慮すると、やっぱりゴシックフォントに落ちつくんだよなぁ。
body {
margin: 0px;
padding: 0px;
background-image: url();
color:#333333;
font-family: Modern, "メイリオ", Meiryo, Osaka;
font-size: 1em;
text-shadow: 1px 0px 3px #666;
min-width: 1100px;
line-height: 1.2em;
}
min-widthは、最低幅指定です。たとえばブラウザを縮小したときに
width指定ないもの・％指定してる部分なんかはブラウザの幅まで縮小されちゃうので。
リキッドレイアウトだったら逆にこれ指定してたらマズイ？でもないか・・・。
IE８以前除外の理由のテキストシャドウがいます。
htcとかいうファイル入れてやればいけますが。
h1,h2,h3,h4,h5,h6,ul,li,address {
font-weight: normal;
font-style: normal;
}
見出し文字とかの太字やらナナメやらを解除。
p,img{
margin: 2px 0;
}
ul li {
list-style-type:none;
list-style-position: outside;
}
table {
border-collapse: collapse;
}
.clear {
clear: both;
}
.aligncenter{
text-align: center;
}
.alignright{
text-align: right;
}
.alignleft {
text-align: left;
}
/*■■■■■■■■■■■■■■■■■■■■■■
Link color setting
■■■■■■■■■■■■■■■■■■■■■■
*/
a img {
border: none;
}
画像にリンクを張ったときに、リンクの線を消してます。
コンテンツ部分は別途で指定いれて線を出すようにしています。
a:link {
color: #E42E8C;
text-decoration: none;
}
a:visited {
color: #E42E8C;
text-decoration:none;
}
a:hover {
color: #E42E8C;
text-decoration:underline;
}
a:active {
color:#E42E8C;
}
#contents_outer {
background-image: url();
background-repeat: repeat-x;
width: 100%;
}
#contents_outer #header {
margin: auto;
width: 1100px;
background-image: url();
height: 500px;
background-repeat: no-repeat;
background-position: right;
}
#main {
width: 1100px;
margin: auto;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#header h1 a {
width: 280px;
display: block;
position: absolute;
top: 282px;
height: 194px;
left: 60px;
text-indent: -9999px;
}
タイトルや文字を、画像に置き換えたいときに、text-indentを利用。（またはdisplay: none;）
検索エンジン的にはグレーゾーンですが、今のところペナはなし。
幅・高さ指定して、positionで、位置を動かしてるので、題名のところにしか反応しません。
これがCSSの便利なトコ・・・。
ちなみに、マウスオーバー用のJavaScriptも一応持ってることは持ってる、
けど、いちいちクラス指定してやるやつなのでメンドークサイ。
#header h1 a:hover{
background: url() no-repeat left top;
}
普段、タイトルロゴには使わないけど、マウスオーバー設定。
気づく人なんかおらんじゃろ・・・ｗ
#description {
position: absolute;
left: 376px;
top: 372px;
width: 638px;
}
説明文トコですね。
ちょい見た目こだわりたい人は、ここら辺がんばればイケマスよ！
雛希