• 解決済 syosa

    (@syosa)


    WordPressに興味を持ち、Wordpress初心者ですが、現在勉強しながら、ローカル環境(BitNami利用)上にTwenty Twelveのテーマをインストールし子テーマを作成、小説サイト用としてCMS的な利用を目的に現在、各コンテンツを作りこんでいる途中です。

    メインのブラウザは、Opera バージョン12.02 Build 1578 を利用しています。
    このメインのブラウザでは、日本語の文字化け等も問題なく表示もされるのですが、Google Chrome バージョン 23.0.1271.64 mでは、日本語の「句読点(“、”や”。”)入り」の文章部分は一切表示されない状況になります。

    OSはWindows XP Home SP3
    Wordpressバージョンは3.4.2
    ベースのテーマはTwenty Twelve 1.0 → 子テーマのCSSで font-familyをOsakaに設定、他にも幾つかCSSを触っています。

    コンテンツの動作表示確認のため、他のブラウザでチェックをかけており、メインのOpera以外でも、IE7やIE8、Firefox バージョン16.0.2 においては、句読点入りの日本語文章部分は全く問題なく表示されます。

    具体的な現象としては、
    小説サイトです → Chromeでも表示されます
    小説サイトです。(“です”の後に”。”をつけると) → Chromeで表示されなくなります。
    当然、小説本文にいたれば、真っ白の状態になります。

    当初は子テーマが問題か?と思い、デフォルトの Twenty Twelve 1.0に戻しましたが、状況は変わりません。

    しかし、他のテーマ、例えば Twenty ElevenやTwenty Tenにしてみると、Chromeでも「句読点入り」日本語部分はしっかりと表示されます。

    勿論、同様の現象がおきていないかGoogle等で検索しましたが、Vista Chromeの日本語表示に関する件があるだけで、ましてや句読点入り文章が非表示というものは見つけられませんでした。
    ですが念の為、以下のVista Chromeで日本語表示に問題がある場合の回避策は全て試してみました。(Chromeのキャッシュは都度クリアして試しました。)

    1. translate.wordpress.org/projects/wp/de… を /twentytwelve/languages/ja.mo に置く
    2. WP Multibyte Patch 1.6.3 を導入する
    3. Twenty Twelve の子テーマで Web フォントを読み込ませない
    (3. については、こちらを参考にしました → [WordPress] Twenty Twelve の子テーマで Web フォントを読み込ませない (memo.dogmap.jp)

    しかし、現象を回避することが出来ない状況です。
    小説用のサイトのテーマとしても、Twenty Twelveというテーマは、とてもシンプルで使いやすく、他のテーマではなく出来ればこのテーマを利用したいと思っております。

    同様の現象を上手く回避された方、また回避策にお心当たりのある方がおられましたら、ご教授頂けませんでしょうか?
    また、この現象が当方だけの環境でのみ起きている現象なのかも知れないので、同環境の方で上手く句読点入りの日本語が表示されているというのであれば、情報だけでも教えて頂けるとありがたいです。

    どうぞよろしくお願い致します。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • また、この現象が当方だけの環境でのみ起きている現象なのかも知れないので、同環境の方で上手く句読点入りの日本語が表示されているというのであれば、情報だけでも教えて頂けるとありがたいです。

    OSはWindows XP pro SP3
    Wordpressバージョンは3.4.2

    特に問題なく、表示できるようです

    twelveのstyle.cssは、remとか、あまりなじみの無い単位系を使っているので、あてずっぽですが、スタイルとはずしてみるとか、、、
    数値参照文字はどうですか?

    。
    。

    &は、半角に直してください

    parent theme child theme 共にOK

    モデレーター gatespace

    (@gatespace)

    Windows XPモードですが、同様の状況が再現できません。

    http://www.littleflag.com/archives/362
    自分のブログで恐縮ですが、上のURLの投稿を読むことができますか?

    環境は

    • Windows XPモード
    • Chrome バージョン 23.0.1271.64 m
    • WordPress 3.4.2
    • テーマ:Twenty Twelve(子テーマではありません。カスタマイズもしていません。)
    • WP Multibyte Patch 1.6.3は有効化

    です。

    「問題解決のためのチェックリスト」のトラブルシューティングを試しつつ、

    • WP Multibyte Patchを除く、全てのプラグインをオフ。
    • テーマはTwenty Twelveを有効化

    で確認してみてください。

    追加

    text-renderingというプロパティが、twentytwelveでは、使われているのですが、ちょっといわくありげなので、検証用のhtmlを別途に作って、動作確認してみてはいかがでしょうか?

    http://terkel.jp/archives/2012/09/text-rendering-optimizelegibility/
    https://developer.mozilla.org/en-US/docs/CSS/text-rendering

    style.css line:444

    body {
    	font-size: 14px;
    	font-size: 1rem;
    	font-family: Helvetica, Arial, sans-serif;
    	text-rendering: optimizeLegibility;
    	color: #444;
    }

    トピック投稿者 syosa

    (@syosa)

    皆様、貴重なご情報をありがとうございます。
    皆様のお蔭で原因が判明致しました。

    結論から申しますと、当方の環境のみで発生する固有の現象で、当方のPCの中にインストールしてあるフォント「Osaka」にあるようです。

    まず、gatespace様のご情報に従い、トラブルシューティングの基本を一つずつ試しました。プラグインを外し、キャッシュをクリア、デフォルトのテーマに戻して、全てのブラウザで表示確認。

    →結果、Chrome以外では表示されますが、肝心のChromeでは表示されず。
    このことより、プラグインの原因ではないことは判明。

    次にnobita様からの情報で、同環境でも問題なく表示されており、parent theme child theme 共にOKとのことでしたので、当方固有現象であることは間違いないと思われ、また上記よりプラグインが原因ではないことから、CSSが原因では?とあたりをつけました。
    そして、全てのブラウザ(メインのOpera、IE、Firefox、Chrome)のキャッシュを全てクリアし、TwentyTwelveのスタイル(親、子両方のCSS)を外して、句読点入りの日本語が表示されるか確認しました。

    →結果、全てのプラウザで表示されました。
    このことから、当方のPCとテーマのCSSに原因があると予測。

    PCとCSSのどちらが起因しているのかを最終確認するため、gatespace様のサイトを全てのブラウザで拝見しました。
    gatespace様のサイトは子テーマもなくカスタマイズもされていないということでしたので、無事にChromeで表示されれば、PC環境ではなく、当方のCSSの何処かが原因であると判断出来るためです。

    →すると、Chrome以外では表示されますが、肝心のChromeでは表示されずでした。

    因みに、nobita様の追加情報の、CSSのtext-renderingというプロパティの動作確認もしましたが、text-renderingは原因ではないことが判明。

    これにより、当方のPC環境の起因の確率が大きく、CSSだけが原因ではないと思われたためGoogleで検索してみました。すると、Google プロダクトフォーラム › Google Chrome ›chromeのみの文字化けについての記事を発見。

    Webページ側で英字フォントが指定されている場合、本来なら日本語部分は日本語フォントに置き換えて表示されるのですが、WinXP上でOpenTypeフォントの場合に限りその置き換えが正常動作しないバグが存在します。以下のいずれかのフォントのOpenType版をインストールしていますか?

    “Segoe UI”,Calibri,”Myriad Pro”,Myriad,”Trebuchet MS”,Helvetica,Arial

    インストールされているならば、該当するOpenTypeフォントをOSからアンインストールしてみてください。

    当方のPCには、上記の該当フォントはインストールされていなかったのですが、記事のコメントの遣り取りを見ていると、該当フォントがインストールされていなくても、PC内のフォントとChromeの何かが絡んで「日本語文字全てがほとんど表示されていない」という書き込みもありました。

    そこで、思い当たったのが、当方の子テーマでフォント指定をしている「Osaka」です。
    OsakaはOpenTypeではなかったように思いますが、元々Windowsには入っていないフォントでもあり、Chromeでは上手く認識しないのでは?と。

    小説用には見やすい書体だったので、当方では「WinでOsakaを使う」と試みを紹介していたサイトからWin用に加工したOsakaフォントをダウンロードしインストールしていました。

    そこで、まずは当方の子テーマのCSSでフォント指定のOsakaを外し、sans-serifのみを指定。Chrome側の設定―フォント指定部分もOsakaを外して、MS UI Gothic(Winのデフォルトフォント)にして、再度、gatespace様のサイトとローカル上の当方のTwentyTwelveを表示させてみましたところ、句読点入りの日本語文章部分も無事に表示されるようになりました。

    冷静に考えれば、然も有なんでしょうが、まさかOsakaフォントとは…。

    今回は皆様のご教授で無事に原因も判明、不具合を回避することが出来そうです。
    テーマのフォントスタイルについては、出来るだけ各ブラウザのデフォルトを表示させるような指定に変えるつもりですし、私のようなWin + Osakaフォント + Chromeの環境の方向けのCaution表示もするつもりです。(そんな稀少な方はいないと思いますが…)

    本当に、貴重なお時間を割いて頂きまして誠にありがとうございました。
    取り急ぎ、原因判明のご報告と御礼まで。

    モデレーター gatespace

    (@gatespace)

    syosaさんお疲れ様でした。
    手順もグッドです。今回はレアケースなので、情報を探すだけでも大変だったかと思います。
    解決されたのでしたら右上のプルダウンを「解決済み」にしてくださいね。

    ・・・と、本来ならここまでなんですが、ちょっと気になった点がありましたので補足しておきます。

    OsakaはOpenTypeではなかったように思いますが、元々Windowsには入っていないフォントでもあり、Chromeでは上手く認識しないのでは?と。

    小説用には見やすい書体だったので、当方では「WinでOsakaを使う」と試みを紹介していたサイトからWin用に加工したOsakaフォントをダウンロードしインストールしていました。

    まず、「Osaka」フォントですが、これはMacOSに附属するフォントで、Appleが作成したフォントであり、Mac用しかありませんし、単体配布もされておりません(確か)。
    当然、Windows版は公式に存在しません

    ですので、Win用に加工したOsakaフォントというのはライセンス的に問題があります。

    「Osakaフォントってどうなの?」
    http://rimse.blog73.fc2.com/blog-entry-190.html

    「Windows + Chrome + Osakaフォントがレアケース」ではなく、
    WindowsにOsakaを入れている、という状況がそもそも「おかしい」という事なのをご理解ください。

    テーマのフォントスタイルについては、出来るだけ各ブラウザのデフォルトを表示させるような指定に変えるつもりですし、私のようなWin + Osakaフォント + Chromeの環境の方向けのCaution表示もするつもりです。(そんな稀少な方はいないと思いますが…)

    よく短時間で、原因を見つけることが出来ましたね :)

    せっかくなので、アイディアを一つ

    function check_font_issue() {
    
     	$result = array();
    
    	// UAを取得
    	$ua = $_SERVER['HTTP_USER_AGENT'];
    
    	if( preg_match('/Chrome/', $ua) ){
    
    		$result[] = 'chrome';
    	}
    
    	// UAに Macintosh が含まれるか
    	if (preg_match('/Macintosh/', $ua)) {
    
    		$result[] = 'mac';
    	} else {
    		$result[] = 'no-mac';
    
    	}
    	return $result;
    }

    元ネタは、http://stocker.jp/diary/browser_class/

    上記の関数を、functions.php に記述しておいて

    header.phpの body要素の body_class()に

    <body <?php body_class( check_font_issue() ); ?>>

    等としておけば、chromeかつmacといった クラスを追加できますから、

    あとは、cssで

    body.chrome.mac{
     font-family:......
    }
    body.chrome.no-mac{
     font-family:......
    }

    とすれば、ブラウザとUAによる条件分岐が出来ます。

    トピック投稿者 syosa

    (@syosa)

    gatespace様、nobita様、この度は誠にありがとうございました。

    gatespace様のおっしゃる通り、ライセンス上に問題のあるフォントをPCに入れていることで発生した、当方固有の現象であり、当然ライセンスに抵触していることから、早速当方のPCより問題のOsakaフォントは削除いたしました。
    以後はライセンスを遵守してまいります。

    またnobita様のお教え頂いた、ブラウザとUAによる条件分岐については、早速アイデアを頂きまして、利用させて頂きたいと思います。ご教授頂きありがとうございます。

    文字ばかりが並んでしまうサイトということもあって、出来るだけ見やすいフォントで、かつ少しでもサイトの雰囲気が伝わったら嬉しいな…と思い、既存のサイトでも、CSSでフォントの指定をしていたのですが、現在ではとりわけ閲覧される方のブラウザは多種多様になってきていますので、今後はそれも考慮に入れながら、文字だけでも見やすいように(そして出来るだけ雰囲気を伝えられるように)CSSで設定していこうと思います。

    本当にありがとうございました。
    これをもちまして、本件は「解決済み」とさせて頂きます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「Twenty twelve+WinXP Home SP3+Chrome上で句読点入りの日本語が表示されない」には新たに返信することはできません。