WordPress修理屋の修理メモ

ここ２年程、WordPressサイトでも・CMSを使わないコンテンポラリーなサイトでも、サイトを作成する時は、Google Chromeを基準にしてレイアウトを調整していました。まずはGoogle Chromeでレイアウトのバランスを合わせ、それからFirefoxやIEの9そして8、Operaへと調整するブラウザを広げて、どのブラウザでも同じレイアウトとなる様にしていたんですね。

まあGoogle Chromeを信頼していたんです。（以前はFirefoxを基準にしていましたが。）

でも、ちょっと前からGoogle Chromeの挙動に「？？」な事がいろいろ出てきて、信頼感が崩れかけているんですよ。

多分、26.0.1410.43にバージョンアップしてからだと思うんですが、このバージョンから挙動が変わった感じがするんです。

前回書いた「Chromeは、CSSのlinear-gradientにdegが使えない？」でもそうでしたが、以前と同じ様にGoogle Chromeでサイトを見ていて、それまでとはレイアウトが変わり、「なんか変だ？」と思う事が色々と出てきてるんです。

今回もこうしたGoogle Chromeの表示がおかしくなってる件についてです。

サイトを見ていて、今見ているページの位置を知るのにパン屑リストが有ると便利ですよね。

WordPressのサイトではPrime Strategy Bread Crumbというplug-inを使うと、パン屑リストが簡単に表示できる様になります。作ったWordPressサイトにはほぼインストールしている位、愛用しています。

が、最新版のGoogle Chrome（Windows・Macとも）だけ、パン屑リストの一番左の項目、つまり表示させているページのタイトルの最後の１文字が改行されるてしまうと言う現象が起きる様になったんです。

Google Chromeでの表示は下図の様になります。

SafariやIE、Firefox、Sleipnirなどでは下図の様に、変な改行は起きません。

結論から言うと、これはWordPressだけの現象ではなく、liなどにCSSの擬似要素の::afterを使い、そのcontentプロパティの値をnull（なにもないと言う意味で”と記載）にしていると、Google Chromeでは、なぜかliタグで囲まれている文字が、最後に句読点が付いているのと同じ扱いを受ける様なんです。

ブラウザが表示ページをレンダリングする時、文字の長さを計算して文字を表示する幅を決めるのですが、目に見えない句読点的なものが付いた分文字が長くなり、表示前にレンダリングで算出された幅に入りきらず、句読点が付いた場合と同じ様に、直前の１文字も一緒に改行させていると考えられます。

言葉だけでは解り難いのでCSSコードを載せます。（.bread_crumbはPrime Strategy Bread Crumbを使うと自動的に付く、パン屑リストを囲むnavタグのclassです。）

li:afterで各層の項目名の後にcontentプロパティの「>」を表示させ、パン屑リストの層と層との間「>」が有る様に見せています。ですが一番右の表示ページ分の項目名の後には「>」が必要無いので、li:last-child::afterとして一番右の項目を選ばせ、そのcontentプロパティは「”」として、何も表示させていません。

このli:last-child::afterのcontentプロパティの「”」が、Google Chromeだけ句読点や？や！などと同じ扱いにされ、ワープロの禁則処理の様に句読点だけ行頭に表示しない様に、表示される項目名の最後の一文字も一緒に改行されるのですね。表示されたものを見ると、「”」は見えませんから、最後の一文字だけ改行された様に見えるんですね。

これを回避するには、li内の文字、つまりaタグで囲まれるものを、white-speceプロパティのnowrapで改行禁止させればいいわけです。

つまりCSSを

とすることで、下図の様に解決です。

これって、Google Chromeのバグだと思います。

ついでにPrime Strategy Bread Crumbの使い方なども。

使い方は、まず、いつもの様にダッシュボード>プラグイン>新規追加からPrime Strategy Bread Crumbを検索して、インストール、有効化します。

そしてheader.phpのパン屑リストを表示させたい位置に

を打ち込んでやれば表示されます。

しかし、このままでは下図の様に、単にパン屑リストの項目名が縦に並ぶだけになります。

なので、Google Chrome用の修正も含め、次の様にCSSでの調整が必要です。（WordPressサイトの使っているテーマのstyle.cssに書き込むだけでOK）

今回はWordPressというよりCSSについてでした。