TwentyTwelve をテストしています。Twenty Twelve より本格的にレスポンシブになってきてますので要チェックですね。
現在のバージョンは 0.9 になっています。以前の0.8ではIE7/8ではスクリプトエラーが出ていたり崩れてたりして心配していましたが だいぶんよくなっています。
リリースバージョンではたぶん解決しているでしょうが、気が付いたところをメモしていきます。




IE7/8 では CSS3 Media Queries を解釈しませんので 思った通りに動かなくなります。
また nav-menu も折りたたんだ状態のままになります。
respond.js を追加で読み込むと Media Queries が効くようになります。
Respond.js(github)https://github.com/scottjehl/Respond
( Respond.jsを使うと @import が使えなくなるそうですので注意が必要です。 )

これを。組み込んでもいいのですが 一応調べてみたら、あるんですよね さすが WordPress。
WordPress Respond.jsプラグイン http://wordpress.org/extend/plugins/respondjs/
* 追加CSSファイルがある場合は追加CSS読み込みの後にrespond.jsを読み込むようにしてください。


デザインにもよりますが、この記述を追加する事で IE7/8でも幅を狭くするとサイドバーが下に落ちます。

/* Minimum width of 600 pixels. */
@media screen and (max-width: 600px) {

	.site-content {
		float: none !important;
	}
	.widget-area{
		float: none !important;
	}
}



スポンサードリンク




ヘッダーに class="ie" がつきました。
<!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html class="ie" <?php language_attributes(); ?>>
<![endif]-->

この方法は知りませんでした。これでCSSの記述がすごく楽になります。

記述例 ( twentytwelve/style.css 内 )
/* =IE 7 and 8
----------------------------------------------- */

.ie .skip-link,
.ie .screen-reader-text,
.ie .assistive-text {
	clip: rect(1px 1px 1px 1px); /* IE7 */
}



【デモ】
http://nendeb.jp/demo2/


【参考】
WordPress3.5からのデフォルトテーマ「Twenty Twelve」では、style.cssの読み込みはfunctions.phpで行なっている。 | 株式会社コミュニティコム
http://www.communitycom.jp/2012/08/20/wordpress-twenty-twelve/

新テーマ: Twenty Twelve — ブログ — WordPress.com
http://ja.blog.wordpress.com/2012/08/29/new-theme-twenty-twelve/


スポンサードリンク

Posted by on 2016/04/12



不動産プラグインポータル