• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+

えす#055のブログ一覧

2010年09月08日 イイね!

さて、またまたMUSIC改

ネタが無いので、昔勢いで作ったスタイルシートを引っ張り出してきました。
HTT「ごはんはおかず」「U&I」発売記念って事で・・・それにしても二曲とも平沢唯の作詞ではないですか。次は誰が作詞を担当するのかな。

透明度を少々弄ってはいますが、基本的なレイアウトはそのままです。

とはいえ、このスタイルシート、元になったのは勿論みんカラ標準のスタイルシート「MUSIC」このスタイルシートは、元からブラウザによって見え方が変わると言うスタイルシートを採用していて、そのCSSを読ませて頂きましたが随分と勉強になりました。
正確にはIE6とそれ以降のブラウザ名のですが、このお陰で「IE6のときだけ透過GIFを使う」とか業が使えるようになり、現在に至っています。

そういえば、こんなスタイルシートも規制対象になるのかな。宣伝とか著作権とかで・・・
Posted at 2010/09/08 21:22:36 | コメント(1) | トラックバック(0) | スタイルシート/弄り | 日記
2010年09月02日 イイね!

背景変更

なんか久し振りに「アニメ系」から離れました。今回は、田んぼって事で・・・またすぐに飽きるとは思いますが。

で、背景の固定の仕方って皆さんはご存知ですかね。私的には今更感たっぷりなんですが、たまに、「固定した方が良いのに」って思ってしまうブログを見かけるモンで。いや、勿論主観ですが・・・

事の起こりは、みんカラのスタイルシート新仕様への移行が始まった2009年4月から始まるんですが、その当時のブログを掘り返してみると。

新スタイルシート弄ってみた 2009/4/3
背景の固定とスタイルシートの透過について書いています。背景の固定はIE6では固定されない不完全な方法でしたが、当時からFirefoxを使用していた為、気が付くのが遅れました。また、背景の透過は現在のような半透過ではなく、完全透過だったため、背景画像を加工する必要が有りました。

続・新スタイルシート弄ってみた 2009/4/6
現在の仕様の様な半透過画像を利用した、多分最も簡単な方法を紹介しています。

この上記二つが、スタイルシート弄りの基本でしたね。この方このブログを見つけるまでは・・・

ここからが地獄の日々でした。と言うのは大袈裟ですが、試行錯誤の繰り返しで何とかワイド化に成功しました。

懲りずに「ねこ」700px
今更ですが、この頃から基本的な構造が変わっていないんだよな。部品画像の入れ替えはしているから、見た目変わったようには見えるけど・・・。
あえて変わった部分を上げるなら、IE6でのみ透過GIF画像に切り替えるあれくらいか・・・

でも、もうIE6をつかっている方もいないだろう・・・って、いませんよね?YouTubeにも見放されて、葬式さえ出されて腐った牛乳とさえ言われたブラウザなんて・・・・・・いや、サブ機には入っていますが(笑)
Posted at 2010/09/02 22:20:03 | コメント(0) | トラックバック(0) | スタイルシート/弄り | パソコン/インターネット
2010年08月01日 イイね!

とりあえず公開

さんこうになどなりはしないでしょうが、じこまんってことで。(爆)
テキストファイルを新規作成して、スタイルシートを全文コピペし、そのテキストファイルをスタイルシート/詳細編集/スタイルシートの操作/読み込みから読み込んで保存すると、まるっきり同じスタイルシートが出来ますし、部分的にコピーするなら部分的に同じ物が出来ます。
所々無駄な行が有りますが、殆どは昔その場所に画像を入れていた名残です。気にしないで下さい。

