コードを綺麗に表示するWordpressプラグインの一つにEnlighterというものがあります。
しかしながら、このプラグインをLION MEDIAに適応すると、番号が２重で表示されたり行間が以上に広くなってしまうバグが発生します。
これは、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;
}
AdvertisementEnlighterの様々なテーマ
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で綺麗に表示する方法
