nth-of-type(CSS3)をIEで使いたい。

解決済 maron3001
(@maron3001)

11年、 4ヶ月前
皆さんのお力をお借りしたいです。

【質問】
現在WPにて、とあるコーポレイトサイトを作っております。
2段組で左680pxに投稿記事、右はサイドバーです。
投稿記事欄は680pxを3分割してfloatで制御してあります。
参照＞http://roomservice.deca.jp/yahooauctionimg/1.png

★右端に来るマージンの設定が上手く出来ず、
この部分には
```
.list .post:nth-of-type(3n+3) {
	margin-right: 0;
	}
```
の設定で右端項目の右マージン0を実現しています。

ただ、IE6.7.8ではこれが作動せず、右端のマージンが0になりません。
（1.2番目の右マージンと同じ値が適用される）
参照＞http://roomservice.deca.jp/yahooauctionimg/2.png

調べるとCSS3はIE9では対応しているが、IE6.7.8等のレイトバージョンでは対応していないとの事。

まず、コレを解決する方法を教えていただけませんでしょうか？

★Selectivizr.jsというのを使用すれば、
CSS3がIEでも使用できる情報をネットで多く見かけますが、
どこにどう変更を加えたら良いのかも分からず困っております。

他の方法なども含め、何かありましたらよろしくお願いいたします。

【私のレベル】
全くの初心者ではありません。
テーマをいじって自分のブログサイトを作る程度はいじれます。
php関連はシロウトです。
JSなどの知識もほぼ初心者です。

15件の返信を表示中 - 1 - 15件目 (全15件中)

Tsuyoshi.
(@andante0727)

11年、 4ヶ月前

WordPressとは関係ない気がしますが一応参考URLを。

IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」
トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前
Tsuyoshi.さん

早速のお返事ありがとうございます。
先日調べてSelectivizrだ！と思い試してみたいのですが、
上手く反映されません。
恐らく私の設定が間違っているのかもしれませんが、
どこをどうして良いのかが分からずに困っております。

実はWPのプラグインでもSelectivizrがあるのですが、これも反映されません。
IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」の下段に記載有り。

ココの中に、
「jsライブラリ（jQuery・Prototypeなど）を呼び出す記述が必要」と書いてあります。

<head>内に
<script type="text/javascript" src="呼び出したい「jsライブラリ」のパス"></script>
を
<?php wp_head(); ?>
の上にと言う事です。
でこの”呼び出したい「jsライブラリ」のパス”とは、
"/wp-includes/js/"
と思いやってみましたが、出来ません。

記載したのは
header.phpのなかの
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php bloginfo('text_direction'); ?>" xml:lang="<?php bloginfo('language'); ?>">
    <head>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title ( '|', true,'right' ); ?></title>
        <meta http-equiv="Content-language" content="<?php bloginfo('language'); ?>" />
		<link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favico.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
        
        <?php
			wp_enqueue_script('jquery');
			wp_enqueue_script('cycle', get_template_directory_uri() . '/js/jquery.cycle.all.min.js', 'jquery', false);
			wp_enqueue_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', 'jquery', false);
            if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
            wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', 'jquery', false);
		?>
       ココ→→→ <script type="text/javascript" src="/wp-includes/js/"></script>
        <?php wp_head(); ?>
