どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因

      2015/11/07


WordPress上のブログでソースコードを紹介するのに、プラグインとしてCrayon Syntax Highlighterを利用している人も居る事でしょう。
Crayon Syntax Hilighterはソースコードを綺麗にブログ上で紹介する事が出来るのでとても便利ですよね。

 
プログラムコードを紹介する上でオススメのプラグインであるCrayon Syntax Highlighterですが、特殊な使い方をするとCSSの表示をさせた場合整形が行われず、ソースコードが、そのままブログ上に記述されてしまいます。

 
特殊な使い方というのが「ショートコード」を使ってCrayon Syntax Highlighterで追加した内容を紹介した場合です。
なぜショートコードで表示するとソースコードにCSSが反映されないのでしょうか。

 
ショートコードでテンプレート化したCrayon Syntax HighlighterのソースコードにCSSが反映されない原因について簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因
 

 

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されないとは?

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されないというのは、Crayon Syntax Highlighterの内容をショートコードでテンプレート化してショートコードを呼び出す形でブラウザの記事画面に出力するとソースコードの紹介にCSSが反映されないというものです。

 
ショートコードは定型文や決まった処理などをさせる上で便利ですが、Crayon Syntax Highlighterのプラグインの処理構造上はショートコード化して保持する事が難しいようですね。

 
ブログ内でよく使うようなプログラムの表現をショートコード化してプラグインで利用できるようにすると、いちいちCrayon Sytax Highlighterでプログラムコードを記述しなくてもできそうなものですが、どうやらショートコードとの相性が悪いようです。

 

 

 

 

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されない原因

Crayon Syntax Hilighterの内容をショートコード化としてテンプレート化する事でCSSが反映されない原因は、Crayon Syntax Highlighterが記事内容からCrayon Syntax HilighterのCSSを適用する対象の記事である事を認識できない事です。

 
Crayon Syntax Highlighterで記事内でソースコードが紹介されている事をプラグインが検知すると、HTMLのヘッダーにCrayon Syntax HighlighterのCSSやJSファイルを読み込むようにプラグインが動作する為、テンプレート化したCrayon Syntax Highlighterの内容をショートコードで記述するとタグなどを読み取る事が出来ずに必要なCSSやJSファイルが記事のHTMLに追加されなくなってしまうのです。

 
Crayon Syntax Highlighterのデフォルトのプラグイン状態ではショートコードではCSSが反映されないようなので、プラグイン改造などに慣れていないうちはショートコードでCrayon Syntax Highlighterのソースコードをテンプレート化しない方が良いようです。

 
Wordpress上でショートコードが実際のHTMLの内容に展開されるのはCrayon Syntax Highlighterのプラグインの各処理が実行された後なので、Crayon Syntax Hilighterからはショートコードはショートコードのまま読み取られてしまい、利用を検知する為の「<pre>~</pre>」等のタグを読み取る事が出来ず、結果としてCSSが適用されなくなってしまうのです。

 

 

 

 

スポンサーリンク


この記事を読むうえで知っておきたい知識

この記事を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

ソースコードをきれいに紹介するCrayon Sytax Highlighterとは

【Wordpress】ソースコードを紹介したい! Crayon Syntax Highlighter

Crayon Syntax Highlighterの表示イメージ


Crayon Syntax Highlighterとは、ソースコードを綺麗で読みやすくするWordpressのプラグインです。

 
Crayon Syntax Highlighterには、ブログページを表示した際にプログラムに行番号をつけたり、関数を色分けして表示してくれたり、CSSでの整形が不要だったりと、ブログ運営者にとってもブログページの閲覧者にとってもとても利便性の高いプラグインです。

 
Crayon Syntax Highlighterの対応言語は次の通りです。
ここで紹介されているソースコードを紹介する場合は、綺麗で使いやすい形でユーザに閲覧してもらう事が出来ます。

  • ABAP
  • ActionScript
  • AmigaDOS
  • Apache
  • AppleScript
  • Arduino
  • Assembly (x86)
  • AutoIt
  • C
  • C#
  • C++
  • CoffeeScript
  • CSS
  • Delphi/Pascal
  • Diff
  • Erlang
  • Go
  • Haskell
  • HTML
  • Lisp
  • Lua
  • Microsoft Registry
  • MIVA Script
  • Monkey
  • MS-DOS
  • MySQL
  • Java
  • JavaScript
  • Objective-C
  • Perl
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Python
  • R
  • Ruby
  • Rust
  • Scheme
  • Shell (Unix)
  • Transact-SQL
  • TeX
  • Vim
  • Visual Basic
  • Visual Basic .NET
  • YAML

 
