Webstyle #02 シリーズに3カラム登場

今回の修正に便乗して、Webstyle #02 シリーズの3カラムを作りました。
以前にbutterfly の3カラムの希望があったのですが、なかなか時間が取れなくて・・・（汗）
今回やっと、すべての修正と３カラム制作が終わって、ほっとしています。

３カラムは２カラム版を基本にしています。
デザインに合わせて、プラグインは２列とも右側です。
特にbutterfly はバックに大きな蝶がいるので、バランスが崩れないように配慮しました。

疑似1カラムは、バックに大きな画像や写真を使える仕様となっています。
プラグインが見えないのが初期設定なので、３カラム版を作る予定はありません。

３カラムの詳細記事は、テンプレが公開された後に「Webstyle #02 シリーズ　2カラム」のところに付け足します（たぶん夜になると思います）
3カラムの詳細を「Webstyle #02 butterfly、カスタマイズ2Ｃ」に追加しました。

IE9登場に伴うテンプレ修正のお知らせ

今日、Webstyle #01 シリーズの更新版が出ました。

最初はこっちを修正する予定ではなかったのですが、IE9の不具合報告を見ているうちに、jquery （java script ライブラリ）での不具合が報告されているのに気が付きました。

jquery を使用しているテンプレのトップメニューに今のところ変化はないようですが、jquery 側がIE9に対応する最新版を公開したので、念のためにこの最新版と入れ替えることにしました。
Webstyle #02 シリーズも同じくjquery を使用しているので、こちらも修正しておきました。


Webstyle #02 シリーズのほうは、スクリプト以外にもIE9での表示不具合を修正しています。
IE9だけトップメニューの上部と記事ブロックの枠の下部の余白がなくなり、記事下部はナビ部分と枠がくっついてしまうのですが、実はIE9に不具合があるわけではありません。

他のすべてのブラウザで、トップメニュー上部と記事ブロック下部に、勝手に意味不明なスペースができているのですが、IE9はCSSどおりに忠実に表示しているから、かえっておかしくなってしまうという変な問題です。

もしかしたらトップメニューのCSSかスクリプトに何かの問題があるのかもしれませんが、他のすべてのブラウザに変更不可能なスペースができているので、IE9をそれに合わせないと修正できない。

すでにIE9用ハックが出ていますが、試してみたら親ボックスにかけたハックが子要素にまで継承してしまい、どうやってもうまくいきませんでした。
それで、IEだけ読み取ることのできる条件付きコメントで処理することにしました。

<!--[if IE 9]><link rel="stylesheet" href="http://file.cricri.blog.shinobi.jp/webstyle02_ie9.css"><![endif]-->

ここで気になるのが、コメントの中に入れたリンクがはたして忍者のリンクに変わるのか否か、ということ。
どうなるのかわからないので、試しに修正テンプレを一つだけ出してみて、もし変更されなかったら条件付きコメントに直接スタイルシートを書き込むことにしました。

もしリンクが忍者のリンクに変換されたらいいですが、変換されなかった場合はもう一度申請し直すことになるので、Webstyle #02 blue light の修正版が出ても、すぐにダウンロードせずに様子を見ていただくとありがたいです。
コメントの中のリンクも忍者のリンクに変換されたので、Webstyle #02シリーズをすべて申請しました。

やっとIE8が普及してきたところでIE9はまだまだ少ないですが、Windows の重要なアップデートの中にIE9のインストールが入っているので、これからIE9は増えていきます。
現在Webstyle #01シリーズ、またはWebstyle #02シリーズをお使いの方は、この機会に更新版を再度ダウンロードしてください。

IE9対応について

お久しぶりです。
IE9が３月に全世界でリリースされたときは、日本だけ震災の影響を踏まえて延期されていましたが、４月についにリリースになりましたね。
って、KUROさんがブログテンプレートを一斉に修正されたから気が付いたんですけど（汗）

実は私のテンプレートの中にも、修正が必要なものがあります。
今まで忙しくて手を付けられなかったのですが、そろそろ始めないといけないようです。
修正する予定のテンプレートは「Webstyle #02シリーズ」です。
他のテンプレートは全く問題ないので修正予定はありません。

まだ時間がかかると思いますが、もし「Webstyle #02シリーズ」が更新されましたら、シリーズを現在お使いの方は再度ダウンロードされることをお勧めいたします。

リンク画像のホバー時にでる背景色を消す方法

リンク文字は下線を付けたり、マウスが乗った時に動くようにしたり、背景色を付けたりと、いろいろ装飾することができます。
リンクに下線がついているとリンク画像にも下線が出てしまったりしますが、こういう問題はあちこちで指定の仕方が書かれているので、ちょっと検索するだけで解決します。

しかし、リンク画像のホバー時の背景色を消す方法はどこにも書いてありませんでした。
これは、リンクにマウスが乗った時に背景色が出るように指定していると、リンク画像にもマウスオーバーで背景色が出てしまうという問題です。
そこで今回は、この問題の解決策をご紹介します。

リンクと画像の基本指定は下の通りです。

/* リンクの基本設定 
------------------------------------------------*/
a { text-decoration: none; }

