Love2Labo

日常の些細なことやどうでもいいことをあなたに。たまに Wordpress カスタマイズ。

WordPress

[WP]プラグイン「Crayon Syntax Highlighter」で表示が崩れるときの対処法

投稿日:2014/09/22 更新日:

wp_crayon

人の書いたソースコードを見ていて、中身を理解できたときって思わずニヤっとしてしまいます。

仕事中、よくニヤニヤしてて突っ込まれるあめたまです。こんばんわ。

 

さて、今回は久しぶり?のWordPress記事です。今回はずっと気になっていたことが解決できたのでご報告になります。

 

問題発生。グレイブアクセントが表示されない。

まずはこちらをご覧ください。

wp_crayon_01

私がよく使用する顔文字なんですが、上段が私の意図している表示。下段がこのブログで表示されていたものです。(2014/09/22対策済みです)

「`」←これが表示されないんです。これは「グレイブ・アクセント」とか「backtick」と呼ばれる記号です。

原因がWordPressにあるのか、STINGER5にあるのか、はたまたそれ以外なのか…。皆目検討も付かず、いろいろ悩んでました。

そんな中、さらに問題点が発見されました。

 

スポンサーリンク

 

第2の問題。<code>タグが勝手に挿入されている。

先日の記事のキャプチャをご用意しました。

wp_crayon_02

わかりますか?上の行は文字にアンチエイリアスがかかっていますが、下の行はアンチエイリアスがオフになった状態です。

アンチエイリアスっていうのは簡単に言うとぼかしです。アンチエイリアスをかけるとぼやっとしますが、中間色が入り滑らかな表示になります。アンチエイリアスがかかっていない下の方がクッキリしていますよね。

アンチエイリアスの是非は置いておいて、問題は私は同じように文章を入力しているのに、アンチエイリアスがかかる行とかからない行があるということです。

 

Chromeで[要素を検証]し、ソースを確認します。

wp_crayon_03

なんか<code>タグが入っています!

 

原因は「Crayon Syntax Highlighter」

現象は把握できました。グレイブアクセントが</code>タグに置換されているようです。では原因は?

原因の把握のためにプラグインを全て停止してみると、表示は改善されました!つまりWordPressやSTINGER5の問題ではないということ。

次にプラグインを1つずつ有効にしていきます。

 

「Crayon Syntax Highlighter」が原因でした。

 

カスタマイズブログによくあるソースコードの表示。私は「Crayon Syntax Highlighter」を使っています。これが原因で表示が崩れていたようです。

原因がわかったので対策をGoogle先生に聞いてみましたが、英語ばっかりでよくわかりません。

しょうがないので、「Crayon Syntax Highlighter」の設定をひとつずつ確認していきます。

 

解決方法

wp_crayon_04

 

それっぽいところが見つかりました。内容はよくわかりませんが、デフォルトでチェックが入っていたので外してみました。

結果、無事に解決できました!

私のように顔文字を使う方はご注意くださいヘ(゚∀゚ヘ)アヒャ

 

-WordPress
-

Copyright© Love2Labo , 2016 AllRights Reserved Powered by AFFINGER4.