スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighter Evolvedの「追加のCSSのclass名」について

思い立ってWordpressでサイトを作っています。で、SyntaxHighlighter Evolvedというソースコードを表示するための定番プラグインを入れたのですが、その際にちょっと悩んだ部分があったので紹介します。導入方法等は多くのブログで紹介されていますので割愛します。

SyntaxHighlighterEvoled0.png

SyntaxHighlighter自体はこのブログでも使っていますので慣れていますが、WordpressのプラグインになるとSyntaxHighlighter専用の管理画面があり、管理画面は初めての経験です。

SyntaxHighlighter002.png

で、私がよく分からなかったのは、赤で囲っている「追加のCSSのclass名(複数可能)」という部分。

試しに「addClass」と入力してソースを見てみると、こんな感じです。

SyntaxHighlighter003.png

管理画面で指定した「addClass」がありません。

指定したクラス名がどこに適用されるかというと、デベロッパーツールで確認することができます。ちなみに下の画像はChromeで確認したものです。

SyntaxHighlighter001.png

で、全体を囲むdivにちゃんと「addClass」という名前のクラスが指定されています。

ということで、こちらで追加したクラスを編集することでスタイルを変えることができます。ただ、元々用意されているCSSのほとんどで「!important」が付いているので、追加したスタイルが優先されるよう注意が必要です。

「!important」を付けた上で優先順位を高くするか、「!important」をなくす必要があります。個人的には「!important」を乱用するのは好きではないで消しておきたいです。

SyntaxHighlighterは仕組みが複雑で元々あるCSSがどの部分を表すか分かりにくいですが、デベロッパーツールで見てSyntaxHighlighterの仕組み理解するとハードルはかなり下がると思います。

ちょっと地味な内容ですが参考になれば幸いです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。