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

えす#055のブログ一覧

2012年07月30日 イイね!

透け透けにするには

ま、簡単なんだよこんなの。ってが昔あったな~そういえば。

要は、透過処理をした画像を貼り付けるだけですから全然難しくないです。画像を作る事とその画像をアップロードする事は少々面倒なんですけどね。画像はココに登録してありますから、後はスタイルシートの特定の場所を書き換えれば完了です。以下に登録してあるURL画像をを並べます。
半透明黒系
https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p1.jpg

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p2.jpg

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p3.jpg

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p4.jpg

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p5.jpg
半透明白系

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p6.jpg

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p7.jpg

https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p8.jpg

個人的には白背景の黒文字の方が好みなんですよね、目が悪いオイラには読みやすいし。みんカラの標準流用だといぬ・ねこイルカの黒系しか無いですし、透明度も割りと高いので背景の色や柄によっては文字が読みにくくなるんですよ。それで、無いのなら作ってしまえホトトギスってのがこれらの画像を作った理由なんです。
最初は白黒の透明度違いを10%刻みで8段階作ってありましたが、1段階上げ下げの違いが分りにくく、ソコまでの使い分けも不要と感じたので20%位刻みで4段階に間引きました。

ソレと画像を標準と比較して大きくした理由はこちらです。GIFと使い分けしていた頃の名残です。
又画像サイズを小さくしても良いのですが、作り直すのが結構面倒でそのままにしています。

それにしても元のフォトギャラ’09/4/09/15ってそんなに昔だったかな~。月日の経つのは早いものです。

で最後に書き換える場所ですが、こちらのページではスタイルシート/詳細編集の中の
コンテンツ共通/コンテンツ表示(div.contents)  お勧め、と言うか必須箇所。一番面積が大いので背景が良く見える。
ブログ/ブログ本文(div.blogMemo)  文字をより読みやすくする場合に使用。
コメント/何シテル?/コメントタイトル(table#userCommentList td div.commentTitle)
コメント/何シテル?コメント表示(table#userCommentList td div.commentArea)
サイドメニュー/サイドメニュー領域(div.SideMenu)  サイド部分、お好みで
を書き換えていますね。書き方の例は

background-image:url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarNote/750640/p7.jpg);

ですかね。このほかにbackground:****
があったら場合によっては削除します。
Posted at 2012/07/30 08:26:47 | コメント(1) | トラックバック(0) | スタイルシート/小技メモ | パソコン/インターネット
2010年11月24日 イイね!

テスト

右下赤影左上青影<-firefox3.6で影が付きます

IE8で影が付きますが。互換表示とIETabでは影が付きません。
方向省略黒影 
真上赤影
真下青影
2010年11月24日 イイね!

Filter系タグの対応比較

元はこの方のパクリです。最近IE8で表示しない事に気が付いて色々調べてみたら、タグの書き方が変わっていました。ので、更に追記しました。

filter系プロパティは画像に使用することは余り無いのですが、文字に影をつける場合に使用することがあるので、今一度まとめて見ました。

下の5点の写真は同じ画像を用いて、1.はそのまま、2.~5.はそれぞれにスタイルで画像に半透明処理(60%の不透明度指定)をしています。

1.透明処理無し
2.透明度指定filter:Alpha(opacity=60);
3.透明度指定 -moz-opacity:0.6;
4.透明度指定 opacity:0.6;5.透明度指定 filter:alpha(opacity=60);-ms-filter:"alpha(opacity=60)";



2.は「Internet Explorer7以前、8の互換表示含む」で半透明になり背景の画像が透けて見えていると思います。filter:Alpha(opacity=数値);で透明度指定しているからです。

3.は「Firefox(3以前)」や「Netscape」で2.と同等の半透明表示をさせるプロパティー -moz-opacity:数値;で透明度を指定。

4.は「Firefox(2以前は未確認)」「Safari」で半透明表示させるプロパティー opacity:数値;で透明度を指定。

5.は「Internet Explorer8」以降で半透明表示させるプロパティー-ms-filter:"alpha(opacity=60)";で透明度を指定しています。2.で紹介したタグの記述の仕方が変更されたもので。filterタグの頭に「-ms-」を付け、値を""で囲んでいます。但しこのタグだけでは透過せず、2.のタグも同時に指定しています。関連リンク



6.60%の不透明度指定



6.は2.~5.のプロパティーを同時に指定しています。

IE9はWindowsXPには対応しないようなので使う事は無いでしょうが、
opacity:数値;(CSS3正規表現)に統一される事を望みます。
2010年10月23日 イイね!

最近使っているスタイル

最近使っているスタイル最近から、引用先のタイトルを派手?にしていますが、セレクタってのを使っています。
スタイルシート/詳細編集/ブログ/の最後のほうに「ユーザーコンテンツ(ブログ内ユーザー定義)」ってのが有りまして、その中で指定をしています。

タイトル 「.t1」
内容
background-color:#000;
border:inset 4px pink;
color:#fff;
font-weight:bold;
line-height:1.5em;
margin:4px;
padding:4px 12px;
vertical-align:middle;
width:80%;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
と定義しています。

ブログ内での利用方法は
<div class=t1>引用タイトル</div>
引用タイトル
若しくは
<span class=t1>引用タイトル</span>
引用タイトル
です。div指定の場合は文字列の長さに関係なく一定の幅で、span指定の場合は文字列の長さに合わせてスタイルが適用されます。

それと、画像を見てもらうと判りますが、Firefoxの場合角が丸くなっていますが、IE8まででは角が丸くなっていません。CSS3の仕様なのですが、IE以外の幾つかのブラウザが先行採用していて、そのタグが最後の3行です。

CSS3はIE9で正式採用されるとの噂が有りますね。
Posted at 2010/10/23 11:22:34 | コメント(0) | トラックバック(0) | スタイルシート/小技メモ | パソコン/インターネット
2010年10月07日 イイね!

みんカラ非公認「改」

んー、こちらの真似ですが、ウインドウのサイズによってずれる事を軽減してみました。画像も少々弄っています。

軽減の言葉の通り、画像がずれる事は有りますが、その条件はウインドウ横幅が975px未満の時で、ウインドウがそれ以上の幅なら特にずれる事はありません。
種明かしはと言うと、画像の右側に余白をくっつけてその画像を真ん中に配置しました。って事ですね。下のソースと上の画像のリンク先を見てもらえば一目瞭然ですが。


ページBody
background-image:url(https://cdn.snsimg.carview.co.jp/minkara/note/000/001/260/942/1260942/p3.jpg);
background-position:50% 0;
background-repeat:no-repeat;
background-color:#;

プロフィール

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

ユーザー内検索

<< 2018/4 >>

1234567
891011121314
15161718192021
22232425262728
2930     

リンク・クリップ

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

お友達

基本的に来る者は拒まず、去る者は負わずがモットーですが、多少の審査がございます。ご利用は計画的に。

当方へのコメントは頂かなくても気にはしませんが、ブログやパーツレビューの更新が全く無い方はや、妙なところに「イイね!」を付ける方はこちらから予告無しに解除させて頂く場合があります。
9 人のお友達がいます
美玖美玖 悪てみす悪てみす
ザクとは違うザクとは違う べし。べし。
あっきぱぱあっきぱぱ れいむ@仕切りなおしれいむ@仕切りなおし

ファン

38 人のファンがいます

愛車一覧

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