Cocoonフォーラム

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

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

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

相談内容:

不具合の発生手順:

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

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

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

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

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

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

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

ギャラリーの端数画像の拡大をなくしたい
 
共有:
通知
すべてクリア

[解決済] ギャラリーの端数画像の拡大をなくしたい

6 投稿
4 ユーザー
5 Reactions
1,927 表示
 SunK
(@SunK)
New Member
結合: 3年前
投稿: 2
Topic starter  

相談内容:

ギャラリーの端数画像の拡大をなくしたいです。
例えばギャラリーのブロック設定にある「カラム」を3にして、
4つの画像をギャラリーに追加した場合、4つ目の画像だけ引き伸ばされますが、
4つ目の画像も他の3つと同じサイズの表示にしたい。

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

.wp-block-gallery .blocks-gallery-item {
flex-grow: 0;
}

こちらを子テーマCSSに記載しましたが、編集画面では4つ目の画像も同サイズとなっており機能するものの、実際のページに飛ぶと機能していません。

試しに別テーマ「Twenty Seventeen」に上記CSSを記載したところ、編集画面も実際の画面もどちらも正常に機能しました。

そこからCocoonテーマの何かの要素の把握が足りていない為に、上手く行かないのでは。。。と思い質問させていただいた次第です。

ご教授いただければ幸いです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、SunKさん

こういった内容のご相談の場合は、実際のURLをご提示いただくのが、やはり解決の近道かと思います。

 

実際のページをデベロッパーツール等で検証すれば、どのCSSの記述を上書きすればよいのかなどが具体的にわかるかもしれません。

 

何らかの事情で、伏せておきたい場合を除いて。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7921
 

まったく事情が分かりませんけれど。

例えばギャラリーのブロック設定にある「カラム」を3にして、
4つの画像をギャラリーに追加した場合、4つ目の画像だけ引き伸ばされますが、
4つ目の画像も他の3つと同じサイズの表示にしたい。

カラムを4にしちゃいけないんでしょうか・・・


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@mk2_mk2 さん

3列横並びで、4つ目は、一つ目の下に、一つ目と同じサイズで表示したいってことだと思います。

 

ギャラリーの仕様は特殊なので、最下段が凸凹しないように調整しちゃうんですよね。

 

CSSの素養があれば、ギャラリーを使わずにFlexBoxで並べると良いのですが・・そういうプラグインってないのでしょうか・・

まだ出先です・・ ? 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

● 解決方法

このように CSS を変更すれば、ご希望に沿うと思います。

body .wp-block-gallery .blocks-gallery-item {
  flex-grow: 0;
}

● 原因

Cocoon の場合は、子テーマの CSS の後でブロックの CSS が読み込まれます。そのため、優先度を上げないと適用されません。

This post was modified 3年前 by Akira

   
わいひら reacted
 SunK
(@SunK)
New Member
結合: 3年前
投稿: 2
Topic starter  
投稿者:: @akira

● 解決方法

このように CSS を変更すれば、ご希望に沿うと思います。

body .wp-block-gallery .blocks-gallery-item {
  flex-grow: 0;
}

● 原因

Cocoon の場合は、子テーマの CSS の後でブロックの CSS が読み込まれます。そのため、優先度を上げないと適用されません。

akiraさん

ありがとうございます!無事に狙い通りの表示になりました!

原因もご説明いただきありがとうございます。大変参考になりました!


   
共有:

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

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

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

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

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

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

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

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