IE11.0での文字の表示の崩れについて

解決済

(@hanayoc)

いつもお世話になっております。
QuotationマークがなぜかIEで表示した時だけ大幅に崩れてしまい、Quoteした文章がほとんど読めない状態です。
ChromeやFirefox、その他スマホのブラウザーで見た場合は問題ないのです。
このような場合は、だいたいどういった問題から来るのか、お分かりの方がいらっしゃれば、アドバイス頂ければ幸いです。

WordPressは4.9.5、テーマはTwenty Twelveの2.4です。
FontとBlockquoteに関するCSSへの表記は下記となります（子テーマに記入しています）

body {
	font-size: 15px;
	font-family: Roboto,"Helvetica Neue", Helvetica, Arial, "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI",  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
body.custom-font-enabled {
	font-family: Helvetica, Arial, sans-serif;
}

blockquote {/*引用文の調整*/
	position: relative;
	margin: 2.5em 1em 1em;
	padding-left: 34px; 
} 
blockquote:before{
	content: "“";
	font-size: 700%;
	font-weight: bold;
	line-height: 0.4em;/
	font-family: 'Times New Roman',"ＭＳ Ｐゴシック",sans-serif;
	color: #eaeaea;  
	position: absolute;
	left: 0;
	top: 0;
}
blockquote:after{
	content: "”";
	font-size: 700%;
	font-weight: bold;
	line-height: 0em;
	font-family: 'Times New Roman',"ＭＳ Ｐゴシック",sans-serif;
	color: #eaeaea;
	position: absolute;
	right: 0;
	bottom: 0;
}

記事には

<div align=”center”>文章</div>

文章

となっています。
何卒よろしくお願い致します。

ヘルプの必要なページ: [リンクを見るにはログイン]

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

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

5年、 11ヶ月前
すみません。
上記最後の記事内での記述は、下記となります。
```
<blockquote><div align="center">文章</div></blockquote>
<blockquote>文章</blockquote>
```
CG
(@du-bist-der-lenz)

5年、 11ヶ月前

入れ子になっていることで、タグ解釈の順番が障害になっているかもしれません。
ishitaka
(@ishitaka)

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

子テーマの style.css が2重に組み込まれています。
Twenty Twelve テーマは、親テーマの場合、子テーマの style.css を組み込みます。
よって、子テーマ側では、親テーマの style.css のみを組み込み、自身の style.css は組み込む必要はありません。

下記のようなコードを子テーマの functions.php に記述している場合、子テーマの style.css が2重に組み込まれます。
```
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
```
上記の場合、2行目は不要です。
- この返信は5年、 11ヶ月前にishitakaが編集しました。
トピック投稿者 hanayoc
(@hanayoc)

5年、 11ヶ月前

CZ様、
早速のアドバイスありがとうございます。
一度きちんと確認してみますね。

Ishitaka様、
実はGTMetrixでの解析のどこか？に同じcssが二度載っていて不思議に思った記憶があります。（汗）
おっしゃる通りfunctions.phpに下記のような記述がありました。
サイトが異常に重くなったのはきっとそのせいかもしれません。
さっそく重複部分を削除してみます。
ご指摘ありがとうございました。
トピック投稿者 hanayoc
(@hanayoc)

5年、 11ヶ月前
Ishitaka様、
度々申し訳ありません。
実は海外に住んでおりまして、本題のIEで崩れる件は今現在夜中の3時でIEへのアクセスがないため、明日確認させて頂きたいと思うのですが、先程ご指摘を頂いた件でfunctions.phpから重複部分を削除したところ、スマホで使用しているfirefoxとchromeでは全く問題ないのですが、常用しているDolphinというブラウザで確認すると、なぜかトップページのみなのですが、レスポンシブでなくPCの表示になってしまいます。

元々は下記のようになっていまして
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
```
削除後は

`<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
となっていますが、これであっていますでしょうか？

因みに、レスポンシブでなくなったトップページと、その他のページの大きな違いはヘッダー画像とメニューです。
ヘッダー画像はトップページでなおかつスマホの場合のみ、管理画面で設定したヘッダー画像を表示させ、pcではトップページのみ大きなバナー画像を表示させるようにheader.phpに書いています。
pc用のバナーははみ出ないようにcssで記述はしているのですが、
おそらくその辺の記述がおかしかったのが問題なのかと思うのですが、症状を上手く説明できませんがが、この巨大なpc用のバナースマホでも横にびゅーと伸びています。

スマホのfirefoxとchromeでは問題ないので良いかな、、とも思うのですが、もしかすると日本やその他の国でポピュラーなスマホのブラウザにも影響が出ているかも、、と思い対処したいと思うのですが、もし何か心当たりがあるようでしたらお手数ですがご教示頂ければ幸いです。

また、この件はもしも新たにスレッドを立てたほうが良いようでしたら合わせてご教示願います。
トピック投稿者 hanayoc
(@hanayoc)

5年、 11ヶ月前
またまたすみません。
変更後は下記となっています。
```
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
```
トピック投稿者 hanayoc
(@hanayoc)

5年、 11ヶ月前

Ishitaka様、

先程の件に関しましては、解決致しましたのでスルーして頂けますでしょうか。
全くお恥ずかしい話ですが、該当ブラウザでデスクトップ画面をリクエストしていたのを忘れていました。。（汗）
お騒がせしてすみません。
IEでの表示はCG様のアドバイスなど明日もう一度確認させて頂きます。
ご指摘頂いた点は本当に助かりました！
ありがとうございましたm(_ _)m

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

5年、 11ヶ月前

この件、Ishitaka様のアドバイス通り、Functions.phpを訂正することで解決することができました。
ページを開いた時に全体のレイアウトが一瞬動く動作がありましたが、それも無くなりました。
本当にありがとうございました！
今後ともよろしくお願いします。

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

トピック「IE11.0での文字の表示の崩れについて」には新たに返信することはできません。