Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] ギャラリーの標準スタイルを変更したい

CSSカスタマイズ相談

最新の投稿 : buibui 3か月前

3 投稿

2 ユーザー

0 Reactions

127 表示

RSS

buibui

(@buibui)

New Member Registered

結合: 3か月前

投稿: 2

トピックスターター 2024年9月21日 20:55

Cocoonになる前から使用させていただいておりますm(__)m

標準ギャラリーのキャプションを画像の外に表示したいと考えています。

https://buibui.jp/test/

上記のURLのテスト１（角丸・影・キャプション外）が理想の状態です。

画像に角丸の設定を行えばキャプションが外に出ることはわかったのですが、画像を追加するたびに同じことをするのではなく、テスト１がデフォルトの状態となるよう追加CSSに記載するにはどのようにしたら良いのでしょうか。

過去トピックの20pxの角丸にしたいという投稿も試してみましたが全く反映されず、、

欲を言えばこのページだけ追加CSSクラスを使用して反映できたらありがたいです。

大門未知子

(@chu-ya)

Illustrious Member Registered

結合: 3年前

投稿: 3131

2024年9月21日 21:23

●回答

左の画像と同じCSSを割り当てただけです。

.wp-block-gallery img {
  border-radius: 10px;
  box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
}

.body .wp-block-gallery figure.wp-block-image figcaption {
  background: none;
  color: inherit;
  flex: initial;
  margin: 0;
  padding: 10px 10px 9px;
  position: relative;
}

●アドバイス

ご自身のスキルに合った方法で対応するのが望ましいです。
カスタマイズする以前に、Chromeのデベロッパーツールの使い方知っていますか？
CSSはその次の話です。