Crayon Syntax Highlighterを利用する上でのメリットは上げ始めるとキリがありませんが、例えば次のようなメリットがあります。
このメリットだけでも、Crayon Syntax Highlighterを導入する根拠とする事が出来るでしょう。

  • コードの種類により、タグや関数を自動的に色分けして見やすい
  • 行番号をつけられるので、記事内の説明も容易になる
  • HTML、JavaScript、CSS、PHPだけでなく多くのコードに対応してる
  • CSS(スタイルシート)での整形が不要になる
  • 表示されたソースコードを簡単にコピーできる

 
Crayon Syntax Highlighterのデメリットとしては画面の表示スピードが落ちる事で、パフォーマンス低下が起こる可能性がある事です。

 
画面の表示スピードが落ちるという事はユーザーの離脱率が上がったり、検索エンジンのクローラーにストレスを与えてSEO的に評価を落としてしまう可能性があるので、著しくパフォーマンスの悪いブログに導入すると更にパフォーマンス低下を起してしまう原因になります。

 
Crayon Syntax Highlighterのデメリットを解消するには「キャッシュ」を利用して、あらかじめ表示したいページを作成しておき、閲覧ユーザやクローラーに対してパフォーマンスの低下を感じさせない事が大切です。

 
Crayon Syntax HighlighterはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
Crayon Syntax Highlighterのインストールは次の手順が主流です。

  • Wordpressのプラグインの「プラグインを追加」の画面で「Crayon Syntax Highlighter」と検索する
  • 検索で表示された「Crayon Syntax Highlighter」を「いますぐインストール」ボタンを押してインストール

 
Crayon Syntax Highlighterでソースコードを紹介する場合はエディタ画面の「Crayon」を追加する事で簡単に紹介する事が出来ます。
次の手順でソースコードの追加を行う事が出来ます。

  • エディタ画面の「Crayon」をクリックする
  • 「コード」を入力する
  • 「タイトル」を入力する
  • 「プログラム言語」を選択する
  • 「URL」を入力する
  • 「Line Range」を入力する
  • 「マークするライン」を入力する
  • 追加するコード固有の設定を行う
  • 「挿入」をクリックする

 
細かい設定手順を含めると大変な作業に思えますが、実際にコード紹介で行わなければならないのは最低限『エディタ画面の「Crayon」をクリックする』『「コード」を入力する』『「挿入」をクリックする』のみです。

 

【Crayon Syntax Highlighter】ショートコードで表示するとソースコードにCSSが反映されない原因
Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されないというのは、Crayon Syntax Highlighterの内容をショートコードでテンプレート化してショートコードを呼び出す形でブラウザの記事画面に出力するとソースコードの紹介にCSSが反映されないというものです。

 
Crayon Syntax Hilighterの内容をショートコード化としてテンプレート化する事でCSSが反映されない原因は、Crayon Syntax Highlighterが記事内容からCrayon Syntax HilighterのCSSを適用する対象の記事である事を認識できない事です。

 
Crayon Syntax Highlighterで記事内でソースコードが紹介されている事をプラグインが検知すると、HTMLのヘッダーにCrayon Syntax HighlighterのCSSやJSファイルを読み込むようにプラグインが動作する為、テンプレート化したCrayon Syntax Highlighterの内容をショートコードで記述するとタグなどを読み取る事が出来ずに必要なCSSやJSファイルが記事のHTMLに追加されなくなってしまうのです。

 
Wordpressでソースコードをきれいに紹介できるCrayon Syntax Highlighterについては「【WordPress】ソースコードを紹介したい! Crayon Syntax Highlighter」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されない原因 あとがき

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されない原因について紹介しました。
プログラムのソースコードはいちいち紹介する為に記述する事が大変な事もあるので、もしまったく同じプログラムを別記事で紹介したいならショーコードとしてテンプレート化すると考える人も居ると思います。というか私が実際にそうでした(笑)

 
必要な物をテンプレート化すると作業効率が上がるのでちょっとした作業の場合も大助かりだったのですが、いかんせん「Crayon Syntax Highlighter」の綺麗な表示がされなくなってしまうのは考え物です。

 
デフォルトの状態ではショートコードをCrayon Syntax Highlighterで利用する事は出来ないようなので、ショートコードによるCrayon Syntax Highlighterのテンプレート化は最初の内は見送った方がよさそうですね。

 
Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されない原因を知る事で、プラグインについて、また一つ学ぶ事が出来ました。

 

 

 

 

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されない原因 まとめ