/*--------------------------------------
User Custom CSS
UserID = 240136
Date = 2010/07/31 20:44:57
--------------------------------------*/
body{
margin:0;
padding:0;
font-size:14px;
line-height:1.5;
color:#222;
font-family:'MS Pゴシック',Hiragino Kaku Gothic Pro,sans-serif;
background-image:url(https://cdn.snsimg.carview.co.jp/minkara/photo/000/001/460/119/1460119/p3.jpg);
background-repeat:no-repeat;
background-position:50% 0%;
background-attachment:fixed;
background-color:#;
}
div#BodyBlockMain{
float:right;
overflow:visible;
display:block;
_overflow:hidden;
width:620px;
}
div#BodyBlockSide{
float:left;
overflow:hidden;
display:block;
clear:none;
font-size:10px;
word-break:break-all;
word-wrap:break-word;
line-height:2em;
margin-top:10px;
width:300px;
}
a{
color:#fff;
font-weight:bold;
text-decoration:underline;
}
a:hover{
color:#fff;
background-color:#000;
text-decoration:none;
}
a:visited{
color:#fff;
font-weight:normal;
text-decoration:underline;
}
a:active{
color:#fff;
font-weight:normal;
text-decoration:underline;
}
div#MinkaraHeader{
background-color:#;
}
div#MinkaraBody{
clear:both;
overflow:hidden;
font-size:14px;
line-height:22px;
display:block;
background-repeat:no-repeat;
background-position:50% 0%;
margin:0;
padding-top:0;
padding-bottom:20px;
padding-left:0;
padding-right:0;
width:100%;
}
div#MinkaraBody a{
background-color:transparent;
font-weight:normal;
}
div#MinkaraBody a:hover{
background-color:#000;
}
div#MinkaraBody a:active{
background-color:#000;
}
div#BodyBlock{
color:#fff;
font-weight:normal;
background-repeat:no-repeat;
background-position:50% 100%;
margin:0 auto;
padding:0;
width:930px;
}
div#BodyBlock a{
color:cyan;
text-decoration:underline;
}
div#BodyBlock a:visited{
color:cyan;
text-decoration:underline;
}
div#BodyBlock a:hover{
baxkground-color:080;
text-decoration:none;
}
div#BodyBlock a:active{
baxkground-color:080;
text-decoration:none;
}
div#BodyBlockHeader{
display:block;
height:100px;
float:left;
overflow:hidden;
width:930px;
padding:0;
margin-top:10px;
margin-bottom:0;
margin-left:0;
margin-right:0;
}
div#BodyBlockHeader h2{
font-size:24px;
margin:40px 74% 0 10%;
padding:0;
height:24px;
line-height:1;
background-color:transparent;

