サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年7月11日 13:19
写真の以下の部分の色(インク)を「#4169e1」の色に変更しようとCSSの該当箇所を探しているのですが、どうも見つけられません、、、、どのようにすれば、色の変更ができるのでしょうか。ピンクの部分をすべて「#4169e1」に変更したいです。
お手数をおかけしますが、どうぞよろしくお願いいたします。
----------------------------------------------
サイト名:kidablog
サイトURL: http://better-mylife.net
ホームURL: http://better-mylife.net
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
スキン:/wp-content/themes/cocoon-master/skins/skin-mixblue/style.css
WordPressバージョン:5.4.2
PHPバージョン:7.3.17
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.5.4
カテゴリ数:15
タグ数:4
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.6
Classic Editor 1.5
Contact Form 7 5.2
Font Awesome 4.0.0-rc20
Google XML Sitemaps 4.1.0
Jetpack by WordPress.com 8.7
PS Auto Sitemap 1.1.9
----------------------------------------------
2020年7月11日 13:43
ykk さん
追加CSSに書かれたCSSのコードは、文字コードをUTF-8(BOMなし)で扱うことができるテキストエディター等でバックアップして、子テーマにコピペでOKです。
SEさんだから、その辺りは、わかりますよね。
Topic starter
2020年7月11日 14:04
@leafytreeさん
お疲れ様です。
全開に引き続きありがとうございます。
子テーマについて。わかりやすく教えて下さりありがとうございました。
一度ダウンロードしてみたのですが、画面が質素になってしまい操作をやめてしまっていましたが、ご教授いただいた方法で無事、子テーマにてサイト運営ができるようになったと思います。ありがとうございました。
添付資料にて送ってくださった開発ツールですが、残念ながら私のパソコンだとスマートフォン用の画面しか出てきません、、、、
そのため、leafytreeさんがされているようなことができない状態となっております。
このような場合、どのように対応すればよいでしょうか。
お手数をおかけしますが、どうぞよろしくお願いいたします。
Topic starter
2020年7月11日 14:29
@leafytreeさん
ご丁寧にありがとうございます。
さっそく、記事を参考にやってみようとしているのですが、どういうわけか僕が修正したいピンクの部分だけはcssが効いている箇所が発見できません、、、、
leafytreeさんは見つけることができていますか??
2020年7月11日 14:34
@ykk さん
うーん、それは、たぶん、ykkさんが、あとちょっと、HTMLやCSSの勉強をすすめるとすぐわかるようになると思われます。
最初に貼り付けた画像がヒントです。
めちゃくちゃ難しい訳ではないので、ご自身でわかるようにしてみてください。
SEさんなら、仕事にも役立つはずです。
べつに意地悪を言っている訳ではないんですよ。
Topic starter
2020年7月11日 14:36
@leafytreeさん
ありがとうございます。
挑戦してみます!ありがとうございました。
Topic starter
2020年7月11日 14:50
@leafytreeさん
ありがとうございます!何とか、問題の箇所を発見することができた模様です。
しかし、デベロッパーツールを用いてCSSに変更を加えた後、その変更内容を保存したいのですがその場合どのようにすればよいのでしょうか。というのも、こちらのサイトをマネして変更内容を保存してみたのですが、サイトにその変更内容が反映されないので、、、、お手数をおかけしますが、どうぞよろしくお願いいたします。
2020年7月11日 15:01
@ykk さん
デベロッパーツールは、ブラウザのオプションツールで、Webサイトの内容を確認するためのものです。
ですので、デベロッパーツールで色やデザインを変更してみるのは、借りた衣装を着せてみるようなもので、CSSを追加や変更したときにどうなるのかを、仮に確認するだけの話です。
Webサイトのデザインを変更するには、Webサーバーにあるファイルを書き換えないと、変更することはできません。
インターネットの仕組みをもう一度、おさらいしてみてください。
どのようなCSSを書けばよいかがわかったら、ログインしてダッシュボードで追加CSS、または、子テーマのCSS(外観→テーマエディターで開けます)に追記して該当ファイルを保存します。
わいひら reacted
Topic starter
2020年7月11日 15:06
ありがとうございます。
保存したstyleをcssの子テーマに貼り付けてみたところ、無事に変更内容が反映されるようになりました。
本当にありがとうございました。そして、大変勉強になりました。
わいひら reacted
2020年7月11日 15:15
@ykk さん
子テーマのCSSにスキンのCSSをコピーしていませんか?
まるまるコピーしてしまうと、スキンのCSSと重複してしまいます。
子テーマのCSSに書くのは、以下のCSSだけでいいはずです。
.sidebar h3::after {
border-color: #4169e1;
}
わいひら reacted
2020年7月11日 15:19
@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だと思われます。
これより下のコードは、不要と思います。
わいひら reacted
2020年7月11日 15:23
@ykk さん
初心者向けのトピックをご案内させていただきましたが、そんなに難しくないとは言え、数分や数時間で学ぶことはできないかと思います。
もう少し、腰を据えて、じっくりやってみてください。
2020年7月11日 15:52
@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){
/*必要ならばここにコードを書く*/
}
戻し方がわからないときは、質問してください。
わいひら reacted
2020年7月11日 15:54
@ykk さん
繰り返しになりますが、子テーマのCSSの記述の「戻しかた」がわからないときは、質問してください。
2020年7月11日 18:43
@ykk さん
7月11日18時38分現在
子テーマのCSSのデフォルトの記述は、元に戻されたようですね。
ただ、まだ、スキンのCSSをまるごとコピーしたものが残っているようです。
サイドバーの見出しの一部の色を変えるだけでしたら、以下のCSSだけ追記すれば、色は変わると思います。
.sidebar h3::after {
border-color: #4169e1;
}
スキンのCSSがまるごと残っていますと、スキンを変えたくなったときなどに、別のスキンのCSSとかぶってしまい、不具合が出る可能性があります。
余分なスキンのCSSのコードは削除しておくことをお勧めします。
Topic starter
2020年7月11日 19:51
@leafytreeさん
お疲れ様です。
ご丁寧にありがとうございます。
ちょっと外出しており、ただいま頂いたメッセージを確認しました。そして、誠にありがとうございます。早急に対応いたします。具体的なアドバイスまで、本当にありがとうございます。
引き続きよろしくお願いいたします。
リフィトリー reacted
Topic starter
2020年7月11日 20:16
2020年7月11日 20:45
@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か、どちかかにして、記述を整理し、後で自分が迷うことがないように書いていいのです。
ただ、上から順番に読み込まれるため、下に書いてある方が優先されるというか、同じものを書いたら、下の方に書けば上書きするカタチになります。
Topic starter
2020年7月11日 20:46
cssがちゃんと反映してくれる時としてくれないときがあります。
この場合、おそらく何かしらのCSS同士が競合しているためだと思うのですが、この場合はどのように対処するのが適切なのでしょうか。
お手数をおかけしますが、引き続きよろしくお願いいたします。
2020年7月11日 20:47
@ykk さん
今回のサイドバーのデザインなら、追加CSSの方を修正すれば反映されるかと思います。
というか、子テーマに書いた
.sidebar h3::after {
border-color: #4169e1;
}
の記述を、わかりやすく、追加CSSの方へ引っ越してもいいのです。
Topic starter
2020年7月11日 20:48
@leafytreeさん
お疲れ様です。
ご丁寧にありがとうございます。
そうだったのですね、、、、それには気づきませんでした、、、そして、勉強になりました。
毎度毎度ありがとうございます。
修正を試みます。ありがとうございます。
リフィトリー reacted
2020年7月11日 20:56
@ykk さん
CSSの記述も整理術が長けている方は、整然と、誰が見てもすぐわかるように書かれますが、そうでない方は、とっ散らかしたようになっているのも、たまに見かけます。(私もあまり他人のことをとやかく言えるほど整理してあるわけじゃないのですが・・)
@ykk さんは、勉強術には、とても長けていらっしゃるようですので、余計なお世話ですね。
Topic starter
2020年7月11日 21:30
@leafytreeさん
そうなのですね、、、!いえいえ、とんでもないです、、、、!
今まで、ネットに転がっていたCSSをコピーして使っていることが多く、CSSについて適切な管理ができずにいました。
本日、本当にたくさんのことを学んだので以後、きちんとソースコードの記述を整理していくことをくせ付けて参ります。
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。