前略、ykk さん

カスタマイズは、子テーマで行うことを強くオススメします。

ykk さん

親テーマから子テーマへの移行は以下のトピックが参考になります。

[解決済] 親テーマと子テーマについてです。

ykk さん

追加CSSに書かれたCSSのコードは、文字コードをUTF-8（BOMなし）で扱うことができるテキストエディター等でバックアップして、子テーマにコピペでOKです。

SEさんだから、その辺りは、わかりますよね。

ykk さん

あと、前のトピックでも書きましたが、こちらも強くオススメします。

WordPress５から無くなったWP Multibyte Patchは必須なので手動インストールしましょう

@leafytreeさん

お疲れ様です。

全開に引き続きありがとうございます。

子テーマについて。わかりやすく教えて下さりありがとうございました。

一度ダウンロードしてみたのですが、画面が質素になってしまい操作をやめてしまっていましたが、ご教授いただいた方法で無事、子テーマにてサイト運営ができるようになったと思います。ありがとうございました。

添付資料にて送ってくださった開発ツールですが、残念ながら私のパソコンだとスマートフォン用の画面しか出てきません、、、、

そのため、leafytreeさんがされているようなことができない状態となっております。

このような場合、どのように対応すればよいでしょうか。

お手数をおかけしますが、どうぞよろしくお願いいたします。

@ykk さん

わいひらさんの記事を貼ってみます。

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

@ykk さん

Chromeだと、スマホのアイコンをクリックじゃなかったかな？

@ykk さん

デベロッパーツールの表示位置は変更可能です。（縦３つの丸をクリック）

別ウィンドウでも表示できます。

@leafytreeさん

ご丁寧にありがとうございます。

さっそく、記事を参考にやってみようとしているのですが、どういうわけか僕が修正したいピンクの部分だけはcssが効いている箇所が発見できません、、、、

leafytreeさんは見つけることができていますか？？

@ykk さん

うーん、それは、たぶん、ykkさんが、あとちょっと、HTMLやCSSの勉強をすすめるとすぐわかるようになると思われます。

最初に貼り付けた画像がヒントです。

めちゃくちゃ難しい訳ではないので、ご自身でわかるようにしてみてください。

SEさんなら、仕事にも役立つはずです。

べつに意地悪を言っている訳ではないんですよ。

@leafytreeさん

ありがとうございます。

挑戦してみます！ありがとうございました。

@ykk さん

以下のトピックには、有用なリンクが満載です。

きっと役に立つと思います。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

@leafytreeさん

ありがとうございます！何とか、問題の箇所を発見することができた模様です。

しかし、デベロッパーツールを用いてCSSに変更を加えた後、その変更内容を保存したいのですがその場合どのようにすればよいのでしょうか。というのも、こちらのサイトをマネして変更内容を保存してみたのですが、サイトにその変更内容が反映されないので、、、、お手数をおかけしますが、どうぞよろしくお願いいたします。

https://qiita.com/tokeikun/items/14513b019e66c2410296

@ykk さん

デベロッパーツールは、ブラウザのオプションツールで、Webサイトの内容を確認するためのものです。

ですので、デベロッパーツールで色やデザインを変更してみるのは、借りた衣装を着せてみるようなもので、CSSを追加や変更したときにどうなるのかを、仮に確認するだけの話です。

Webサイトのデザインを変更するには、Webサーバーにあるファイルを書き換えないと、変更することはできません。

インターネットの仕組みをもう一度、おさらいしてみてください。

どのようなCSSを書けばよいかがわかったら、ログインしてダッシュボードで追加CSS、または、子テーマのCSS（外観→テーマエディターで開けます）に追記して該当ファイルを保存します。

ありがとうございます。

保存したstyleをcssの子テーマに貼り付けてみたところ、無事に変更内容が反映されるようになりました。

本当にありがとうございました。そして、大変勉強になりました。

@ykk さん

子テーマのCSSにスキンのCSSをコピーしていませんか？

まるまるコピーしてしまうと、スキンのCSSと重複してしまいます。

子テーマのCSSに書くのは、以下のCSSだけでいいはずです。

.sidebar h3::after {
    border-color: #4169e1;
}

@ykk さん

