ウィジットの色を変更したい | カスタマイズ相談 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ウィジットの色を変更したい
 
Share:
Notifications
Clear all

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


ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
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
----------------------------------------------


未解決
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 13:32  

前略、ykk さん

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 13:41  

ykk さん

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

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

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 13:43  

ykk さん

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

 

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 13:55  

ykk さん

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

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


わいひら 件のいいね!
ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 14:04  

@leafytreeさん

お疲れ様です。

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

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

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

 

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

 

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

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

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

 

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 14:08  

@ykk さん

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

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 14:11  

@ykk さん

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

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 14:16  

@ykk さん

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

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

 

 


わいひら 件のいいね!
ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 14:29  

@leafytreeさん

 

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

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

 

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 14:34  

@ykk さん

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

 

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

 

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

 

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

 

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


ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 14:36  

@leafytreeさん

 

ありがとうございます。

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 14:37  

@ykk さん

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

 

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

 

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


わいひら 件のいいね!
ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 14:50  

@leafytreeさん

 

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

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

 

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 15:01  

@ykk さん

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

 

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

 

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

 

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

 

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


わいひら 件のいいね!
ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 15:06  

ありがとうございます。

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

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 15:15  

@ykk さん

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

 

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

 

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

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
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だと思われます。

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 15:23  

@ykk さん

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

 

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
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){
/*必要ならばここにコードを書く*/
}

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 15:54  

@ykk さん

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 18:43  

@ykk さん

7月11日18時38分現在

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

 

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

 

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

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

 

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

 

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


ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 19:51  

@leafytreeさん

 

お疲れ様です。

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

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

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


リフィトリー 件のいいね!
ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 20:16  

@leafytreeさん

 

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

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

 

.sidebar h3 {

color:#333;

}

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

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
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か、どちかかにして、記述を整理し、後で自分が迷うことがないように書いていいのです。

 

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

 


ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 20:46  

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

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 20:47  

@ykk さん

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

 

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

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

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


ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 20:48  

@leafytreeさん

 

お疲れ様です。

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

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

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

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


リフィトリー 件のいいね!
ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 20:53  

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

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

 


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月11日 20:56  

@ykk さん

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

 

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

 


ykk
 ykk
(@ykk)
ゲスト
参加: 1年 前
投稿: 42
2020年7月11日 21:30  

@leafytreeさん

 

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

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

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


リフィトリー 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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