携帯写真と映像感想。気紛れ更新ご容赦願う。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/--(--) スポンサー広告│ トラックバック(-) コメント(-)
カスタマイズへの道4

water。4つ目のテンプレート。水族館の水槽の写真を固定背景にしました。影絵みたいな魚がアクセントになってくれればいいなと思いつつ、この時期(2月)には寒いかとも思いましたが、あえて季節外れに挑戦(笑)。
エントリテーブルにフィルタタグを使用したのでIE推奨にしましたが、少しカスタマイズすれば他のブラウザでも重い感じにならないので、参考にしてもらえれば嬉しいです。
(他のブラウザでこのテンプレートを見るとエントリテーブルがべったり重い感じがするんです)
CSSのmain要素(真ん中辺り)

.mainEntryBlock {
width : 500px;
margin: 20px 20px 30px 35px;
background-color: #FFFFFF;
filter:Alpha(style=0, opacity=60);
}

.mainEntryBase {
margin: 7px 10px 10px 10px;
width : 480px;
ackground-color: #c0c0c0;}

の太字部分を削除し、

.mainEntryBlock {
width : 500px;
margin: 20px 20px 30px 35px;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-color: #808080;
border-top-color: #808080;
border-right-color: #808080;
border-bottom-color: #808080;
}

EntryBlock部分に新たに太字部分を追加します。
こうするとエントリテーブルの背景色を指定せず枠線のみのテーブルになり、背景の写真が見えるようになります。
border-widthの数字を変えれば枠線の太さを、border-styleを変えれば枠線の種類(例:doubleにすると二重線)を、border-colorで枠線の色を変えることができます。
上下左右それぞれを指定する必要があるので少し手間がかかりますが、逆に言えば上下左右で線の太さや色を変えることも出来るわけです。
難を言えば背景が煩い感じになってしまうことですね(苦笑)。
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。