div#BodyBlockHeader h2 a{
color:#fff;
background-color:#444;
}
div#BodyBlockHeader h2 a:visited{
color:#fff;
background-color:#444;
}
div#BodyBlockHeader h2 a:hover{
color:#fff;
text-decoration:none;
}
div#BodyBlockHeader h2 a:active{
color:#fff;
text-decoration:none;
}
div.paging{
text-align:center;
clear:both;
margin-right:50px;
}
div#BodyBlockMain div.paging a{
text-align:center;
padding:5px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div#BodyBlockMain div.paging a:visited{
padding:5px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div.userTag{
margin:0 0 10px 20px;
font-size:12px;
}
div#BodyBlockMain div.userTag a{
margin-right:5px;
}
div.userTagRelationDoc{
margin-top:10px;

}
div.userTagRelationDoc ul{
padding:0px;
margin-top:10px;
}
div.relationLink{
font-size:12px;
padding:5px 1.5em;
margin-bottom:5px;
}
div.contents{
overflow:visible;
margin-left:-105px;
padding:0 5px 8px;
width:716px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p1.jpg);
position:relative;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
div.contentsFooter{
margin-bottom:40px;
}
div.contentsSubTitle{
padding:0px 0;
clear:both;
text-align:right;
}
div.contentsTitle{
margin:0 13% 5px 3px;
padding:6px 0px 6px 20px;
font-size:18px;
font-weight:bold;
color:#000;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);
}
div#BodyBlockMain div.contentsTitle a{
color:#000;
background-color:transparent;
font-weight:bold;
}
div.contentsTitle img{
background:url(https://cdn.snsimg.carview.co.jp/minkara/photo/000/001/460/119/1460119/p3.jpg);
background-repeat:no-repeat;
}
div.contentsHeader{
margin-top:10px;
}
div.contentsImpression{
float:left;
width:70%;
padding-left:10px;
text-align:left;
font-size:14px;
font-weight:bold;
}
div.contentsEditDate{
float:right;
width:14%;
margin:-44px -8px 0 0;
font-size:12px;
text-align:center;
background-color:#000;
}
div#BodyBlockMain div.blogEntryDate{
margin:0 -5px -15px 87%;
padding-top:0px;
font-size:12px;
letter-spacing:0px;
text-align:center;
color:cyan;
background-color:#000;
}
div.blogMemo{
padding:8px;
line-height:1.7;
font-size:15px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div#BodyBlockMain div.blogPosted{
clear:both;
width:250px;
text-align:center;
border-bottom:dotted 1px #444;
margin:-40px 0 0 230px;
padding:90px 230px 0 0;
font-size:11px;
background-image:url();
background-repeat:no-repeat;
background-position:100% 0;
}
div#BlogChgView{
font-size:11px;
color:#444;
text-align:center;
clear:both;
margin:0 70% 0 0;
padding:2px;
background-color:#000;
_zoom:1;
}
div#BlogChgView a{
font-size:11px;
}
div.trackBackURL{
margin-left:20px;
}
div.trackBack{
border-top:3px solid #ddd;
border-left:3px solid #ddd;
border-right:3px solid #aaa;
border-bottom:3px solid #aaa;
}
#BodyBlockMain div.contents div.blogMemo .pho .pup{
position:fixed;
top:6%;
right:6%;
background-image:url('https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg');
padding:10px;
-moz-box-shadow:5px 5px 5px gray;
-webkit-box-shadow:5px 5px 5px gray;
opacity:0;
}
#BodyBlockMain div.contents div.blogMemo .pho:hover .pup{
opacity:1;
display:block;
}
div.userCarListEntryDate{
text-align:right;
border-top:dotted 1px #006f9d;
clear:both;
width:100%;
padding:5px;
font-size:12px;
}
div.userCarListMemo{
float:right;
width:510px;
margin:-30px 0 0 -30px;
padding:8px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div.userCarListPhoto{
float:left;
width:200px;
overflow:hidden;
height:150px;
}
div.userCarListTitle{
font-size:15px;
font-weight:bold;
margin:0 500px 0 0;
padding:10px 5px;
}
div#BodyBlockMain div.userCarListTitle a{
padding:3px;
}
div.contents h3{
margin:0 -12px;
padding:10px 0 10px 20px;
}
div#UserCarNav{
text-align:center;
margin:10px 0;
padding:5px 10px;
font-size:12px;
}
div.userCarPhotoMemo{
margin-bottom:1.5em;
padding:5px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div#UserCarPhoto{
text-align:center;
}
table#UserCarProfile{
width:100%;
border-collapse:collapse;
font-size:12px;
margin-bottom:1.5em;
}
table#UserCarProfile th{
width:6em;
text-align:right;
padding:5px 10px;
border-bottom:dotted 1px #444;
}
table#UserCarProfile td{
padding:5px 10px;
border-bottom:dotted 1px #444;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
table#UserCarPartsCategory{
width:95%;
margin:10px 20px;
}
table#UserCarPartsCategory td{
width:50%;
vertical-align:top;
}
table#UserCarPartsCategory ul{
list-style:square;
margin:0 0 1em 0;
padding:0 0 0 1.5em;
color:#888;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p2.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
table#GalleryList{
margin-bottom:1em;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p2.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
table#GalleryList td{
vertical-align:top;
padding:0 0 10px 20px;
}
div.galleryTitle{
background:#fff;
color:#000;
font-weight:bold;
margin-bottom:1em;
padding:3px 10px;
clear:both;
}
div.galleryPhoto{
width:400px;
overflow:hidden;
float:left;
margin:0 0 15px 0;
}
div.galleryMemo{
width:329px;
float:right;
margin:0 0 15px -30px;
padding:5px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div.workDate{
text-align:right;
padding-top:5px;
margin-bottom:1em;
width:100%;
font-size:12px;
border-top:dotted 1px #fff;
}
span.star{
color:#fc0;
}
table#SpotList{
width:100%;
font-size:12px;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
table#SpotList th{
margin:0px;
padding:6px 3px;
text-align:left;
border-bottom:dotted 1px #444;
}
table#SpotList td{
padding:6px 3px;
border-bottom:dotted 1px #444;
}
div#SpotPhoto{
text-align:center;
}
div.spotPhotoMemo{
margin-bottom:1em;
padding:5px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div.threadAction{
border-top:solid 1px #006f9d;
margin-top:10px;
padding:5px;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/053/1bg.png);
}
div#BBSIntroduction{
font-size:12px;
margin:10px 0;
padding:10px;
border:solid 1px #999;
}
div.threadMemo{
border:solid 1px #006f9d;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/053/1bg.png);

margin:10px;
padding:8px;
}
div.bbsTop{
text-align:right;
font-size:12px;
margin-top:10px;
}
div.thread{
padding-bottom:10px;
line-height:1.75;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/053/1bg.png);
}
div.threadTitle{
padding:3px 10px;
font-weight:bold;
}
table#BBSWrite{
margin-top:15px;
font-size:12px;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/053/1bg.png);
width:100%;
}
table#BBSWrite th{
width:10em;
text-align:right;
padding-right:20px;
vertical-align:top;
}
table#BBSWrite td{
vertical-align:top;
}
table#BBSWrite td#BBSEntry{
text-align:center;
padding:5px 0px 5px 0px;
}
ul#MainNav{
overflow:visible;
width:630px;
float:center;
list-style-type:none;
margin:0 0 0 0;
padding:230px 0 0 0;
clear:both;
height:30px;
background-position:100% -46px;
background-repeat:no-repeat;
}
ul#MainNav li.nav{
font-size:12px;
width:120px;
height:30px;
float:left;
display:block;
text-align:center;
margin:0 4px 0 0;
line-height:2.5;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p4.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p6.jpg);
background-position:center;
}
ul#MainNav li a{
color:deepskyblue;
display:block;
height:30px;
font-weight:bold;
background-color:transparent;
border:1px solid transparent;
}
ul#MainNav li a:visited{
color:#fff;
font-weight:bold;
background-color:transparent;
border:1px solid transparent;
}
ul#MainNav li a:hover{
border:1px #fff solid;
}
ul#MainNav li a:active{
border:1px #fff solid;
}
ul#MainNav li.navOn{
background-color:#fff;
border:1px solid transparent;
}
ul#MainNav li.navOn a{
background-color:#fff;
color:#000;
border:1px solid transparent;
}
ul#MainNav li.navOn a:visited{
color:#000;
border:1px solid transparent;
}
ul#MainNav li.navOn a:hover{
color:syan;
border:1px solid transparent;
}
ul#MainNav li.navOn a:active{
color:syan;
border:1px solid transparent;
}
ul#MainNav li.navEnd{
width:120px;
margin:0px;
}
table#userCommentList{
margin:0;
padding:0;
width:580px;
}
table#userCommentList td{
vertical-align:top;
border:2px #aaa outset;
width:50%;
}
table#userCommentList td div.commentArea{
width:330px;
margin:5px 0 0;
padding:5px;
font-size:12px;
line-height:1.4;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
table#userCommentList td div.commentDate{
color:#000;
text-align:right;
width:320px;
margin:-15px 0 0 5px;
padding-right:10px;
font-size:10px;
line-height:1.0em;
font-family:Verdana;
}
table#userCommentList td div.commentTitle{
width:320px;
height:2.0em;
padding:5px 10px 0;
font-weight:bold;
font-size:12px;
color:#f22;
background:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);
}
div#MoveCommentForm{
text-align:right;
margin:5px 20px;
}
div#HandleName{
margin:0 87% 0 0;
padding:5px 0px;
clear:both;
font-weight:bold;
font-size:14px;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p4.jpg);
text-align:center;
}
div.profileCategoryTitle{
margin:10px 5px 2px;
padding:2px;
width:140px;
font-weight:bold;
color:#000;
text-align:center;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
div#BodyBlockProfileMain{
overflow:hidden;
display:block;
margin-bottom:10px;
padding-bottom:10px;
float:right;
width:610px;
}
div#BodyBlockProfileSide{
color:#000;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
display:block;
overflow:hidden;
margin-bottom:10px;
padding-bottom:10px;
float:left;
width:300px;
}
div#BodyBlockProfileSide a{
background-color:#;
}
div#BodyBlockProfileSide a:hover{
background-color:#000;
}
div#BodyBlockProfileSide a:active{
background-color:#000;
}
div#SelfIntroduction{
margin:0 15px;
padding:5px;
font-size:12px;
line-height:1.3;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747597/p1.jpg);
}
div.memberCount{
height:25px;
width:180px;
margin:20px auto 10px;
text-align:center;
padding:12px 0 8px 0;
font-weight:bold;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p7.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}
table.thumbnail div.thumbTitle{
text-align:left;
margin:5px auto 15px auto;
font-size:12px;
line-height:1.4;
}
div#SideFriendListAll{
text-align:right;
margin:10px 8px 0 0;
font-size:12px;
}
div#SideGroupListAll{
text-align:right;
margin:10px 8px 0 0;
font-size:12px;
}
div#SideRecommendedList{
text-align:right;
margin:10px 8px 0 0;
font-size:12px;
}
table.newDocument{
width:98%;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
border-collapse:collapse;
}
table.newDocument td{
font-size:12px;
padding:5px 10px;
}
div#BodyBlockProfileMain table.newDocument td a{
color:#fff;
font-weight:bold;
background-color:transparent;
}
div#BodyBlockProfileMain table.newDocument td a:visited{
color:#fff;
}
table.newDocument td.entryDate{
width:110px;
text-align:right;
}
div.newDocumentAll{
text-align:right;
margin:5px 0 0 0;
padding-right:15px;
font-size:11px;
background:url(e_bg.gif);
background-position:right top;
background-repeat:no-repeat;
}
table#UserProfile{
width:98%;
margin-left:1px;
border-collapse:collapse;
}
table#UserProfile th{
width:150px;
vertical-align:middle;
padding:5px 0;
font-weight:bold;
font-size:12px;
border-bottom:dotted 2px #444;
color:#000;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);
}
table#UserProfile td{
vertical-align:top;
padding:5px 0 5px 10px;
font-size:12px;
font-weight:bold;
border-bottom:dotted 1px #444;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
}
div#MinkaraEntryDate{
text-align:right;
font-size:11px;
margin-right:3px;
letter-spacing:0.1em;
color:#fff;
}
div#BodyBlockSide a{
line-height:1.3em;
text-decoration:none;
}
div.sideMenu{
width:190px;
float:left;
margin:0 0 20px 0;
padding-bottom:10px;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/748929/p1.jpg);
color:#fff;
}
div.sideMenuContent{
margin:5px;
}
div.sideMenuTitle{
padding-top:3px;
height:2.5em;
text-align:center;
letter-spacing:2px;
font-weight:bold;
color:#000;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);
}
div#BodyBlockSide div.sideMenuTitle a{
text-decoration:underline;
background-color:transparent;
}
table#Calendar{
width:105%;
height:400px;
text-align:center;
font-size:15px;
margin-left:-4px;
background-image:url(https://cdn.snsimg.carview.co.jp/minkara/note/000/001/182/876/1182876/p8.jpg);
background-position:100% 100%;
color:#fff;
}
table#Calendar td.today{
border:2px dotted #0b0;
}
table#Calendar td.today a{
color:#333;
}
table#Calendar td.today a:visited{
color:#666;
}
table#Calendar td.today a:hover{
color:#fff;
}
table#Calendar td.today a:active{
color:#fff;
}
table#Calendar td.writingDate a{
background-color:transparent;
}
table#Calendar td.writingDate a:hover{
color:pink;
}
table#Calendar td.writingDate a:active{
color:pink;
}
div#Nanisiteru{
width:170px;
margin:0 auto;
padding:5px;
color:#fff;
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p7.jpg);
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
div#NanisiteruHeader{
width:180px;
margin:0 auto;
height:16px;
}
div#NanisiteruFooter{
width:180px;
margin:0 auto;
height:5px;
}
div#Nanisiteru div{
text-align:right;
color:#000;
font-size:11px;
font-family:verdana,Tahoma,Sans-serif;
margin:0px;
}
div#SideUserInfo{
width:165px;
margin:0.5em 0;
}
div#SideUserMemo{
width:174px;
margin-bottom:0.5em;
padding:3px;
background-color:#;
}
ul.userMakeList li{
margin:0 0 0.5em -0.5em;
padding-left:1.5em;
list-style-type:none;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/053/listicon.gif);
background-repeat:no-repeat;
background-position:0 3px;
}
div.userMakeListTitle{
margin-bottom:0.5em;
font-weight:bold;
color:#fff;
}