子テーマのCSSに、どこから追記したのかわからなくなってしまった、というときは、以下のようにしてください。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.sidebar h3::after {
    border-color: #4169e1;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

黄色の部分が今回追記するコードです。

これ以外のコードは、スキンのCSSだと思われます。

これより下のコードは、不要と思います。

@ykk さん

初心者向けのトピックをご案内させていただきましたが、そんなに難しくないとは言え、数分や数時間で学ぶことはできないかと思います。

もう少し、腰を据えて、じっくりやってみてください。

@ykk さん

7月11日15時49分現在

子テーマのCSSに必要な記述が欠けています。

以下の記述に戻してください。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.sidebar h3::after {
    border-color: #4169e1;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

戻し方がわからないときは、質問してください。

@ykk さん

繰り返しになりますが、子テーマのCSSの記述の「戻しかた」がわからないときは、質問してください。

@ykk さん

7月11日18時38分現在

子テーマのCSSのデフォルトの記述は、元に戻されたようですね。

ただ、まだ、スキンのCSSをまるごとコピーしたものが残っているようです。

サイドバーの見出しの一部の色を変えるだけでしたら、以下のCSSだけ追記すれば、色は変わると思います。

.sidebar h3::after {
    border-color: #4169e1;
}

スキンのCSSがまるごと残っていますと、スキンを変えたくなったときなどに、別のスキンのCSSとかぶってしまい、不具合が出る可能性があります。

余分なスキンのCSSのコードは削除しておくことをお勧めします。

@leafytreeさん

お疲れ様です。

ご丁寧にありがとうございます。

ちょっと外出しており、ただいま頂いたメッセージを確認しました。そして、誠にありがとうございます。早急に対応いたします。具体的なアドバイスまで、本当にありがとうございます。

引き続きよろしくお願いいたします。

@leafytreeさん

最後に一つだけ、お伺いしてもよろしいでしょうか。

leafytreeさんがされていたように、私も変更したい箇所だけを抜き出してcssの変更を試みているのですが、leafytreeさんのように適切にcssのソースコードを抽出するできません。例えば、写真で印をつけた箇所の文字を黒文字にしようとして、

.sidebar h3 {

color: #333;

}

というcssをstylecssに追加したのですが、変更結果が反映されません。

お手数をおかけしますが、どのようにすればよいかご教授いただければ幸いです。

どうぞよろしくお願いいたします。

@ykk さん

CSSは、記述する場所や、読み込みの順番によっても、優先順位が変わってきます。

Ctrl + U のショートカットキーでソースコードを見てみると、どのような順番でCSSのコードを読み込んでいるかがわかります。

大雑把な順番としては、

外部ファイルの親テーマのCSSファイル

外部ファイルのスキンのCSSファイル

外部ファイルの子テーマのCSSファイル

そして、

インラインでHTMLに記述される追加CSSファイル

です。

CSSのコードは記述の詳細度が同じであれば、最後に読み込むものが優先されますが、最後であることに加えてインラインで読み込まれるので、最も優先順位が高くなるのは、これらの中では、「追加CSS」に記述したCSSです。

実は、@ykk さんは、追加CSSに以下のような記述を、ご自身でなさっています。

/サイドバータイトル/
.sidebar h3{
line-height: 50px;
padding: 0;
border-radius: 0;
font-weight: 700;
color: #fffafa;
background-color:transparent;
border-bottom:solid 3px #fffafa;
}

ですので、おそらく、こちらが優先されているのだろうと思われます。

CSSの記述場所は、追加CSSか、子テーマのCSSか、どちかかにして、記述を整理し、後で自分が迷うことがないように書いていいのです。

ただ、上から順番に読み込まれるため、下に書いてある方が優先されるというか、同じものを書いたら、下の方に書けば上書きするカタチになります。

cssがちゃんと反映してくれる時としてくれないときがあります。

この場合、おそらく何かしらのCSS同士が競合しているためだと思うのですが、この場合はどのように対処するのが適切なのでしょうか。

お手数をおかけしますが、引き続きよろしくお願いいたします。

@ykk さん

今回のサイドバーのデザインなら、追加CSSの方を修正すれば反映されるかと思います。

というか、子テーマに書いた

.sidebar h3::after {
    border-color: #4169e1;
}

の記述を、わかりやすく、追加CSSの方へ引っ越してもいいのです。

@leafytreeさん

お疲れ様です。

ご丁寧にありがとうございます。

そうだったのですね、、、、それには気づきませんでした、、、そして、勉強になりました。

毎度毎度ありがとうございます。

修正を試みます。ありがとうございます。

無事、問題が解決されました！

この度は本当にありがとうございました。

@ykk さん

CSSの記述も整理術が長けている方は、整然と、誰が見てもすぐわかるように書かれますが、そうでない方は、とっ散らかしたようになっているのも、たまに見かけます。（私もあまり他人のことをとやかく言えるほど整理してあるわけじゃないのですが・・）

@ykk さんは、勉強術には、とても長けていらっしゃるようですので、余計なお世話ですね。

@leafytreeさん

そうなのですね、、、！いえいえ、とんでもないです、、、、！

今まで、ネットに転がっていたCSSをコピーして使っていることが多く、CSSについて適切な管理ができずにいました。

本日、本当にたくさんのことを学んだので以後、きちんとソースコードの記述を整理していくことをくせ付けて参ります。