WordPressの見出しをコピペでうまく変更できない

外観>テーマファイルエディタ。
ページ上部の「ご存じですか?」に惑わされる。

WordPressでブログを始めて間もなく、デザイン変えたいなぁと。
まずは見出しを変えるにはどうするのかを調べました。

CSSというコードをコピペするだけでできるらしい!簡単!
と思い色々とさわってしまいましたがうまく行きません。
何だかヘンテコな見出しになったままで修正できず・・・!
「cocoon」というスキンを使っているからかな?

ワードプレス超初心者が、コピペでは見出しデザインがうまく変更できなかった時に試したことについて書いてみます。

cocoonのデフォルト設定を消す

cocoonにはあらかじめ設定された見出しデザインがあります。

その設定があることを認識せずに、希望する見出しデザインのコピペCSSデータを貼り付けるとうまくいきません。

既存の設定を消すためのCSSコードを書かずに、コピペCSSコードを貼り付けると

デフォルトのCSS + コピペされたCSS のデザインとなり、

思うようなデザインになりません。

そのため、「あらかじめ設定されたデフォルトの見出しデザインを消すためのCSSコード」を先に記入する必要があるとのことです。

例【デフォルトの見出しデザインを消すためのCSSコード】(見出し2,見出し3)

/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
background:none;
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

CSSコード合ってる?

コピペする見出しのCSSを探していると、

「h2」とか「h3」などで書き出しているものがありますが、

それらのCSSをコピペしてもうまくいきません。

正しくは、
「.article h2」
「.article h3」
などから始まるCSSです。必要に応じて書き足しましょう。

追加CSSを書く場所

今日の画像にもある通り、

外観>カスタマイズ>追加CSS

という場所にCSSを書くように誘導(?)してきます。

たしかにこちらにCSSを入力するとプレビューできるし、良さそう。

ですが、

見出し変更のためのCSS貼り付けは、

全て、

外観>テーマファイルエディタ

に統一しましょう。

両方に情報が入っていると、CSSをコピペしてもうまく見出し設定できません。

 

以上のことが、私がコピペで見出し変更しようとするのにうまくいかなかった理由でした。

 

超初心者だけがコピペを使うのかわかりませんが、
調べてみてもなかなか解決できなかったんです。

まだまだわからないことばかり。
同じように悩んでいる方のお役に立てればと思います。

【日記】
ブログ更新せず熟睡してしまうところでした!!!

さて、長女は生傷が絶えません。大きくかさぶたを作ってしまいました。
今週はまっていたのは、マイクラ、一輪車、駄菓子屋、コナン(本)。
公文に行きたいと何度も言うので本気ですね。

次女がお隣のかっこいいピカピカの電動自転車を見て買って欲しいと。。。
(「小さい頃は神様がいて毎日夢を叶えてくれた~♪」by魔女の宅急便)

夜は牛乳飲まずに寝る!と決意してくれましたが、お風呂入る前に200mlのパック
2つ飲んでいますから・・・。いつもより早めに飲んだだけかもしれません。
飲まずに何とか寝ましたが、ずっとおしゃべりしていてなかなか寝ないので、
私が先に寝てしまいました。

 

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