えす＃０５５のブログ一覧

いや、大部分の方には関係の無い話です。聞き流してください。間違っても「イイね」など点けて、世間様を混乱させないようお願いします。<あえて書くほどでもないとは思いますが、

当方のページのように、サイドメニューの幅が狭い場合(200px以下)は、たとえ10pxでも貴重なので、こんな小細工をしているって事です。先日、スタイルシートを公開しているので、解る方には解るんですが。
狭いサイドメニューに、それでも画像を貼り付けたいと考える方にしか、意味が無いのでアレですが、他にネタが無いって事です。

サイドメニュー領域、div.SideMenu
width:190px;
margin:0 0 20px 0;
padding-bottom:10px;

サイドメニュー、div.SideMenuContent
margin:5px;
計算上、幅180px
サイドメニュー領域の幅を変更した際に追従するよう、widthの指定はあえてしていない。

ブログカレンダー、table#Calendar
width:105%;
margin-left:-4px;
計算上、幅189pxの左マージン1px
上記と同じ理由で、widthは数値指定でなく、%指定をしている。

最近良く使っているのが

---

↑この横線
他所の記事から引用している時なんかに境界線として使っていますが、これ酢ッ極すっごく簡単なんですよ。
まあ簡単でなければ、ワザワザ使いませんから～

「＜hr＞横線」って書くと、

---

横線
となります。ブログの幅が標準であろうが、ワイドであろうが、半角4文字で領域幅一杯に線を描くので楽ちんですよ。

tableタグを使って領域指定をした方が格好は良いんですが、結構面倒なんでどうしても表組をしたい場合にしか使わないんですよね。それに比べるとこの横線は笑ってしまうほどお手軽です。気に入ったら使ってみてください。

スタイルシート関係のブログで過去に投稿した物を、またアクセス数順にまとめてみました。順位は殆ど変わっていませんね。だいぶ古い記事ですし<-約二年前とか；；、今では色々な方がブログに書いていますからね。検索でも上位にはヒットしないでしょうし。

１-1新スタイルシート弄ってみた2009/04/03
背景固定と背景完全透過（背景を表示させない方法）ただこの後、この固定方法ではＩＥ６に対応していない事が判明しました。

3->２続・新スタイルシート弄ってみた2009/04/06
ＰＮＧ形式の画像を使い半透過する方法です。のみんカラ標準スタイル用部品を使う為、黒の半透過しか出来ませんでした。部品を準備しなくても良いのでお手軽です。

2->３ＩＥ6でも透過！でも重い・・・・・ 2009/04/11
ＩＥ６で半透過を実現させる為にＧＩＦ形式の画像を使用しています。現在は３倍以上早くなってますが、この時はホントに重かった（画面表示が遅かった）です。

４とりあえずＩＥ6透過＆650ｐｘ最終仕様2009/04/20
先生のブログを見つけてＩＥ６用にカスタマイズしていました。 ただこの後スタイルシートの禁止プロパティが増えて使用不可になり全面的に修正してます。現在は参考になりません。

５とりあえずＩＥ７対応2009/04/09
この時点では未だＩＥ６での固定方法が判っておらず半ば諦めていました。またＩＥ６とＩＥ７でbackgroundタグの使い方が多少違う事に悩んでいました。

６透過タブ2009/04/04
タブを透過を使いました。結構分かり難くて苦戦しました。

8->７ヘッダー（もどき）を入れてみた2009/05/12
現在は殆ど使いませんが、大きいサイズのヘッダーを使いたくて試行錯誤しました。ＩＥ６の背景固定方法と合わせて書いてあります。

7->８幅が狭くなっちゃった。2009/04/24
禁止プロパティが増えた直後のブログです。その後一部使えるプロパティは増えました。この後ＣＳＳを見直していて、現行ＣＳＳの原型になっています。

９３倍？早くなりました。ＩＥのみ 2009/04/15
ネタで３倍と書いていますが、実際は６倍以上早くなっていました。でも最新の機械では体感できない可能性も・・・

１０懲りずに「ねこ」700px2009/04/26
禁止プロパティが増えた後に「ねこ」ベースで幅広仕様に修正ＩＥ６で表示を確認したものです。いまでも使えるのかな？

番外今年はとらドシ！ＩＥ６以前のブラウザではＧＩＦ形式、新しいブラウザではＰＮＧ形式の画像を自動的に使い分ける方法を書いています。画像は二種類用意しなければなりませんが、ワールドワイドに幅広く対応できます。

色々弄ったな～、暇だったんだな（自爆）

ってことで「とらドラ！」の逢坂大河（手乗りタイガー）＆虎を背景に採用しました。
タダの駄洒落ですが、良い画像を見つけたので、でも花びらではなく雪と白虎ならもっとお目出たいのですが。

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

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

詳細編集/コンテンツ共通/コンテンツ表示(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:***」がＩＥ６専用のタグになっていて、ＩＥ６のみｇｉｆ画像を使用するようになっています。詳しくは忘れましたがＩＥ６のバグを利用した技だとか何とか・・・
ＩＥ６の場合は少々文字が醜く見難くはなりますが、イメージ的にはほぼ同じ物が見えると思います。

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

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

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

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

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

こんな感じでいきますか、

プロフィールが寂しかったので画像を追加しました。後チョコチョコと章変更をしていますが、今回、ブログにのみ右下にワンポイントを追加しています。

弄った場所は

ブログ情報(div.blogPosted)
clear:both;
width:220px;
text-align:center;
border-bottom:dotted 1px #444;
margin:-30px 0 0 240px;
padding:75px 240px 0 0;
font-size:11px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:100% 0;
です。画像を入れるだけなら最後の三行だけ追加すればOKですが、画像を入れるだけでなく、元々あった文字を二行にして中央配置にした為に変更箇所が多くなってます。文字を折り返しさせるために幅を狭くして、中央に配置する為にmarginとpaddingを駆使しています。

参考までに画像サイズは120px×120pxの透過gifを使っています。