CSSが長くブログを見るのが大変だったので、overflow-y:scroll;を使ってみました。使い方は
<div style=overflow-y: scroll; width: WWWpx; height:HHHpx;>/長文/</div>
Posted at 2010/08/01 11:25:10 | コメント(0) | トラックバック(0) | スタイルシート/弄り | 日記
2010年07月31日 イイね!

IE6で確認

IE6で確認スタイルシートを編集後IE6での表示の仕方を確認しました。もう殆ど使われていないと思いますが、まだサブ機がアップグレードしていないので。

画像を見てもらうと解るかと思いますが、透過部分にはGIFのメッシュを使っています。文字は多少読み難くなりますが、イメージ的には大体同じ物を得られるので良しとしてます。

今回驚いたのは、全くIE6に配慮せずに編集していたにも拘らず、修正が必要ないほどレイアウトの崩れがなかった事です。たしかmargin/paddingの解釈に不具合があって同じ様なレイアウトにはならなかったと記憶していたのですが・・・

結果オーライなので楽でした。もしかすると最新版?のIE6では表示の不具合が修正されているのかな。

で、どうやってPNG画像とGIF画像を自動的に切り替えているかというと、過去に紹介しているので、そのブログをまるっと引用すると。

本日はIE6での透過処理について、えす#055のページ白背景Ver,においては殆どのブラウザではこの画像
がコンテンツの背景に使ってありますが、IE6で閲覧した場合にのみこの画像
を使うようになっています。

