CSSのカスタマイズがどうしても反映されない時は「追加css」に追記しよう

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート(月額会員制スポット
・某コミュニティの技術サポート
オルゴナイトのネットショップ店長
・職業訓練校のグラフィック/Web制作コースの講師3期目

アニメやマンガ好きで、子供の影響か?ギターの練習を再開しましたw

※当サイトのリンクは、Amazonを含めアフィリエイトリンクを利用しています。

口座やカードの自動取り込みが優秀すぎて、隙間時間に仕訳ができておすすめです^^

 

フリーランスの支払いトラブルを未然に防止


どうも、「癒せるブログのサポーター」がみたかです。

ブログのカスタマイズとして真っ先に思い浮かべるのが「CSSの編集」です。

あのよくわからないコードを、ちょこちょこ書き換えたり追記するだけで色や見た目が変わるので、大したものです(^_^;)

 

ですが、ここ最近Wordpressの仕様が変わったのか、「テーマ編集」のstyle.cssを追記しても一切反映されないことが多いんですね。

スポットサポートを依頼された時でも同様に、CSSの追記が反映されないことばかりなので、おそらく僕の環境だけではないと思います。

 

1日かけても直らなかったものが1時間で直る(場合もある)「スポットサービス」はこちら^^

Webに関する「ちょっと困った」を解決します〜スポットサービス〜

そんなCSSのカスタマイズをほぼ確実に反映させてくれるのが「カスタマイズ」の項目にある「追加css」になります。

その部分を使うことで9割がたCSSの反映ができたので、

偉大な冒険家
CSSの追記や編集をしたのに全然反映されねぇじゃねーか!

と困っている人の参考になればと思います^^

 

「追加css」の使い方

CSSの仕組み諸々については、ここではあえて割愛させていただきますm(_ _)m

偉大な冒険家
シンプルに要点だけを伝えるのもユーザー目線だぜ!

 

「追加css」を使ってカスタマイズする。

1.例として、「記事一覧」にあるカテゴリー表示の色をCSSで色を黒(#000)にしてみましょう。

ちなみにこのテーマは「Elephant-Single」というテーマになります。

下半分はChromeの「デベロッパーツール」というもので、カスタマイズをする時は便利です。

画面上で「右クリック」→「検証」で使えると思います。

この右がわの囲んだ部分(CSSのコード)をコピーします。

 

 

2.「外観」→「カスタマイズ」の順にクリック。

 

3.「追加css」をクリック。

 

4.追記するとカテゴリーの色が黒(#000)になります。

偉大な冒険家
「保存して公開」を忘れずにな!

 

cssを編集する場合は、ほぼこの方法で反映することができると思います。

 

「追加css」に関する疑問

がみたか
個人的に疑問に思ったことをまとめてみましたので、参考にしていただけたらと思います!

 

もしテーマに「追加css」が無かった場合は?

今回使ったテーマ「Elephant-Single」のように、標準で付いている場合もあれば、古いテーマだとこの「追加css」がない場合があります。

その場合はプラグイン「Jetpack」をインストールするか、「Simple Custom CSS」というプラグインをインストールしてみてください。

 

テーマを変えたら消えてしまわないか?

実はプラグイン「Jetpack」に備わっていた「CSS編集機能」は、テーマを変更するとリセットされる(消えてしまう)仕様だったため、テーマを変える前にその都度「style.css」にコピペしていました。

ですが、テーマに標準装備された「追加css」はテーマを変更しても消えることはありませんでした。

その代わり、新しいテーマにも使う場合はコピペしておく必要があります。

また、テーマを変更してもそのままCSSを適用させるのであれば、プラグイン「Simple Custom CSS 」を使うと良いでしょう^^

偉大な冒険家
プラグインを使うことで、テーマから切り離されるからな!

 

「追加css」のまとめ

子テーマに追記するのに慣れてしまった人には違和感があるかも知れませんが、今のところこの方法がほぼ確実に反映させることができています。

それでも反映されないとすれば、単に記述をミスしている可能性が高いので、よく確認しましょう^^

今回使った「Elephant-Single」とは、「Elephant2」を購入すると一緒に付いてくる、完全1カラムのWordpressテーマです。

使いやすく、所有サイトであればいくらでも使えるので、手に入れておくと良いかも知れません。

(アルバトロスは1ユーザーにつき、1サイトのみ使うことができます)

では、今回はこのへんで。また次の記事でお会いしましょう!

 

 

ちょっと複雑なカスタマイズもお任せください^^

 

Webに関する「ちょっと困った」を解決します〜スポットサービス〜

 

ブログ運営者のためのサポート保険!

ブログのトラブルや困ったことに時間を取られて

自分のやるべきことが出来ていない人のためサービスです!


無料メールマガジン

WordPressに関するお役立ち情報や、

『WordPressに詳しくなるメール講座』を配信しています!


知識・経験ゼロから、

Webクリエイターを目指すためのメール講座を配信しています!


『ちょっと困った』時のスポットサポート!

WordpressやWebに関する「ちょっと困った」を、

30分 4,400円〜で解決するサービスです!


Wordpressのお引越し!

安心・安全・快適で、ブログサポーターがおすすめする、

Xサーバーへのお引越しを代行します!


記事が気に入ったらシェアをお願いします^^