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

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、テーマによって
異なりますのでご注意ください。

Follow me!

村重敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。