当ブログではWordPressでテーマはCocoonを使用しています。また記事内のソースコードはプラグインのCodeMirror Blocksを使用しています。
先日から更新を再開し始めて数日後、いきなりソースコードのデザインが以下のように崩れてしまいました。行間が異様に広がってしまいます。
こんな時にはグーグル先生の教えていただきましょう。エラーメッセージをコピペしてググりましょう。
うん？？でも今回エラーメッセージはありませんよね。こういう時は「CodeMirror Blocks」とめぼしいキーワードで調べてみましょう。まずは「CodeMirror Blocks」と「崩れる」の2つのキーワードで検索してみました。以下のように検索結果が出てきました。
検索結果の3番目の記事が参考になりそうです。早速、記事を見てみましたが今回の現象とは違うものでした。そこで次に「崩れる」というキーワードを「エラー」というキーワードに変えて検索してみました。以下のように検索結果が出てきました。
検索結果のトップの記事が参考になりそうです。早速、記事を見てみたらビンゴ！！私の現象と同じような現象を解決してありました。参考にさせていただきましょう。
具体的にはCodeMirror Blocksのサポートページを見るように言われます。そこで言われるがままに見てみると解決策となるCSSが記載されていました。そのCSSを使ってみます。
WordPressのダッシュボードのメニューから「外観」に移動して「カスタマイズ」を選択します。そうすると一番下に「追加CSS」という項目があるのでそこで記載されていたCSSをコピペして上部の公開のボタンを押します。すると行間が異様に広がりは解消しました。しかし以下のようにインデントが省略されています。
そこでコピペしたCSSを詳しくみてます。「white-space」が何か怪しい？？
.CodeMirror pre.CodeMirror-line {
background: inherit;
padding: inherit;
border: inherit;
line-height: inherit;
margin: inherit;
margin-left: .5em;
font-size: 1em;
white-space: inherit;
word-wrap: inherit;
overflow-x: inherit;
overflow-y: inherit;
}わからないので「white-space」をコピペしてググります。
調べた結果、「white-space」とは空白のことでした。ということは「inherit」ではダメだということです。そこで「white-space」の項目自体を削除することにしました。そうするとインデントも復活して以下のように元に戻すことができました。
エラーを解決するためにコピペしてググることを否定されている記事を見かけることがあります。ただエラーやつまづいたことをググるは有益だと思います。私は今までプログラミングを勉強してきて、大半はググることで解決してきました。ただググり方にコツがあるので、そのコツを掴むことが大事です。ここでいうコツとは検索キーワードです。いかに的確な検索キーワードを見つけることができるか、それだけです！！
