どうしたらいいの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

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

  関連記事

【WordPress】WordPressの本体をダウンロードする方法

ここではWordpress本体をダウンロードする方法を紹介しています。 &nbs …

【Wordpressプラグイン自作】プラグイン開発で良く使う!よく見る!PHPの関数
【WordPressプラグイン自作】プラグイン開発で良く使う!よく見る!PHPの関数

WordPressプラグインを自作したり、既存のプラグインを編集したりする上で、 …

【Wordpress開発環境】レンタルサーバからローカル環境にWordpressをコピーし開発環境構築!
【WordPress開発環境】レンタルサーバからローカル環境にWordPressをコピーし開発環境構築!

WordPressをレンタルサーバーを借りてブログ運営していると「レンタルサーバ …

【Wordpress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!
【WordPress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!

運営するブログによってはプログラムのソースコードを表示して紹介したい場合がありま …

【Wordpressプラグイン自作】Wordpressにプラグインの関数処理を実行させる方法(add_filter)
【WordPressプラグイン自作】WordPressにプラグインの関数処理を実行させる方法(add_filter)

WordPressのプラグインを自作したり、ダウンロード・インストールしたプラグ …

【Wordpressプラグイン自作】管理画面の任意画面を表示する時に処理実行する方法
【WordPressプラグイン自作】管理画面の任意画面を表示する時に処理実行する方法

WordPressでプラグインを自作開発していると、Wordpressの管理画面 …

【Quick Adsense】サイドバーに広告を追加する設定について
【Quick Adsense】サイドバーに広告を追加する設定について

WordPressでブログを運営している人で、広告を掲載している人は「サイドバー …

【Wordpress】データベースをバックアップしよう! 目的や方法について
【WordPress】データベースをバックアップしよう! 目的や方法について

WordPressでブログを運営する上ではデータの保全性もとても重要ですよね。 …

【Wordpressプラグイン自作】プラグインで一番初めに実行されるPHPファイルはどれ?
【WordPressプラグイン自作】プラグインで一番初めに実行されるPHPファイルはどれ?

WordPressのプラグインを自作する場合であっても、インストールして利用して …

【Wordpress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense
【WordPress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense

WordPressでブログを運営し、Google Adsenseを使ってブログを …