半透明フィルター

あるブロックを半透明にしたい場合、IE独自仕様のアルファフィルターと、CSS3に入っているフィルターを両方指定すればできます。
現在のW3CのCSS Varidater はCSS2で検査されていますが、主なブラウザはすでにCSS3に対応しているので、CSS2に規定されていないopacityを指定しても読み取ってくれる。
例： background-color: #FFF;
      filter:alpha(opacity=75);
      opacity:0.75;
IEのアルファフィルターは、真ん中のfilter:alpha(opacity=75);の部分で、これは不透明度75％になります。

IEの半透明フィルターが半透明にならない

他のブラウザのCSS3への対応のおかげで、レイヤーを半透明にするのも楽になりましたが、例によってIEでは、これだけでは半透明になってくれません。
hasLayoutの値をtrueにする指定を一緒に書き込んでやらなくちゃいけない。

hasLayioutについては、colissさんのサイトで説明されていますのでそちらで見てください。
colissさんの受け売りではありますが、どのような指定をすればいいかを下に書いてあります。

• display:inline-block;
• height:実際の値;
• width:実際の値;
• float:left または right;
• position:absolute;
• writing-mode:tb-rl;
• zoom:任意の値;

高さや幅が指定できない場合、この中で一番使いやすいのはzoomです。
なので、IE対策ではよくzoom:1 が使われます。
半透明フィルターも、このzoom:1 を一緒に指定してやれば、ぱっと半透明になってくれます。

上にくる画像が透明になってしまう

しかし、半透明にしたブロックをよく見ると、その上にくる画像も半透明になってしまっています。
透明度が高ければ高いほど、画像も透き通ってしまって、これでは見づらいこと甚だしい。
これを回避する方法を今まで知らなかったのですが、偶然見つけました。

IEは問題解決
半透明にしたレイヤー（親要素）の上にくる次のレイヤー（子要素）のCSSの中に、文字や画像を不透明にする指定を書き込みます。

position:relative;

これで、半透明になったブロックの上に文字や画像が来ても、透き通らずにきれいに表示されます。
ただ、これはIEだけに有効のようで、CSS3の半透明フィルターには効きませんでした。
また解決策をどこかで見つけたら、メモすることにします。

IE以外の半透明フィルターで出た問題

プラグイン全体ではなく、それぞれのブロックに半透明フィルターをかけたところ、大きな問題が出ました。
それぞれのプラグインの中に納まるものはOKなのですが、カウンターで撃沈してしまった。
マウスをカウンターの上に持っていくと下にレイヤーが出てきますが、このレイヤーが次のプラグインの下に潜り込んでしまう。
試しに上のpositionを指定してみたり、レイヤーの順番を変えるz-indexを指定してみたけど、どれも効果はなし。
う～ん、と唸りながらあちこちを探し回ったけれど、解決策にはぶち当たらなかった。

仕方ないので、この問題の解決策としてPNGの半透明画像を使うことにしました。
これなら上にくる画像が透明になることもないし、カウンターのレイヤーも下に潜らない。
IE6は半透明PNGには対応していないので、IE6だけ半透明フィルターを指定することでIEの問題もするりと回避。
見た目ではフィルターなのか画像なのかわからないから、まあいいや。

IE6の：first-letter バグ（？）

今日は「：first-letter」について忘備録を書きます。
これは、見出しや文章の最初の文字を大きくしたり、他の色にできる疑似要素です。
例：#TopTitle:first-letter { color:#000; }
主要なブラウザはこれに対応しているので表示にはまったく問題はありませんが、IE6ではこれに関するバグ（？）があるそうです。

IE6の疑似要素バグ（？）

CSSは、セレクタ　｛プロパティ：値｝という書き方をします。
人によっては、セレクタ｛プロパティ：値｝や、セレクタ　｛　プロパティ：値　｝など、間を空けたり詰めたりして書きますが、普通は表示に影響を与えるものではありません。
ところが、IE6ではそれが影響するようなのです。

問題になったCSSの書き方は、セレクタ｛プロパティ：値｝。
この書き方だと、疑似要素の：first-letter の指定が無視されるそうです。
そこで、私はセレクタ｛　プロパティ：値　｝で試してみました。
これも指定が無視されて、文字に変化が見られなかった。

問題の回避

セレクタと｛｝の間を空けて書く。
CSSの指定は、セレクタ　｛プロパティ：値｝かセレクタ　｛　プロパティ：値　｝と書かないと、IE6はちゃんと実行してくれません。
IE7はどんな書き方をしてもOKなのに、まったくIE6ときたら・・・・・・（ため息）
いつも詰めて書いている人も、「：first-letter」を使うときは、そこだけでもセレクタと｛｝の間を空けて書くように注意しましょう。

Webstyle #02のドロップダウンメニュー

今回はWebstule #02の「blue light」「a tree」「カスタマイズ」「butterfly」に実装されているドロップダウンメニューです。
使用したのはMultilebel Droppdown Menu です。
このメニューのスクリプトは、上のサイトからダウンロードするといいです。
説明も書いてありますが、英語なのであしからず。

「Webstyle #1」シリーズに使用されているドロップダウンメニューのdroppyとよく似ていますが、ちょっと違うのはマウスをメニューの上に持ってきたときのリストの出方です。
droppyはピロンと下にでてくるけど、こちらのメニューは左上から右下へ向かって出てきます。
この出方が気に入って、「Webstyle #1」シリーズで使おうかと思ったけど、あれにはリストの出方が合わない。しかし今回のテンプレではしっくり馴染んでます。