```
こんな状態です
なにか間違っていますか？
Tsuyoshi.
(@andante0727)

11年、 4ヶ月前

んーちょっと検証は出来ないのですが

呼び出したい「jsライブラリ」のパス は例えばjQueryのライブラリを使用する場合は、jqueryのjsファイルまでのパス、ということだと思いますねぇ。

WordPressにはjQueryが同梱されていますので

wp-includes/js/jquery/jquery.js

を読み込んだら良いということではないでしょうか。

wp_enqueue_script(‘jquery’);

でjQueryを読み込まれているのようなので、

<script type=”text/javascript” src=”/wp-includes/js/”></script>

は必要ないと思うのですが。

selectivizr.jsの読み込みとjQueryの読み込みは正しくされていますか？ブラウザのソースの表示とかで見てみて下さい。

トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前

ソースを見ると



という記載があります。

また、
<script type='text/javascript' src='http://xxxxxxxxxxxxxxxxxxx.jp/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

と行った記載が何行かあります。

これで読み込みはされているという事なのでしょうか？

Tsuyoshi.
(@andante0727)

11年、 4ヶ月前

でしたら読み込みはされてるんじゃないかと思いますね。

実際使用したことがないのでなんとも言えないのですが、そもそもWordPressの絡みの問題なのか根本的に間違ってるのか切り分け出来ないので、先ずはHTMLなどで動作を確認してみてはどうでしょうか？
Tsuyoshi.
(@andante0727)

11年、 4ヶ月前
maron3001さん、おはようございます。

リンク先などきちんと見ていなかったので少し調べてみました。以下ご報告です。

Selectivizrのサイトで対応プロパティの表を良くご覧下さい。

jQueryを使用している場合は:nth-of-typeはサポートされていませんね。

よって
```
.list .post:nth-of-type(3n+3) {
	margin-right: 0;
	}
```
というコードはjQueryを選択している場合、IE6～8では使えませんね。
nobita
(@nobita)

11年、 4ヶ月前
こんにちは、

IEへのCSSのプロパティの適用だけのために、そんなに苦労する事はないのではないですか？

投稿などを、3列ずつ表示する場合の3個目の右マージンを何とかするなら、テンプレートの工夫で解決すると思います。

サンプルコード（ワードプレスのループだと思ってください）
```
<?php

$post = array('text', 'text',	'text',	'text',	'text',	'text',	'text',	'text',	'text',	'text',	'text',	'text',);

$i = 0;
while( $i < count( $post )  ){

	if( ($i + 1) % 3 == 0){ $class = 'last';}else{ $class = '';}

	echo '<li class="list"><div class="post '.$class.'">'.$post[$i].'</div></li>'."\n";
	$i++;
}
?>
```
このコードの結果は、
```
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post last">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post last">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post last">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post ">text</div></li>
<li class="list"><div class="post last">text</div></li>
```
になります。
3個目に、クラスを追加できているので、あとは、lastクラスに対して、少し詳細度を上げたスタイル設定を追加すれば、javascriptの追加などは必要ないと思いますが、、、

CSS3使いたいなら　nth-child(3n)とかで代用も出来るような気がしますが、、
トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前

Tsuyoshi.さま

調べて頂いて感謝です。
ありがとうございます。

ホントですね、気づきませんでした。。。。
サポートされてないですね。

トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前

nobitaさま

ありがとうございます。

なるほど、ちょっとその方法でテンプレートをいじって見ます。
またご報告致します。
トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前
nobitaさま

やってみましたが分かりません。
phpの事がイマイチ分かっておらず、勉強不足です。。
すみませんが、
教えていただけますでしょうか。

【現在のloop.php】
```
<?php if ( have_posts() ) : ?>

    <?php while ( have_posts() ) : the_post(); ?>

        <div <?php post_class('post clear'); ?> id="post_<?php the_ID(); ?>">
              <div class="post-category"><?php the_category(' / '); ?>
                <span class="post-meta"><span class="post-date">
                <?php the_time(__('Y/m/d')) ?>
              </span></span></div><div class="post-meta">
                <?php if ( has_post_thumbnail() ) :?>
                <a href="<?php the_permalink() ?>" class="thumb">
                <?php the_post_thumbnail('thumbnail', array(
                        'alt'	=> trim(strip_tags( $post->post_title )),
                        'title'	=> trim(strip_tags( $post->post_title )),
                    )); ?>
                </a>
            <?php endif; ?>

            </div>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

            <div class="post-content"><?php if (function_exists('smart_excerpt')) smart_excerpt(get_the_excerpt(), 45); ?>

  </div></div>
    <?php endwhile; ?>
    </div>
