【ワードプレス初心者】cocoon の見出しが反映されない時の対処法

未分類

※当サイトはアフィリエイト広告を利用しています

ブログの見出しを
おしゃれにしたい…
助けて～！！

ブログをおしゃれにしたいですよね。自分好みのブログは継続の１つになります！
その中でもオシャレにカスタマイズしたいのは「見出し」です。見出しは記事を読み進めてもらうための言わば立役者です。

見出しをおしゃれにするためのCSSはたくさんあります。コピーOKのサイトもたくさんある中で、どうしてもCSSが反映されず悩んでいる方向けに私が解決した方法をお伝えします。

✅背景がデフォルト（初期設定時のまま）の方
✅H2やH3はできるのに…とある１つの見出しが反映できない方
✅ちょっと自分でもイジってみてCSSを理解してみたい方
 

焦った！このバグってなに？！

 
まずスタート時の私のブログで起きたバグを確認してみましょう。
 

ほんとえらいこっちゃで焦りました(;・∀・)何が起きたかさっぱり。

そして現在は

よかった～！！本当によかった。もうどうなるかと思いました。そして何が原因でそうなったのかを分からないまま、とりあえずイジった部分のCSSをすべて消しました(;’∀’)

ひとまず調べてみたけどそれでも分からなかった、見出しのCSS

「見出しのCSSが反映されないのは優先順位があるから」や「打消しをするためのCSSを入れてみよう」など試してみましたが、それでも反映ができませんでした。

とくにｈ3のグレーの背景が消えず、もうすればいいのやら…諦めかけたその時に
出会えたのは、ツヨシウェブさんの下記記事でした。

WordPressの見出しCSSコードが反映されない時の3つの原因と対処法を参考にさせてもらいました！ほぼこちらの説明で解決できました。感謝です！

 

どこが問題かを探るより、もう結論。先にコードを入れてみよう！

ツヨシウェブさんの記事の中で
1-3. 優先されているCSSコードを調べて、変更を加える【事例解説】に習って自分のカスタマイズしたい見出し、つまり反映できていない見出しのCSSを確認してみましょう！

そして実はここである程度カスタマイズを確認することができます！
CSSの中に＃から始まるコードがあります。そして□（四角）の中に色がついている場所があります。
そこが実は見出しの何かのカラーを司っていることが分かります。
そして、□（四角）を押すと、カラー選択ができます。見出しのどこのカラーが変わったか見てみましょう。

いっぱいコードが出てきて焦りますが、ここで触ったコードがワードプレスなどの自分のブログに反映されるわけではありませんので、安心してくださいね。

初心者なので「へ～ここが見出しの中の色が変わるのね～」レベルで＃マークを見つけて色を変えてみましょう！
そして自分用にカスタマイズできたところで、色を変えたところのCSSをコピーします！
コピーしたものを自分のブログのCSSにそのまま貼り付けてみましょう(*’▽’)
これで私は見出しを変更することに成功しました！打消しのCSSなどは入れておりません。
私はワードプレスのcocoonを使用していますので、cocoonのやり方をお伝えします。
 

cocoonの見出し変更のやり方

外観➡テーマエディター➡そして画面でCSSが反映できているか確認できるCSSエディターを選択します。（※テーマエディターページからリンクで飛べるようになっています。）
追加のCSSのタブをクリックし、先ほどコピーしたCSSを追加してみましょう！
 
ちなみに私のブログのｈ2、ｈ3のCSSはこうなっています。ご参考までに。

.article h2 {
margin-bottom: 40px;
padding: 0.625em;
border-bottom: 1px solid #2ca9e1;
background: #bfd7ff;
font-size: 22px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
box-shadow: 0px 0px 0px 5px #dfefff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.article h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #fff0f5;/*背景色*/
border-left: solid 5px #ff7abc;/*左線*/
}

 

.article h〇 {がキーポイント

初心者なりに試してみて分かったことは…
見出しは.article h〇 {　からスタートさせると反映される
※このとき、コピーしたCSSの出だしがH〇などなっている場合はその部分は削除（重複するからね）
 
そして真似したいCSSをコピーさせてもらったあと、コードを少し覚えるためにWEB色見本から色が変わった位置を理解するためとりあえず原色のコードを入れてみるとより分かりやすいです。似た色だと「え？どこ変わった？」となります。（私だけか？）

原色大辞典

憧れのカスタマイズはCSSを一旦見てみよう！

今まだ初心者マークのひよっこブロガーです。いきなり、上級者レベルのCSSカスタマイズはできません。それは仕方ない！泣。

あの方のようにこんな見出しにしたい！と目指したいブロガーさんのブログのCSSを見てみるのもいいでしょう。

でもどこがどのCSSか分からない(;_;)となると思います。私もやってみましたが分かりませんでした！ただ、先ほど自分でカスタマイズしたところのCSSに似た部分を探すだけでもCSSの勉強になります。そして反映できそうなところだけ真似してみるのもおススメ。

そしてたくさんCSSを駆使していると憧れますし、いずれ自分も！！と励みになります。
目標や憧れのブロガーさんを見つけるといいでしょう

ゆーすけさんのムクッといこうで詳細が紹介されています。
➡他人のブログのCSSを確認する方法
 
 

見出しで愛着のあるブログ作りをしよう

 
おしゃれなCSSを自分でカスタマイズしてみるとブログにも愛着がわきますね(*’▽’)カラーコード１つ変えるだけでもあなたらしいブログカラーになること間違いなし！
 
CSSって「イジってミスしたら全部パーになる」って思うからどうしても自分でカスタマイズすることが怖いです。でも色を変えるだけなら＃マークを見つけて、変更をかけるだけなのでとても簡単ですよ！
 

CSS、怖がらず少しずつカスタマイズ

していこ！

あ-む（＠anncolomochi＿am）でした！

 
タイトルとURLをコピーしました