HTMLの構成はどのメニューも同じです。
HTMLもCSSも「Webstyle #01」シリーズと基本は同じなのですが、向こうは幅指定のためのクラスがついていてややこしいので、あらためてこちらのテンプレート用にもう一度書きます。

例によってカスタマイズは長くなるので、メニューのカスタマイズをされたい方は追記からどうぞ。
注）HTMLやCSSはコピーして使えますが、説明のために色文字になっているので、念のために一度メモ帳にコピーしたものをもう一度コピーして貼り付けてください。

Webstyle #02 blue light、a tree、カスタマイズ

2010年09月21日　配布
2011年06月08日　jqueryを最新版にした他、IE9に対応しました


擬似1カラムです。
       背景画像の邪魔にならないように、普段はプラグインが見えないようになっています。
       トップメニューの「Other Menus」をクリックすると、横にプラグインが現れます。
       もう一度「Other Menu」をクリックすると、プラグインはまた消えてなくなります。

プラグイン4とプラグイン5をそれぞれ記事の上と下に設置しました。
プラグイン4：トップページとそれに続く記事一覧ページで、記事の上に表示されます。
                  広告用に、タイトルはデフォルテで非表示になっています。
                  タイトルを表示させたい場合は、カスタマイズを参照してください。
プラグイン5：詳細記事ページで、記事とコメントフォームの間に表示されます。
                  広告用でタイトルは無しです。

「blue light」と「monochrome」はSEO用ではありませんが、HTMLのタイトル箇所に見出し用のタグをつけることでSEO向けになります。カスタマイズは追記に書いてあります。

テンプレート編集用エディターに大部分対応していますが、部分的にCSSで直接変更しなければならないところがあります。プラグインの左右変更はCSSで変更してください。カスタマイズは追記に書いてあります。


表示確認データはこちらを参照してください。
Web風仕様です。自分でサイトを作る手間が省けます。
ドロップダウンメニューを実装しています。忍者独自構文が直接書かれていますので、プラグインを設置しなくても自動的に情報を表示します。
カテゴリーとアーカイブ、キーワード検索表示ページでは、記事上部に該当記事のリストが表示されます。
プラグイン2は折りたたみ式です。
「a tree」と「monochrome」のプラグインは半透明で、不透明度が87％です。背景が少し透けて見えて、なおかつプラグインがはっきり見えるようになっています（更新版）
記事の下にランキング用バナー等を設置する箇所があります。バナーや広告を貼り付けたい方はこちらを参照してください。
「a tree」はSEO用です。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をするとSEOの確率が上がります。
コメント投稿者のメールアドレスは表示されません。コメント一覧ページの投稿者名にアドレスのリンクが付きますので、そちらで確認してください。
画像は差し替え自由です。この場合、ページ最下部の画像著作権者のリンクも変更してください。
テンプレートご使用の際には利用規約を一読ください。「a tree」はCrambon様から、「blue light」はThe Heart of Eternity様から素材をお借りしています。素材の再加工、および他での使用は厳禁です。素材は各作者様のサイトからダウンロードしてください。
ブログパーツおよび広告は、プラグイン4は490px以下のものを、プラグイン5は510px以下のものを、他のプラグインは170px以下のものを使用してください。

画像をクリックするとプレビューが見られます

blue light


a tree


monochrome -- カスタマイズ --

新作のお知らせ

大量のテンプレ修正のために遅くなっていましたが、やっとこさ新作を申請しました。
許可されるかどうかはまだわからないので、例によって配布されてから詳細記事を書きます。

新作は、大きな背景画像がよく見えるように、記事ブロックは左右寄せになっています。
一見1カラムですが、実は2カラム。
トップメニューの「Other Menus」をクリックすると、横にプラグインが現れます。
プラグインに邪魔されずに大きなイラストや写真を背景に入れられて、必要なときはプラグインを表示できるっていうのが、このテンプレの利点です。

今回はシリーズで3点出しましたが、全部カスタマイズを視野に入れています。
リンクの色指定がしやすいようにひとまとめにしたので、あちこちスクロールしなくてもよくなってます。
また、CSSがよく分かるように説明もいれたので、作業が楽になっています。
主要なブロックは忍者のclass名を使用していて、テンプレート編集エディターで編集できるので、背景画像も楽に入れられると思います。

フォームは去年の「桔梗」からテーブルタグを廃止して、今主流の定義リストになっていますが、テーブルと同じ外見に仕上げているのでそれが定義リストだとは誰にも分からない。
で今回は、指定の簡単な普通の定義リストフォームにしました。
単に、定義リストを使ってると分かってもらいたいだけなんですけどね（＾＾；）
フォームは定義リストですが、フォームブロックは変更していないので、編集エディターで背景を入れることができます。

今回は3点の内、1点だけがSEO向けです。
カスタマイズ用とブラック系はSEO向けではありませんが、HTMLの見出しのタグを入れるだけでSEO向けに変更できるようになっています。

そして今回も入れたドロップダウンメニューですが、下のリストの出方が前に使用したDroppyとは違います。
どこが違うのか、よく見てみてください。
この出方、結構気に入ってるんですよ。

さて、上記のほかにもプラグインの左右の変更など、カスタマイズ記事を書かないといけないのですが、テンプレートが配布されてからになります。
ドロップダウンメニューも以前とは少し違うので、また説明記事を書く予定です。
ドロップダウンは特に長くなると思うので、数日お時間を頂きますようお願いいたします。

あと、需要の多い2カラムをカスタマイズ版で作ろうと思っています。
でも、今は疲れたので、一休み（笑）