yann_anemo

nobita様

いつもありがとうございます。
教えていただいたサイトを確認し、IE6だけ違うCSSを作ろうかと思いましたが、
よく見るとTwentytwelveでもIE用のCSSを読み込んでいることに気づきました！

なるほど、これでいくらstyle.cssを変更しても反映されなかった理由がわかりました！

で、いろいろ試してみましたがやはりfooterが浮いてしまうので、オリジナルのTwentytwelveで何も変更していない状態で確認したところ、デフォルト状態でもIE6でfooterが上部に浮いていました。

私が実装した解決策としては、TwentytwelveはHTML5のie対策はされているようですが、
実際に反映されてないようなので、ie.cssに#colophonに対するコードを追記しました。

/* Footer */
#colophon {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	line-height: 2;
	width: 960px;
	margin-top: 24px;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 0;
	text-align:center;
}
#colophon a {
	color: #686868;
}
#colophon a:hover {
	color: #21759b;
}

今回いただいた回答で、いろいろなことに気づくことができました。
nobita様、ありがとうございました。

これからも勉強していきたいと思います。
今後ともどうぞよろしくお願い致します。

nobita様

早速のご回答ありがとうございます。

ご提案いただいた通り<div id=”comments” class=”comments-area”></div>を追加してみましたが改善しませんでした。

オリジナルのpage-template/full-width-phpに戻して再度検証したところ、ulリストをテンプレートに追加しても固定ページに追加しても表示が崩れました。
固定ページにテキストや画像だけであれば表示は崩れません。

結果としてはfloatさせているulリストを表示させるとIE6で崩れるようです。
実際使用しているコードは以下です。

↓テンプレートに記載

<ul class="example">
<?php query_posts('showposts=10');
if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><a>">
<?php the_post_thumbnail(array(230,230)); ?>
<?php the_title(); ?></a>
</li>
<?php endwhile; endif; wp_reset_query(); ?>

↓CSS

ul.example{
	overflow: hidden;
	margin:50px 0 0 0;
}

* html ul.example{
	position: absolute;
	margin: 0 -1px 0 -1px/*IE6バグ対策*/
}

*:first-child+html ul.example{
	margin: 0 -1px 0 -1px/*IE7バグ対策*/
}

.example li {
	list-style-type: none;
	float: left;
	position:relative;
	margin:0 30px 70px 0;
	width: 230px;
}
.example a {
	text-align: center;
	display: block;
	text-decoration: none;
	width: 230px;
}

CSSに問題があるのでしょうか・・・

トップページに1件だけ載せるブログの最新記事の写真にだけclass=”cboxModal”を追加する方法がわからなかったので、トップページには写真なしの最新記事5件を表示させることで自己完結しました。

また勉強してから挑戦したいと思います。
貴重なご意見をくださったpopupさん、ありがとうございました。

popupさん、ありがとうございます！

私には思いつかない方法です。試してみてうまくいきましたが、あと１つ問題が残ってしまいました。

このtestページは最終的にトップページにする予定なのですが、メインの記事が３つに分かれていて、1番上はメッセージ、2番目はクリッカブルマップを使った店内マップ、そして最後にブログ記事の最新記事を１つ載せています。

そのトップページで表示されるブログ記事にだけclass=”cboxModal”を追加するようなことは不可能でしょうか。
もしくはすべての投稿記事にclass=”cboxModal”を追加して、lightbox plusをトップページ以外で無効にするほうがスマートでしょうか。

あともう少しで希望通りの挙動をしてくれそうです。
何度もお手数をおかけしますが、そうぞよろしくお願いします。

新規で質問すべきか迷いますが、続きで質問させてください。

Lightbox Plusで実装できましたが、そのウィンドウを閉じても背景が黒いまま残ってる感じになり、もう一度ページのどこかをクリックしないと解除されません。
Lightbox2も実装しているので、競合かなにか起こしているのでしょうか。

設定をいろいろ変更してみましたが回避策が見つかりません。
どうかよろしくお願いします。

追記です。
試行錯誤を続けていて、
http://www.kxh-web.com/web/javascript/453
このサイトから「jQuery LightBox Plugin」なら実現可能なのかとも思いながらWP用ではないし、現在は「WP jQuery Lightbox」というプラグインを有効化していろいろ試しています。

Lightbox風にイメージマップでも拡大してポップアップできればどのプラグインでもいいのです。
実装したいのは１つの画像だけなので、そこだけ何か違うプラグインを適用とかでもいいような・・・迷走中です。

どなたかお知恵をお貸しください。
よろしくお願い致します。