WordPressのプラグインに反映されたCSSスタイルを元に戻すやり方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Wordpressにプラグインを新しく入れると、自分で設定したCSSが反映されて見た目がおかしくなることがあります。今回はそれを元に戻す方法を紹介します。

PR

WordPressのプラグイン

Wordpressのプラグインとして、導入した際に見た目がおかしくなってしまったものが以下の2つです。

  • Crayon Syntax Highlighter
  • Table of Contents Plus

Crayon Syntax Highlighter

プログラミングのコード紹介には必須のコードに色付け等をしてくれるプラグインです。テーブル要素に装飾をしている場合は、そのスタイルが適用されます。

Crayon Syntax Highlighter

当サイトではこんな感じ。上はCSSで崩れた表示、下は元の表示です。

Table of Contents Plus

ページの目次を作成してくれるプラグインです。リスト要素に装飾(CSSによるスタイル)を当てている場合は、そのスタイルも適用されます。

Table of Contents Plus

当サイトではこんな感じ。左は完全に崩れた表示、真ん中は一番上の要素だけ元に戻った表示、右は完全に元に戻った表示です。

対処法

当ホームページでは記事部分に#contentを付けています。

PR

Crayon Syntax Highlighter

Crayon Syntax Highlighterのテーブルにはclayon-tableというクラスが付いています。そこで、CSS3のセレクタ:not()を使ってclayon-tableを除外しましょう。

Table of Contents Plus

以下の方法では出来ないことが分かっています。詳細は以下参照。

TOC+は一番上の階層のulにのみtoc_listというクラスが付いています。そのため、:not()で指定したとしても、2階層目(入れ子にした場合)以降はスタイルが反映されてしまいます。そこで今回はCSS3セレクタの1つ”~”(チルダ)を使いましょう。

E ~ Fは、E要素の後ろにある同じ階層のF要素にスタイルを適用する際に使用します。セレクタを ~ (チルダ)で区切ると、 同じ階層にある要素同士であれば、E要素とF要素の間に他の要素があっても(E要素とF要素が隣接していなくても)、F要素にスタイルが適用されます。 – CSS3リファレンス

この”~”を使った例が以下のようになります。

これを知るのにかなり時間を溶かしているので、まだまだ知らないことばかりだなぁと。CSSは奥が深い。

PR

この記事が気に入ったら
いいね ! しよう

Twitter で
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。