当サイトでは記事内にソースコードを挿入するのにWordpressプラグインの「Enlighter – Customizable Syntax Highlighter」を使用しています。
ところが、スマートフォンで閲覧した時にソースコードの端が見切れてしまって全て表示出来ていないことに気が付きました。
CSSを使って簡単に修正できましたので備忘録です。
style.cssにコードを追記して対応します。
この記事の目次
Enlighterでソースコードが見切れる
普段スマホでも記事のチェックはしているのですが、ソースコードそのものの端っこだけが見切れて表示されていないのに気付いたのは先日のことです。
当サイトではJavascriptのソースコードだけが見切れて表示されていました。
ソースコードが改行されずに見切れてしまう
その時のスマホのスクリーンショットがこちらです。
一見問題ないように見えますが、ソースコードが画面の端で適切に折り返されていないため、ソースコードの一部が見切れてしまっています。
パソコン表示でもブラウザの画面を絞るとやはり見切れてしまいました。
スマートフォンでコードをコピペして使用することは無いと思いますが、コード全体が表示されていないので参考にもなりません。
今回、この問題をCSSにて対処しました。
推測される原因
Enlighterプラグインでソースコードを挿入すると「div.enlighter」というクラス内にソースコードが入ります。
このクラスには「display:table」が指定されています。
そしてその2つ下の「div.enlighter > div > div」には「display:table-cell」が指定してあります。
更に別のクラスの「div.enlighter-default」クラス内で「word-wrap: break-word」を使って改行するように指定してあります。
ですが、このtable-cellとword-wrapの組み合わせは相性が悪く、はみ出すテキストの計算自体が出来ないようです。
確信は無いのですがおそらくこれが原因です。
対処法－word-break:break-allを使う
「word-wrap:break-word」を使えば単語の途中での折り返しを極力避けることが出来ますが、親要素と子要素にそれぞれCSSスタイルを割り当てる必要があります。
そこで単語の途中でも折り返しを行う「word-break:break-all」を使えばシンプルに解決できます。
問題であるEnlighterプラグインのソースコードが見切れてしまう問題ですが、幸いにも今回の表示対象はソースコードだけです。
ソースコードは単語の途中で途切れてもあまり問題がないと思われるのでこの方法でいきます。
ポイント
ソースコード表示のレイアウトが変わるかもしれませんので、変更後はコードに表示が無いか軽く確認して下さい。
style.cssにコードを追加する
子テーマのstyle.cssに以下のスタイルを追加します。
/*Enlighterの折り返し*/
.enlighter-default{
word-break: break-all;
}コードを追記＆保存したら適宜キャッシュなどをクリアし、画面サイズを小さくして確認してみます。
見切れずコードが表示された
スマートフォンなど画面サイズが小さい端末でもソースコードが折り返され、見切れなくなりました。
まとめ
Wordpressサイトでソースコードのハイライト表示に「Enlighter – Customizable Syntax Highlighter」を使っている方はモバイル端末でもソースコードがきちんと表示されているかチェックした方が良いかもしれません…
プラグインの設定画面ではみ出した部分を「スクロール表示」に変更することもできますが、あまり見てくれが良くないです。
調べても情報が出てこなかったので、記事にしてみました・ｗ・
