コードを綺麗に表示するプラグイン【Enlighter】をLION MEDIAで使用すると発生するバグを修正する方法

コードを綺麗に表示するプラグイン【Enlighter】をLION MEDIAで使用すると発生するバグを修正する方法

コードを綺麗に表示するWordpressプラグインの一つにEnlighterというものがあります。
しかしながら、このプラグインをLION MEDIAに適応すると、番号が2重で表示されたり行間が以上に広くなってしまうバグが発生します。

これは、LION MEDIAに設定されているCSSがEnlighterのコードにも適応されているために発生してしまうレイアウトズレが原因です!

このブログに設定している修正用CSS

このバグを修正するために、このブログに適応しているCSSを以下に載せておきます!
wordpressの管理画面の 外観 > テーマの編集 > style.css に追加でコピペして保存すれば解決します!

div.EnlighterJSWrapper ol{counter-reset: initial; padding:10px 0 15px;}
div.EnlighterJSWrapper ul li:before{
  content: initial;
  position: initial;
  left: initial;
}
div.EnlighterJSWrapper ol li:before{
  counter-increment: initial;
  content: initial;
  position: initial;
  left: initial;
}
.content div.EnlighterJSWrapper ul li,
.content div.EnlighterJSWrapper ol li{
  position:relative;
  line-height:1.0;
  padding: 10px 0 0 25px;
  font-size:1.4rem;
}
Advertisement

Enlighterの様々なテーマ

Enlighterには様々なテーマがあります。せっかくなので、テーマ16種類全ての表示スタイルをご紹介します!

Enlighter

 

テーマ名: Enlighter
EnlighterをLION MEDIAで綺麗に表示する方法

Godzilla

 

テーマ名: Godzilla
EnlighterをLION MEDIAで綺麗に表示する方法

Beyond

 

テーマ名: Beyond
EnlighterをLION MEDIAで綺麗に表示する方法

Classic

 

テーマ名: Classic
EnlighterをLION MEDIAで綺麗に表示する方法

MooTwo

 

テーマ名: MooTwo
EnlighterをLION MEDIAで綺麗に表示する方法

Eclips

 

テーマ名: Eclips
EnlighterをLION MEDIAで綺麗に表示する方法

Droide

 

テーマ名: Droide
EnlighterをLION MEDIAで綺麗に表示する方法

Minimal

 

テーマ名: Minimal
EnlighterをLION MEDIAで綺麗に表示する方法

Atomic

 

テーマ名: Atomic
EnlighterをLION MEDIAで綺麗に表示する方法

Rowhammer

 

テーマ名: Rowhammer
EnlighterをLION MEDIAで綺麗に表示する方法

Git

 

テーマ名: Git
EnlighterをLION MEDIAで綺麗に表示する方法

Mocha

 

テーマ名: Mocha
EnlighterをLION MEDIAで綺麗に表示する方法

MooTools

 

テーマ名: MooTools
EnlighterをLION MEDIAで綺麗に表示する方法

Panic

 

テーマ名: Panic
EnlighterをLION MEDIAで綺麗に表示する方法

Tutti

 

テーマ名: Tutti
EnlighterをLION MEDIAで綺麗に表示する方法

Twillight

 

テーマ名: Twillight
EnlighterをLION MEDIAで綺麗に表示する方法

Qulii

CTA-IMAGE 中高生向け知的体験プラットホームを公開中!

wordpressカテゴリの最新記事