Q&A
#RBGA 表記は、対応していないブラウザがあります。
https://caniuse.com/#search=RGBA%20hexadecimal
WordpressプラグインFooboxのCSSカスタマイズ
Wordpressで投稿記事内にギャラリーを作成しており
プラグインFooGalleryとFooboxを利用しております。
ポップアップ時（サムネイルクリック後）のデザインを変更
したいのですがうまくいかずに困っております。
ご教授いただければ幸いです。
該当のソースコード.
fbx-light .fbx-inner,
background-color:#fff
!
上記を
background-color:#333333
border-color:#4a4a4a00
（画像はすいません#000000となってますが）
としたいのですがうまくいきません。
試したこと
プラグインエディターで該当箇所のcssを変更してみましたが内容が反映されません。
プラグインエディターにて変更してみたファイルは
foobox-image-lightbox/free/css/foobox.free.min.css
です。
Wordpressの バージョン 5.2.3–jaです
サムネイルクリック後のポップアップされた画像周辺のボーダーを無くしたいと思ってます。
よろしくお願いいたします。
.fbx-light .fbx-close,.fbx-light .fbx-fullscreen-toggle,.fbx-light .fbx-inner,.fbx-light .fbx-loader,.fbx-light .fbx-next,.fbx-light .fbx-pause,.fbx-light .fbx-play,.fbx-light .fbx-prev,.fbx-light .fbx-social-toggle,.fbx-light.fbx-inset-buttons .fbx-next:before,.fbx-light.fbx-inset-buttons .fbx-prev:before{background-color:#FFF}
↑の部分を、↓に変更した、ということで間違いありませんか？
.fbx-light .fbx-close,.fbx-light .fbx-fullscreen-toggle,.fbx-light .fbx-inner,.fbx-light .fbx-loader,.fbx-light .fbx-next,.fbx-light .fbx-pause,.fbx-light .fbx-play,.fbx-light .fbx-prev,.fbx-light .fbx-social-toggle,.fbx-light.fbx-inset-buttons .fbx-next:before,.fbx-light.fbx-inset-buttons .fbx-prev:before{background-color:#FFF0}
それとも、別の書き方をしていますか？
ご連絡ありがとうございます。
上記で間違いありません。
またRBGAは対応していないブラウザがあるとのアドバイス、ありがとうございます。ブラウザはChromeを利用してるのですが、他の部分をカスタマイズする時はRGBAで変更しても問題なく反映されるのですが、、、。
「内容が反映されません」とのことですが、CSSをブラウザで直接表示させると、上記の変更はされていますか？
つまり、CSSは変更されているがスタイルが適用されていないのか、CSSが変更されないのでスタイルが適用されていないのか、どちらですか？
言葉が足らなくてすいません。
”CSSをブラウザで直接表示させると、上記の変更はされていますか？”
chromeデベロッパーツールでは変更が反映されてます。
↑頂いたご質問の答えになっていますでしょうか？
cssは変更されているがスタイルが適用されない。ということです。
chromeデベロッパーツールにてcssを変更
↓
内容確認後
↓
プラグインエディターにて該当cssを変更。
↓
ブラウザにて確認
↓
cssは変更されているがスタイルが適用されない。
ということになります。
CSS が、読み込まれているのに適用されていないということは、別の CSS で上書きされていたりしないでしょうか？
デベロッパーツールでHTMLの該当部分のCSS 適用状況を確認するとどのようになっていますか？
該当部分のcssは変更する前の状況になってしまっています。
実際のページをご提示いただければわりと解決しそうな感じがするのですが、それは難しいですか？
ご質問中の
fbx-light .fbx-inner,
background-color:#fff
の部分、ドットが抜けているのが気になっているのですが、これは大丈夫ですか？
プラグインエディタ記載のcssにドットがなかったのでドットを入れてません。
スクリーンショットありがとうございます。
そちらではドットが入っていますね。
拝見したところ、気になる点が2つあります。
・CSSのファイル名が foobox.free_ver=2.7.5 となっており、FCAさんが編集している /wp-content/plugins/foobox-image-lightbox/free/css/foobox.free.min.css とは違うファイルであるように見えますが、これは問題ありませんか？
・スクリーンショットにドメインが写っています。
ご指摘ありがとうございます。
プラグインエディターを全て調べたのですが該当するファイルはこれしかないように思いました。該当するファイルの調べ方があればご教授いただければ助かります。
foobox.free_ver=2.7.5 のパスをご提示いただけますか？
https://ドメイン名が入ってます/wp-content/plugins/foobox-image-lightbox/free/css/foobox.free.min.css?ver=2.7.5
となります。よろしくお願いいたします。
デベロッパーツールの foobox.free_ver=2.7.5 と表示されている部分を右クリックすると「 Open in new tab 」というメニューが出ると思うのですが、それで開くとそのURLになりますか？
はい
上記のパスが表示されます。
そこにCSSのテキストが表示されると思いますが、それは
border-color:#4a4a4a00;
になっているということですよね……？
あとは、キャッシュぐらいしか考えられないかなあ……？
スーパーリロードとかは既に試されましたか？
border-color:#4a4a4a00;になっていません。。。
やはり修正しているファイルが違うということでしょうか。
その場合どのように探したら良いかご教授いただけると助かります。
わたし、ドメイン見てしまったので、https://ドメイン名/wp-content/plugins/foobox-image-lightbox/free/css/foobox.free.min.css?ver=2.7.5 を直接見たのですが、border-color:#4a4a4a00; になっていました。
これは、やはりキャッシュではないでしょうか？
スーパーリロードはお試しになりました？
Lhankor_Mhy様
スーパーリロード試しましたが変わりませんでした。
色々勉強になりました！ありがとうございました！
回答1件
0
ベストアンサー
外観-カスタマイズ-追加CSSに以下の記述でborderの色等変更できそうですが不都合がありますか？
css
1.fbx-light .fbx-inner { 2 border-color:#4a4a4a00; 3 background-color:#333; 4}
※プラグイン編集から質問者さんが変更している部分をテスト的に変えても色の変更はできました。
※キャッシュ系のプラグインがないか確認してください。
※スーパーリロードなどを試してください。
※プラグイン編集からの変更はプラグインの更新があった場合などに変更した内容が失われる可能性があるのでお勧めしません。
※HEX8桁のカラーコードは対応していない場合があるのでご注意。
投稿2019/10/11 05:22
総合スコア3235
あなたの回答
tips
プレビュー
