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の制作、使い方のレクチャーなどを行っています。