で、その場合のスタイルシートの記述はこんな感じです。

詳細編集/コンテンツ共通/コンテンツ表示(div.contents)
background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg);(透過png画像)
_background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/747580/p8.jpg);(透過gif画像)
「_background-image:***」
がIE6専用のタグになっていて、IE6のみgif画像を使用するようになっています。詳しくは忘れましたがIE6のバグを利用した技だとか何とか・・・
IE6の場合は少々文字が醜く見難くはなりますが、イメージ的にはほぼ同じ物が見えると思います。

これはIE6がpng形式画像(正確にはαチャンネル=透過属性)の表示に対応していない為の措置です。png形式の特徴は大雑把に言えば「可逆圧縮性」「透過属性」の二つだと思っています。
可逆圧縮性はここでは触れませんが、透過属性は見ての通りです。本来部分的に透過率を変える事(透かしみたいな感じ)も出来る筈ですが、現在対応した編集ソフトを持っていないのと、編集そのものの手間を考えると・・・スタイルシートの部品としては必要ないですね。

その代わりに出来上がった画像の透過率だけを編集するソフトは持っているので、必要を感じたら時間のあるときにまとめて作って、作業手帳にアップしています。

IEの場合gifの画像は小さ過ぎるとブラウザの表示が極端に遅くなるので少し大き目の物を使っています。

