たゆまかニュース　WordPressのTips帳　と　日常のメモ帳

• tweet

ソースコード表示に便利なSyntaxHighlighter Evolved　

SyntaxHighlighter Evolvedのレイアウトが・・・

SyntaxHighlighter Evolvedいい感じだなぁと思いながら、
今日、スマホでサイトを見てみるとレイアウトが崩れてました。

なんでかなぁ、他のプラグインが影響しているのかなとか思いましたが、
結局わからず、SyntaxHighlighter Evolvedがどんな風に動いているのか。
HTMLを調べました。

SyntaxHighlighter Evolved は tableタグ

SyntaxHighlighter Evolvedはtableで構成されています。
つまりは、table,tbody,tr,th,tdタグのスタイルを使うと
影響されてしまいます。

それに気づいて、投稿記事のtableの表示の仕方でstyle.cssを
変えたのを思い出しました。

まあ、きちんとCSSを書かなかったのがいけないのですが、
なかなか気付けなかったのでメモしておきます。

解決策

皆さんもすぐに気が付くと思いますが、
きちんとclassもしくはidを作って、
一般のtable系タグに影響を与えないようにすればOKです。

tableタグは下位セレクタのth,td等もまとめてカスタマイズすることが多いので、
tableにclassをしておいて、th,td等は下位セレクタとして

table.class_name { "style" }
table.class_name td{ "style" } 　

みたいな書き方が良いのではないでしょうか

• tweet

Sponsored link