質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2078閲覧

WordpressプラグインFooboxのCSSをカスタマイズしたい

FCA

総合スコア5

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/10/10 03:58

編集2019/10/11 03:57

WordpressプラグインFooboxのCSSカスタマイズ

Wordpressで投稿記事内にギャラリーを作成しており
プラグインFooGalleryとFooboxを利用しております。
ポップアップ時(サムネイルクリック後)のデザインを変更
したいのですがうまくいかずに困っております。
ご教授いただければ幸いです。

該当のソースコード.

fbx-light .fbx-inner,
background-color:#fff

!イメージ説明

プラグインエディタのcss修正箇所です

上記を
background-color:#333333
border-color:#4a4a4a00
(画像はすいません#000000となってますが)
としたいのですがうまくいきません。

試したこと

プラグインエディターで該当箇所のcssを変更してみましたが内容が反映されません。
プラグインエディターにて変更してみたファイルは
foobox-image-lightbox/free/css/foobox.free.min.css
です。

Wordpressの バージョン 5.2.3–jaです

サムネイルクリック後のポップアップされた画像周辺のボーダーを無くしたいと思ってます。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/10/10 04:58

.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} それとも、別の書き方をしていますか?
FCA

2019/10/10 06:34

ご連絡ありがとうございます。 上記で間違いありません。 またRBGAは対応していないブラウザがあるとのアドバイス、ありがとうございます。ブラウザはChromeを利用してるのですが、他の部分をカスタマイズする時はRGBAで変更しても問題なく反映されるのですが、、、。
Lhankor_Mhy

2019/10/10 09:36

「内容が反映されません」とのことですが、CSSをブラウザで直接表示させると、上記の変更はされていますか? つまり、CSSは変更されているがスタイルが適用されていないのか、CSSが変更されないのでスタイルが適用されていないのか、どちらですか?
FCA

2019/10/10 14:33

言葉が足らなくてすいません。 ”CSSをブラウザで直接表示させると、上記の変更はされていますか?” chromeデベロッパーツールでは変更が反映されてます。 ↑頂いたご質問の答えになっていますでしょうか? cssは変更されているがスタイルが適用されない。ということです。 chromeデベロッパーツールにてcssを変更 ↓ 内容確認後 ↓ プラグインエディターにて該当cssを変更。 ↓ ブラウザにて確認 ↓ cssは変更されているがスタイルが適用されない。 ということになります。
CHERRY

2019/10/10 22:47

CSS が、読み込まれているのに適用されていないということは、別の CSS で上書きされていたりしないでしょうか? デベロッパーツールでHTMLの該当部分のCSS 適用状況を確認するとどのようになっていますか?
FCA

2019/10/11 00:41

該当部分のcssは変更する前の状況になってしまっています。
Lhankor_Mhy

2019/10/11 01:06

実際のページをご提示いただければわりと解決しそうな感じがするのですが、それは難しいですか? ご質問中の fbx-light .fbx-inner, background-color:#fff の部分、ドットが抜けているのが気になっているのですが、これは大丈夫ですか?
FCA

2019/10/11 02:50

プラグインエディタ記載のcssにドットがなかったのでドットを入れてません。
Lhankor_Mhy

2019/10/11 03:38

スクリーンショットありがとうございます。 そちらではドットが入っていますね。 拝見したところ、気になる点が2つあります。 ・CSSのファイル名が foobox.free_ver=2.7.5 となっており、FCAさんが編集している /wp-content/plugins/foobox-image-lightbox/free/css/foobox.free.min.css とは違うファイルであるように見えますが、これは問題ありませんか? ・スクリーンショットにドメインが写っています。
FCA

2019/10/11 04:20

ご指摘ありがとうございます。 プラグインエディターを全て調べたのですが該当するファイルはこれしかないように思いました。該当するファイルの調べ方があればご教授いただければ助かります。
Lhankor_Mhy

2019/10/11 04:28

foobox.free_ver=2.7.5 のパスをご提示いただけますか?
FCA

2019/10/11 04:33

https://ドメイン名が入ってます/wp-content/plugins/foobox-image-lightbox/free/css/foobox.free.min.css?ver=2.7.5 となります。よろしくお願いいたします。
Lhankor_Mhy

2019/10/11 04:40

デベロッパーツールの foobox.free_ver=2.7.5 と表示されている部分を右クリックすると「 Open in new tab 」というメニューが出ると思うのですが、それで開くとそのURLになりますか?
FCA

2019/10/11 04:42

はい 上記のパスが表示されます。
Lhankor_Mhy

2019/10/11 05:01

そこにCSSのテキストが表示されると思いますが、それは border-color:#4a4a4a00; になっているということですよね……?
Lhankor_Mhy

2019/10/11 05:03 編集

あとは、キャッシュぐらいしか考えられないかなあ……? スーパーリロードとかは既に試されましたか?
FCA

2019/10/11 05:06

border-color:#4a4a4a00;になっていません。。。
FCA

2019/10/11 05:08

やはり修正しているファイルが違うということでしょうか。 その場合どのように探したら良いかご教授いただけると助かります。
Lhankor_Mhy

2019/10/11 05:20

わたし、ドメイン見てしまったので、https://ドメイン名/wp-content/plugins/foobox-image-lightbox/free/css/foobox.free.min.css?ver=2.7.5 を直接見たのですが、border-color:#4a4a4a00; になっていました。 これは、やはりキャッシュではないでしょうか? スーパーリロードはお試しになりました?
FCA

2019/10/11 05:35

Lhankor_Mhy様 スーパーリロード試しましたが変わりませんでした。 色々勉強になりました!ありがとうございました!
guest

回答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

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FCA

2019/10/11 05:36

dit.様 修正できました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問