Crayon Syntax Highlighterの内容をショートコードで表示するとCSSが反映されないというのは、Crayon Syntax Highlighterの内容をショートコードでテンプレート化してショートコードを呼び出す形でブラウザの記事画面に出力するとソースコードの紹介にCSSが反映されないというものです。

 
Crayon Syntax Hilighterの内容をショートコード化としてテンプレート化する事でCSSが反映されない原因は、Crayon Syntax Highlighterが記事内容からCrayon Syntax HilighterのCSSを適用する対象の記事である事を認識できない事です。

 
Crayon Syntax Highlighterで記事内でソースコードが紹介されている事をプラグインが検知すると、HTMLのヘッダーにCrayon Syntax HighlighterのCSSやJSファイルを読み込むようにプラグインが動作する為、テンプレート化したCrayon Syntax Highlighterの内容をショートコードで記述するとタグなどを読み取る事が出来ずに必要なCSSやJSファイルが記事のHTMLに追加されなくなってしまうのです。

 
Crayon Syntax Highlighterのデフォルトのプラグイン状態ではショートコードではCSSが反映されないようなので、プラグイン改造などに慣れていないうちはショートコードでCrayon Syntax Highlighterのソースコードをテンプレート化しない方が良いようです。

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress , , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【TinyMCE Templates】テンプレート挿入時にHTML自動整形を停止するカスタマイズ
【TinyMCE Templates】テンプレート挿入時にHTML自動整形を停止するカスタマイズ

TinyMCE TemplatesはWordpressの投稿画面のようにテンプレ …

【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法
【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法

W3 Total Cacheを入れてWordpressのブログを高速表示させよう …

【Wordpress】Wordpressインストールと初期設定
【WordPress】WordPressインストールと初期設定

ブログでWordpressを始めようと思ってWordpressをサーバーにインス …

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)のCSS&JS設定
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)のCSS&JS設定

WordPressでブログを運営している人でW3 Total Cacheのブラウ …

W3 Total Cacheで起こりやすい不具合
【W3 Total Cache】W3 Total Cacheで起こりやすい不具合 え?マジデ?!を解消しよう

W3 Total Cache等のキャッシュ系プラグインを使ってブログの動作の軽量 …

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates

WordPressでブログ記事を投稿していると、いつも使っている言い回しや、定型 …

【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定
【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定

広告を掲載していると「自分はリード文を書くのに3段落と決めているから、その段落の …

【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法
【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法

WordPressでブログを運営している人で、Stinger5を利用している人も …

【Wordpressプラグイン自作】フィルターフックと、フックで追加した関数の値のやり取り
【WordPressプラグイン自作】フィルターフックと、フックで追加した関数の値のやり取り

WordPressでフィルターフックを使っていると、フィルターフックと、フックで …

【Quick Adsense】記事中に自動で広告を掲載したい!Quick Adsenseを設定する
【Quick Adsense】記事中に自動で広告を掲載したい!Quick Adsenseの設定

広告でブログの収益化をしている人は「記事中に自動で広告を貼りたい」と考える人も居 …