ここ２年程、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での表示は下図の様になります。
Google Chromeのみ、変な改行が起きます
SafariやIE、Firefox、Sleipnirなどでは下図の様に、変な改行は起きません。
Safariなどでは改行されない
結論から言うと、これはWordPressだけの現象ではなく、liなどにCSSの擬似要素の::afterを使い、そのcontentプロパティの値をnull（なにもないと言う意味で”と記載）にしていると、Google Chromeでは、なぜかliタグで囲まれている文字が、最後に句読点が付いているのと同じ扱いを受ける様なんです。
ブラウザが表示ページをレンダリングする時、文字の長さを計算して文字を表示する幅を決めるのですが、目に見えない句読点的なものが付いた分文字が長くなり、表示前にレンダリングで算出された幅に入りきらず、句読点が付いた場合と同じ様に、直前の１文字も一緒に改行させていると考えられます。
言葉だけでは解り難いのでCSSコードを載せます。（.bread_crumbはPrime Strategy Bread Crumbを使うと自動的に付く、パン屑リストを囲むnavタグのclassです。）
|
1 2 3 4 5 6 7 8 9 10 |
.bread_crumb li:after { margin-right: 10px; padding-left: 10px; content: '>'; color: #b4b4b4; } .bread_crumb li:last-child::after { content: ''; } |
li:afterで各層の項目名の後にcontentプロパティの「>」を表示させ、パン屑リストの層と層との間「>」が有る様に見せています。ですが一番右の表示ページ分の項目名の後には「>」が必要無いので、li:last-child::afterとして一番右の項目を選ばせ、そのcontentプロパティは「”」として、何も表示させていません。
このli:last-child::afterのcontentプロパティの「”」が、Google Chromeだけ句読点や？や！などと同じ扱いにされ、ワープロの禁則処理の様に句読点だけ行頭に表示しない様に、表示される項目名の最後の一文字も一緒に改行されるのですね。表示されたものを見ると、「”」は見えませんから、最後の一文字だけ改行された様に見えるんですね。
これを回避するには、li内の文字、つまりaタグで囲まれるものを、white-speceプロパティのnowrapで改行禁止させればいいわけです。
つまりCSSを
|
1 2 3 |
.bread_crumb li a { text-decoration: none; } |
とすることで、下図の様に解決です。
CSS修正したものをGoogle Chromeで表示させる
これって、Google Chromeのバグだと思います。
ついでにPrime Strategy Bread Crumbの使い方なども。
使い方は、まず、いつもの様にダッシュボード>プラグイン>新規追加からPrime Strategy Bread Crumbを検索して、インストール、有効化します。
そしてheader.phpのパン屑リストを表示させたい位置に
|
1 2 3 |
if (!is_front_page() && function_exists('bread_crumb')) : bread_crumb('navi_element=nav&elm_id=bread-crumb'); endif; |
を打ち込んでやれば表示されます。
しかし、このままでは下図の様に、単にパン屑リストの項目名が縦に並ぶだけになります。
Prime Strategy Bread Crumbレイアウト設定前
なので、Google Chrome用の修正も含め、次の様にCSSでの調整が必要です。（WordPressサイトの使っているテーマのstyle.cssに書き込むだけでOK）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.bread_crumb { clear: both; height: 20px; margin: 0; padding: 5px 0 5px 20px; border-radius: 3px; background: #eee; } .bread_crumb li { font-size: 12px; color: #70adff; float: left; line-height: 1.6; list-style: none outside none; } .bread_crumb li:after { margin-right: 10px; padding-left: 10px; content: '>'; color: #b4b4b4; } .bread_crumb li:last-child::after { content: ''; } .bread_crumb li a { text-decoration: none; } .bread_crumb li.current { white-space: nowrap; } |
今回はWordPressというよりCSSについてでした。
追加（2013-04-21）
Prime Strategy Bread Crumbの代わりにWP SiteManagerのパン屑リスト機能を使ってパン屑リストを表示させているサイトでも同様の症状が起きてました。
まあ、Google Chromeの最新バージョン（26.0.1410.65）のレンダリング・バグだと思うので、CSSにli::afterを使うと、どこでも発生すると思われます。
のレンタルサーバに「BackWPup」のver. 3をインストールし、バックアップしようとすると、上図の様に「データベースにMySQLi拡張がないので、インストールして下さい。」とエラーメッセージが出るんですよね。「BackWPup」のver. 3.8（2013-04-18現在最新）でも出ます。
