Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ウィジットの色を変更したい
 
共有:
通知
すべてクリア

[解決済] ウィジットの色を変更したい

31 投稿
2 ユーザー
15 Reactions
4,773 表示
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

写真の以下の部分の色(インク)を「#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
----------------------------------------------


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、ykk さん

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

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

ykk さん

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

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

 

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

ykk さん

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

ykk さん

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

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


   
わいひら reacted
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

お疲れ様です。

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

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

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

 

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

 

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

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

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

 

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

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


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

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

 

 


   
わいひら reacted
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

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

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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

 

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

 

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

 

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


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

ありがとうございます。

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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

 

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


   
わいひら reacted
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

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

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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

 

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

 

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

 

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


   
わいひら reacted
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

ありがとうございます。

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

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


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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

 

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

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

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@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
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@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
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

7月11日18時38分現在

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

 

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

 

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

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

 

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

 

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


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

お疲れ様です。

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

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

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


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

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

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

 

.sidebar h3 {

color: #333;

}

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@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か、どちかかにして、記述を整理し、後で自分が迷うことがないように書いていいのです。

 

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

 


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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

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

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


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

お疲れ様です。

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

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

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

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


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

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

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

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ykk さん

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

 

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

 


   
 ykk
(@ykk)
Trusted Member
結合: 5年前
投稿: 59
Topic starter  

@leafytreeさん

 

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

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

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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