<?php endif; ?>
```
となります。

これのどこに
```
<?php

$i = 0;
while( $i < count( $post )  ){

	if( ($i + 1) % 3 == 0){ $class = 'last';}else{ $class = '';}

	echo '<li class="list"><div class="post '.$class.'">'.$post[$i].'</div></li>'."\n";
	$i++;
}
?>
```
と加えると、
3の倍数の記事にlastというクラスを割り当てられるのでしょうか？

いくつか試してみましたが、ダメでした。
nobita
(@nobita)

11年、 4ヶ月前
```
<?php if ( have_posts( ) ) : ?>
<div class="list">
<?php
	$i = 0;
while ( have_posts() ) : the_post( ); 

if( ($i + 1) % 3 == 0 ){ $class = 'last'; }else{ $class = ''; }
?>
<div <?php post_class( 'post clear '.$class ); ?> id="post_<?php the_ID(); ?>">
    この区間は省略
</div>
<?php
	$i++;
 endwhile; ?>
</div>
<?php endif; ?>
```
トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前

ありがとうございます。

解読して、
試してみます。

またご連絡します。
トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前
nobitaさん

お世話になります。

やってみました。

loopを
```
<?php if ( have_posts() ) : ?>

    <div id="loop" class="<?php if ($_COOKIE['mode'] == 'grid') echo 'grid'; else echo 'list'; ?> clear">

<?php
	$i = 0;
while ( have_posts() ) : the_post(); 

if( ($i + 1) % 3 == 0){ $class = 'last';}else{ $class = '';}
?>
<div <?php post_class( 'post clear '.$class ); ?> id="post_<?php the_ID(); ?>">

              <div class="post-category"><?php the_category(' / '); ?>
                <span class="post-meta"><span class="post-date">
                <?php the_time(__('Y/m/d')) ?>
              </span></span></div><div class="post-meta">
                <?php if ( has_post_thumbnail() ) :?>
                <a href="<?php the_permalink() ?>" class="thumb">
                <?php the_post_thumbnail('thumbnail', array(
                        'alt'	=> trim(strip_tags( $post->post_title )),
                        'title'	=> trim(strip_tags( $post->post_title )),
                    )); ?>
                </a>
            <?php endif; ?>

            </div>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <div class="post-content"><?php if (function_exists('smart_excerpt')) smart_excerpt(get_the_excerpt(), 45); ?>

  </div></div>

    <?php
	$i++;
 endwhile; ?>
    </div>

<?php endif; ?>
```
にしたところ、

このようにちゃんと3つめの記事にのみ、lastの表記が出てきました。
http://roomservice.deca.jp/yahooauctionimg/3.png

CSSで、
```
.list .post {
	width: 214px;
	height: 335px;
	float: left;
	margin: 10px 19px 10px 0px;
	border-bottom: 1px solid #d9d9d9;
	}

.list .post .last {
	width: 214px;
	height: 335px;
	background-color: #99cc00;　
	float: left;
	margin: 10px 0px 10px 0px;
	border-bottom: 1px solid #d9d9d9;
	}
```
としてみましたが、
適用されるのは
.list .post {
の方で、
.list .post .last{
は適用してくれません。

なにか間違っていますでしょうか？
Tsuyoshi.
(@andante0727)

11年、 4ヶ月前

横からすみません。

.post と .last が同じ階層のdivに指定してあるのに

.list .post .last{
という指定はおかしくありませんか？

後同じクラス名（post)が重複して出力しているのもいただけないです。

トピック投稿者 maron3001
(@maron3001)

11年、 4ヶ月前

nobitaさん
Tsuyoshiさん

おかげさまで、CSSだけで実現可能となりました。

無知の私に、ご教授下さいまして、感謝感謝でございます。
本当にありがとうございました。

15件の返信を表示中 - 1 - 15件目 (全15件中)

トピック「nth-of-type(CSS3)をIEで使いたい。」には新たに返信することはできません。

トピックタグ

表示