WordPress： iPhone で見ると SyntaxHighlighter の表示がおかしい

こんにちは、さち です。

このブログでは、HTML, CSS などのコードを掲載する際に SyntaxHighlighter を使っているんですが、その表示に不具合があります。

スマホ（iPhone）で見ると表示が崩れてしまうのです。

今回は、WordPress で SyntaxHighlighter を正常に表示できるように修正してみます。

不具合の詳細

SyntaxHighlighter の不具合は、スマホ（iPhone）でこのブログを見たときに起こります。

具体的には、次の2つのような不具合です。

不具合1 - コードの文字サイズ

1つ目の不具合は、コードの文字サイズ。

掲載しているコードの文字サイズが、勝手に大きくなります。下図の例では、上部の HTML より、下部の CSS の方がコードの文字が大きいのが分かります。

不具合2 - タイトルの背景色

2つ目の不具合は、タイトルの背景色。

コードが長く収まりきれていない部分を横スクロールすると、<caption> のタイトルの背景色が途中で途切れてしまっています。

修正方法

問題の原因は、WordPress で使用しているテーマでした。テーマによって設定されている <table> 関連の CSS が、SyntaxHighlighter の表示に悪影響を与えているわけです。

テーマの CSS を編集して、修正しましょう。

1. WordPress の管理画面を開き、「外観」→「テーマエディター」と進みます。
   
2. スタイルシート「style.css」を開きます。子テーマを使うテーマの場合は、子テーマの style.css を開きましょう。
   
3. 下記のような CSS を追記（CSS が適用されない場合は、適宜セレクタを変更したりして下さい）。下部にある「ファイルを更新」をクリックします。

   html {
     -webkit-text-size-adjust: 100%;
   }
   
   .syntaxhighlighter table {
     max-width: none;
   }

4. これで、SyntaxHighlighter のコードの文字サイズが勝手に変更されることはありません。
   
5. また、横にスクロールしても、タイトルの背景色が途切れることはありません。
   

文字サイズの大きさは事前に知識があったのですぐ直せたのですが、タイトルの背景色の方はなかなか直せませんでした。

最終的に、正常に表示されている旧ブログの CSS と比較することで解決できました。バックアップとして、旧ブログを消さずに残しておいてよかったです。

やっぱり、「バックアップ」って大事ですね。