
WordPress人気テーマ
「Lightningライトニング」
かっこよくカスタマイズしようと、
見出しのCSSをコピーしたのに
うまく反映しなくてお困りの方へ

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、テーマによって
異なりますのでご注意ください。
難しい場合はお気軽にご相談くださいね^^
ご相談・アドバイスは初回無料でおこなっています。