Webstyle #02 butterfly、カスタマイズ 2C および3Ｃ

2010年10月12日　配布
2011年06月08日　jqueryを最新版にした他、IE9に対応しました
          06月09日　3カラム版配布


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

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

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


素材サイト様の規約により、「butterfly」の商用利用は禁止です。
表示確認データはこちらを参照してください。
ドロップダウンメニューを実装しています。忍者独自構文が直接書かれていますので、プラグインを設置しなくても自動的に情報を表示します。メニューのカスタマイズはこちらを参考にしてくだい。
カテゴリーとアーカイブ、キーワード検索表示ページでは、記事上部に該当記事のリストが表示されます。
プラグイン2は折りたたみ式です。
「butterfly」と同じように「monochrome 2C」も全体が半透明（不透明度87％）になっています。
記事の下にランキング用バナー等を設置する箇所があります。バナーや広告を貼り付けたい方はこちらを参照してください。
「butterfly」はSEO用です。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をするとSEOの確率が上がります。
コメント投稿者のメールアドレスは表示されません。コメント一覧ページの投稿者名にアドレスのリンクが付きますので、そちらで確認してください。
画像は差し替え自由です。この場合、ページ最下部の画像著作権者のリンクも変更してください。
テンプレートご使用の際には利用規約を一読ください。「butterfly」はDragonArtz Designs様から素材をお借りしています。素材の再加工、および他での使用は厳禁です。素材はDragonArtz Designs様のサイトからダウンロードしてください。

ブログパーツおよび広告は、
2カラム：　プラグイン4は490px以下のものを、プラグイン5は510px以下のものを、他のプラグインは170px以下のものを使用してください。
3カラム：　プラグイン4は439px以下のものを、プラグイン5は479px以下のものを、他のプラグインは170px以下のものを使用してください。

各ブロックは半透明画像（IE6は半透明フィルター）で不透明度87％になっています。
半透明にしたくない場合は、エントリー、コメント、トラックバック、プラグインの各親ブロックに指定されている画像
background-image: url(http://bfile.shinobi.jp/ 6451/ white_87.png);
を削除し、背景色を指定してください。
注）IE6用のフィルターはCSSの一番最後に指定してあります。半透明にしない場合は、ここの指定も一緒に削除してください。

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

butterfly


monochrome 2C

新作のお知らせ

前回にすでに予告していましたが、前作の２カラムを作りました。
今回は普通に中央寄りです。
詳細記事は後で書きますが、その前に新作が公開されたら前作のところを見てください。
どうせ同じこと書きますので（＾＾）

今回はDragonArtz Designという、アメリカのサイトから素材を借りてます。
ここの規約で禁止されているので、商用利用はご遠慮ください。
カスタマイズ版のほうは制約はありませんので、ご自由に使用してください。

このサイトの規約でふと思ったのですが、他の素材でも商用利用禁止のところがあります。
素材自体はブログのテンプレートに使っているわけだから規約違反ではないけれど、テンプレート使用者が商用に使うと規約違反になるんじゃあ・・・・・・

今までそういうことに考え付かなかったので、うーんと唸ってしましました。
実際にブログを商用に利用している人もいるので、これからはサイト様が商用利用を禁止しているときは、その旨もコメントに書くことにします。


追記：
新作が出てから、コメント編集ページに追記のリンクが出てるのに気が付きました（汗）
それも、blue light 以外の全部に出てる（大汗）
まったく、なんで気が付かなかったんだろう・・・・・・（泣）
大慌てで今修正しましたので、明日には修正版が出ます。
もしかしたら気づいた人は少ないかもしれませんが、「あれ？」と思われた方は笑ってやってください（＾＾；）

半透明フィルター

あるブロックを半透明にしたい場合、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」を使うときは、そこだけでもセレクタと｛｝の間を空けて書くように注意しましょう。