サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年5月11日 18:45
お世話になります。
https://enjoy-lcl.com/archives/6301
こちらのページを含めた複数のページで「囲みボタン」の色を変更したいと考え、投稿ページの「カスタムcss」でいろいろ試しましたが、解決に至りませんでした。度々申し訳ございません。
「ボタン」では以下のコードで上手くいったのですが、
.btn-pink{background-color: #ed174c;}
「囲みボタン」では以下のコードで上手くいきませんでした。
.btn-wrap-pink{background-color: #ed174c;}
根本的に間違っているのかもしれませんが、簡単な間違いであればご教授いただきたいと思いやってまいりました。
よろしくお願い致します。
2021年5月11日 19:22
おそらくCSSセレクタの優先順位の違いかと思います。
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
書いているCSSレクタングル優先順位が他のものに負けている場合はコードが反映されません。
あと、フォーラムの案内にもありますように、カスタマイズの質問の際はできる限りサイトの高速化を無効にしていただければ幸いです。
elcl reacted
トピックスターター 2021年5月11日 19:32
わいひらさん
取り急ぎの謝罪です。高速化無効の保存ボタンを押し忘れておりました。申し訳ござません。
ご教授いただいた内容は、これから理解に励もうと思います。
トピックスターター 2021年5月13日 00:33
わいひらさん いつもお世話になります。
優先順位があることをまったく知らず、勉強しながらいろいろと試してみましたが、素人の私が、たった2日でモノにできるほど甘くはなかったようで、親要素？を揃えようとしてみたり、禁じ手？の「!important」入れてみたりしたのですが上手くいきませんでした。
結局今回は、唯一上手くいった「囲みボタン」ではなく「ボタン」の色変更と、いろいろ試しているうちに覚えた横幅の揃え方を採用して、さらに、アフィリエイトリンクをあまり気が進まなかったバナーにすることによって対応いたしました。
結果的には、当初考えていた見た目よりも良くなったかもしれませんし、副産物として幅の揃え方も学べたので良かったのではないかと考えています。
ちなみに「カスタムcss」に記載した内容を、私と同レベルの方のために貼っておきます。
また、「カスタムcss」は間違えても何度でもやり直せますし、サイト自体を壊してしまう心配がないので非常に重宝致しました。わたしは上手くできませんでしたが。。。
最後に、わいひらさんのお時間のある時で構わないのですが、どのようなコードを書けば優先順位を上げれたのでしょうか…
.btn-deep-orange{background-color: #e95504; width: 130px;}
.btn-light-blue{background-color: #0061b8; width: 130px;}
.btn-indigo{background-color: #002f8c; width: 130px;}
.btn-pink{background-color: #ed174c; width: 130px;}
.btn-red{background-color: #bf0000; width: 130px;}
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。