/* 通常のリンク */
a:link { color: #BB5282; }

/* 訪問したリンク */
a:visited { color: #BB5282; }

/* マウスが乗ったときのリンク */
a:hover { background-color: #FCE1ED; }

/* マウスをクリックしたときのリンク */
a:active { color: #D1272F; }

/* 画像の基本指定 
-----------------------------------------------*/
img {
	margin: 2px;
	border: none;
}

一番上で、リンクに下線が出ないように指定しています。
ホバー時に背景色が出る指定ですが、これはリンク文字とリンク画像両方に継承されるので、このままだとリンク画像にマウスが乗った時にマージンの部分に背景色が出てしまします。

そこで、画像の外余白のmarginを内余白のpaddingに変更し、上の指定にbackground-color: transparent;を加えて背景色を透明にしてみましたが、背景色は見えたまま。
それならと、背景色をブロックの背景色と同じ白色にしてみると余白部分はバックと同じ色になったのですが、他の問題が出てきました。

なぜかIE6とIE7は背景色の指定だけでOKになったのですが、他のブラウザだと画像の下に背景色が線のように見えてしまうんですねえ。
そこで、モダンブラウザだけ画像を下のほうに動かしてみました。
が、IE8だけまだ下に移動しないといけないようだったので、IE8だけ別指定で画像をもっと下に動かしました。

img {
	padding: 2px;
	border: none;
}

a img:hover { background-color: #FFF; }

/* IE6 */
* html a img { background-color: #FFF; }

/* Firefox, Opera, Google Chrome, Safari */
html>/**/body a img { vertical-align: text-bottom; }

/* IE8 */
html>/**/body a img { vertical-align /*\**/: bottom\9; }

ここで気を付けないといけないのは、IE6とIE7では画像にvertical-align を指定しないこと。IE6とIE7には画像の回り込みバグがあるので、画像がどんな配置になるかわからないブログのテンプレートには指定してはいけないんですね。

さて、背景色をブロックの背景と合わせ、画像の位置をずらすことで、リンク画像にマウスが乗ってもリンク文字に指定した背景色が現れなくなりましたが、自分のブログで実験しているときにおかしなことに気が付きました。
マウスを画像に載せたときに、背景色が出ないものと出るものが出てきたんです。

不思議に思ってソースを確かめると、背景色が出ない画像と背景色が出る画像の書き方に違いがあるのに気が付きました。

/* 背景色が出ない画像 */
<a href="#"><img alt="" src="/abc.jpg" /></a>

/* 背景色の出る画像 */
<a href="#">
<img alt="" src="/abc.jpg" />
</a>

HTMLを行に分けて書くと、aタグとimgタグの間に半角のスペースができるのが原因のようです。これは自分で調整できるからいいとして、もう一つ頭を悩ませた問題があります。
ブログのプラグインとして出てくる、携帯用のバーコードです。

他の画像は上の指定ですべてOKになったのですが、ユーザー側では変更がまったくできないバーコードには、しっかりと背景色がついてしまう。
そこでバーコードの余白を内外ともなくしたところ、IE6とIE7以外は背景色がなくなりました。
最後まで背景色が見えてしまうIE6とIE7は、仕方ないのでごり押しすることにしました。
下は、忍者ブログのプラグインに入っているバーコード用の指定です。

div.qrcode_image a img {
	margin: 0;
	padding: 0;
}

/* IE6 */
* html div.qrcode_image a:hover img {
	margin-right: -4px;
	margin-bottom: -3px;
	padding-right: 4px;
	padding-bottom: 3px;
}
	
/* IE7 */
*:first-child+html div.qrcode_image img:hover {
	margin-right: -4px;
	margin-bottom: -3px;
	padding-right: 4px;
	padding-bottom: 3px;
}

IE6とIE7でバーコードの背景色を消すために無理やりな指定をしてますが、一応きれいに消えてくれました。
向こうから勝手に出てくる画像は苦労しますね。
RC版が公開されたIE9で問題が出ないように祈ろう！

Sunday Morning, Sunday Morning 3C

2011年02月01日　配布


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


表示確認データはこちらを参照してください。
カテゴリーとアーカイブ、キーワード検索表示ページでは、記事上部に該当記事のリストが表示されます。
「Sunday Morning 3C」は、左にプラグイン1が、右にプラグイン2（折りたたみ式）と3が入っています。
記事の下にランキング用バナー等を設置する箇所があります。バナーや広告を貼り付けたい方はこちらを参照してください。
SEO用です。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をするとSEOの確率が上がります。
コメント投稿者のメールアドレスは表示されません。コメント一覧ページの投稿者名にアドレスのリンクが付きますので、そちらで確認してください。
画像は変更自由です。この場合、ページ最下部の画像著作権者のリンクも変更してください。
素材の加工、他での使用は厳禁です。テンプレートご使用の際には利用規約を一読ください。

ブログパーツおよび広告は、
「Sunday Morning」は、プラグイン4が509px、プラグイン5が529px、他のプラグインは190px以下の物を使用してください。
「Sunday Morning 3C」は、プラグイン4が479px、プラグイン5が499px、他のプラグインは170px以下の物を使用してください。

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

Sunday Morning


Sunday Morning 3C