また、IE6での背景の固定は詳細編集にて、「ページBody(body)」に背景画像を指定します。
background-image:url(背景画像のURL);
background-repeat:no-repeat;---リピートする場合は不要
background-position:50% 0%;---左右方向は真ん中、上下方向は上寄せ
background-attachment:fixed;---固定しない場合は不要

そして「ユーザー領域(div#MinkaraBody)」のbackgroud****が残っていると重ねて表示されbodyに表示した画像が見えなくなるので一式削除します。最もこれを利用して大きなヘッダーやフッターを作る事も出来るのですが、これはまた別のブログで紹介しています。

Posted at 2010/07/31 10:34:46 | コメント(0) | トラックバック(0) | スタイルシート/弄り | 日記
2010年07月02日 イイね!

はやぶさからハルヒヘ

はやぶさからハルヒヘ飽きっぽい正確性格なのかなー。何となく物足りなくなったので
Posted at 2010/07/02 21:57:13 | コメント(0) | トラックバック(0) | スタイルシート/弄り | 日記

プロフィール

「やっと一息つけるかな。っと http://cvw.jp/b/240136/38159886/
何シテル?   07/03 21:10
俺の彼女(注.嫁さんです)は超アムロではありません。 (^^; 俺の車はS-RVエアロスポーツ 最近は忙しくなったので、更新を差彫り気味ですが、稀に当...
みんカラ新規会員登録

ユーザー内検索

<< 2025/8 >>

     12
3456789
10111213141516
17181920212223
24252627282930
31      

リンク・クリップ

ヴぉる@DJデミオさんのスバル インプレッサWRX 
カテゴリ:外部ブログ
2015/11/18 09:27:44
ポチは見た!~枡込の嘘の浦~ 
カテゴリ:マイブーム
2012/06/09 09:25:41
 
AsahiSuperDry 
カテゴリ:外部ブログ
2010/12/11 15:14:52
 

愛車一覧

スバル インプレッサ スバル インプレッサ
実用的で運転の楽な車です。 アプライドモデルはD型 カラーはサテンホワイト・パール ...
日産 パルサーセリエS-RV 日産 パルサーセリエS-RV
中古で購入した2台目のパルサーです。
ダイハツ シャレード ダイハツ シャレード
軽量コンパクトのターボ、走る事の楽しさを教えてくれた車でした。車内の天井に外国(イタリア ...
日産 パルサー 日産 パルサー
初めて新車で購入した車です。デトマソと比べかなり重かったので、雪道は苦労しました。FF+ ...
ヘルプ利用規約サイトマップ
© LY Corporation