Lightningの見出しがカスタマイズできない理由と解決策

WordPress人気テーマ
「Lightningライトニング」

かっこよくカスタマイズしようと、

見出しのCSSをコピーしたのに
うまく反映しなくてお困りの方へ

 

 

 

 

もともと、Lightningの見出しはこんなデザインです。

 

 

CSSをコピーして
このデザインにしようとしましたが

※サルワカさんのページより引用
https://saruwakakun.com/html-css/reference/h-design

 

 

こんな風になっちゃいました。

 

その原因と対策をご紹介しますね。

 

まず、基本的なコピー操作については
こちらの記事をご覧ください。

見出しのデザインをコピペで簡単にカスタマイズする方法

CSSが正常に反映しない理由

 

デザインを変更しようと思って、
サルワカさんのサイトから、CSSをコピーしてきました。

コピーさせていただいたのはこちら。

 

今回変えたかったのは、「h3」だったので

サルワカさんからお借りしたCSSの
「h1」を「h3」に変更して、貼り付けました。

 

ここまでは良かったんですが、

問題は
「もともとのLightningのh3のデザイン」が残っていたことです。

ちなみに、今回ぶつかってしまったCSSはこれでした。

———

.subSection-title:after, h3:after {
content: “.”;
line-height: 0;
display: block;
overflow: hidden;
position: absolute;
bottom: -1px;
width: 30%;
border-bottom: 1px solid #337ab7;
}

——–

この、もともとのCSSを消したらいいんですけど
最近のCSSファイルは、データを小さくするため
隙間を詰めているので、簡単には編集しづらくなってきました。。

ぎゃふんですわ。

 

そんなときは・・・

 

もとのCSSが編集できないときは

もともとのCSSが編集できないんじゃ
お手上げか・・・とお嘆きのあなたへ

 

今設定されているCSSを

「初期設定に戻す」方法があります！

消したいCSSをコピーしてきて、
右側の「値」の部分を
全部「initial;」にしちゃえばOK！

こんな風になります。

——-ここから

.subSection-title:after, h3:after {
content: initial;;
line-height: initial;
display: initial;;
overflow: initial;
position: initial;
bottom: initial;
width: initial;
border-bottom: initial;
}

—-ここまで

まず、このCSSをはりつけて、
その下にサルワカさんからいただいたCSSを
貼り付けてみてください^^

これでうまくいくはずです！

CSSをカスタマイズするのは
難しいですが、目に見えてすぐ変わるので楽しいですよね。

お疲れ様でした^^

 

カスタマイズは、使いたいCSS、テーマによって
異なりますのでご注意ください。

難しい場合はお気軽にご相談くださいね^^
ご相談・アドバイスは初回無料でおこなっています。