「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

ページによってギャラリーのレイアウトが...
 
共有:
通知
すべてクリア

[クローズ] ページによってギャラリーのレイアウトが崩れてしまうようです。

10 投稿
3 ユーザー
5 Reactions
2,990 表示
(@rairai)
Eminent Member Registered
結合: 5年前
投稿: 30
Topic starter  

初めて、ホームページを作っているような素人ですので、わからないことばかりです。

優しいご回答を頂けたらと思います。

gutenbergのギャラリーで写真を載せたいと思い作っているのですが、なぜかPCではキレイにレイアウトされるのに、スマホで見ると、画像が伸びまくり次の文章にまでかぶってしまっている始末です。

ページによってのようなので、自分で作ったカスタマイズHTMLのtableセルあたりが影響しているのかなぁと考えては見たのですが、他のページでは大丈夫だったり、他のサイト(cocoonではない)でも大丈夫でしたし、原因が全くわかりません。

ホームページのURLを載せます。

https://shiina-stone.com

https://shiina-stone.com/introduce  ←正常 (上部の方に8枚のギャラリー)

https://shiina-stone.com/construction  ←崩れる (下部の方に8枚のギャラリー)

原因と解決方法をよろしくお願いいたします。

あと、ギャラリーを3カラムで載せようとすると、カラム落ちして並んでくれません。

できれば、そちらについても教えて頂けたらと思います。

まだ作成中ですので、とても散らかったサイトです。

いろいろご指南頂けましたら幸いです。

何卒よろしくお願い致します。

 

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16663
 

僕の環境へ確認してみたのですが、添付画像にあるように以下のような症状にはならないです。

スマホで見ると、画像が伸びまくり次の文章にまでかぶってしまっている始末です。

利用端末は何でしょうか?
よろしければ、状態をスクリーンショットで撮影して、画像をアップしていただいてよろしいでしょうか。

あと、ギャラリーを3カラムで載せようとすると、カラム落ちして並んでくれません。

これに関しては、テストページにでも不具合環境を作成して、見せていただけると助かります。


   
(@rairai)
Eminent Member Registered
結合: 5年前
投稿: 30
Topic starter  

ご返信ありがとうございます。

pcでchromeの画面を小さくしてスマホサイズにして、崩れたギャラリーをスクショして添付致しました。

手持ちの実際のスマホから見たのも同様に崩れていて、

ドコモGalaxy SC-04J   と  ドコモArrowsBe F-04K  のアンドロイドスマホです。

1年ほど経っているスマホですが、そんなに古い端末とは思えないのですが…。

サイトの作成はWindows10のedgeで作っていますが、画面を小さくしてもスマホのようにならないので確認できません。やり方がわかりません…。

>>あと、ギャラリーを3カラムで載せようとすると、カラム落ちして並んでくれません。

https://shiina-stone.com/construction   

こちらのページに、6枚の画像で、3カラムと6カラムバージョンで作ってみました。

3カラム→2カラム状態、

6カラム→5枚と1枚に分かれています。

ちなみにこちらのギャラリーもスマホで見るとめちゃめちゃに崩れています。

 

ギャラリーの崩れに関して、いろいろネットで調べてみましたがこれといったものが見つからず、途方に暮れています。

あまり遭遇しない不具合なのかもしれませんが、なにとぞよろしくお願い致します。

 

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

お疲れ様です。

どこの記載がそのように表示させているかをチェックしたいので、

  • Cocoon設定・高速化にあるCSS縮小化のチェックを外していただけますか。

一応CSSは以下を追記すればOKっぽいのですが。

.wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: auto;
}

   
わいひら reacted
(@rairai)
Eminent Member Registered
結合: 5年前
投稿: 30
Topic starter  

かうたっく様、ありがとうございます。

CSS縮小化のチェックを外してあります。

ご確認お願いいたします。

 

そして、外観→テーマエディター→style.css に、!important(付けないとダメでした。)を付けて上記のcssを追記しました。

結果のスマホ画像を添付致します。

以前よりだいぶ整い、いい感じに近づきましたが、もうちょっとな感じです。

https://shiina-stone.com/construction

なぜか一番下の、8枚のギャラリーだけはキレイにそろいました。

あと、pcですが、chromeでは、ちゃんと3カラム→3カラム、6カラム→6カラムになりました。

edgeでは、3カラム→2カラム、6カラム→5カラムのままです。

 

ご面倒をおかけしますが、引き続きよろしくお願い致します。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

https://shiina-stone.com/wp-includes/css/dist/block-library/style.min.css?ver=5.1.1&fver=20190225013833

このファイルが原因なのかもですね。これってデフォルトなのか。

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: 100%;
	flex: 1;
	-o-object-fit: cover;
	object-fit: cover;
}

高さが100%になっている箇所全部変更しちゃっても良いかもしれません。

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: auto;
}

優先順位が低いようなら、

.article .wp-block-gallery.is-cropped .blocks-gallery-image a, .article .wp-block-gallery.is-cropped .blocks-gallery-image img, .article .wp-block-gallery.is-cropped .blocks-gallery-item a, .article .wp-block-gallery.is-cropped .blocks-gallery-item img

このような指定で試してだめであれば、!importantを入れてstyle.cssで追記して様子をチェックしていただけますか。

今はChromeでそこしか見てませんが。


   
わいひら reacted
(@rairai)
Eminent Member Registered
結合: 5年前
投稿: 30
Topic starter  
.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {height: auto;}
.article .wp-block-gallery.is-cropped .blocks-gallery-image a, .article .wp-block-gallery.is-cropped .blocks-gallery-image img, .article .wp-block-gallery.is-cropped .blocks-gallery-item a, .article .wp-block-gallery.is-cropped .blocks-gallery-item img{height: auto;}

上記、二つをテキストエディターのstyle.cssに追記してみましたが、どちらもうまくいかないようです(>_<)8枚のギャラリーまで崩れてしまいました。一番上のを追記したものを画像に載せておきます。(もしかして入力の仕方が間違っているでしょうか?)

以前の下記の追記の方が、8枚のギャラリーはキレイになっていたので良かったようです。

.wp-block-gallery.is-cropped .blocks-gallery-item img {
height: auto;}

いずれも枠ができて、いい感じにはなってきているのですが、どうも高さがバラバラで整いません。

あと、今しみじみ気づいたのですが、やはり特定のページに問題があるようで、上記3つのいずれも追記すると、他のページの正常なギャラリーが崩れてしまいます。

ので、今はサイトは何も追記していない状態になっています。

https://shiina-stone.com/construction  ←特に問題のあるページ

一度、新規でページを作り直してみたりもしたのですが、下記のカスタムhtmlを入力した途端、ギャラリーが崩れました。でもこんな感じのは他のページでも使っています。たまたまでしょうか?私には全然わかりません。(´;ω;`)

<ul class="container">
<li class="item"><figure class="wp-block-image"><img class="wp-image-1866" alt="石塀工事写真" src="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-800x600.jpg" srcset="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-800x600.jpg 800w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-300x225.jpg 300w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-500x375.jpg 500w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-768x576.jpg 768w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122.jpg 1600w" sizes="(max-width: 800px) 100vw, 800px"><figcaption><br></figcaption></figure></li>
<li class="item"><figure class="wp-block-image"><img class="wp-image-1572" alt="矢印 赤" src="https://shiina-stone.com/wp-content/uploads/2019/03/yajirusi-aka.png">
</figure></li>
<li class="item"><figure class="wp-block-image"><img class="wp-image-1867" alt="石塀工事写真 After" src="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-800x600.jpg" srcset="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-800x600.jpg 800w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-300x225.jpg 300w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-500x375.jpg 500w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-768x576.jpg 768w, https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138.jpg 1561w" sizes="(max-width: 800px) 100vw, 800px"></figure></li>
</ul>

<style>
.container {
display: table;
width: 100%;
margin: 0 auto;
table-layout: fixed;
padding-left :0px;
}

.item {
display: table-cell;
vertical-align: middle;
text-align: center;
}


.item:nth-child(1) {
width: 45%;
}

.item:nth-child(2) {
width: 10%;
}

.item:nth-child(3) {
width: 45%;

}</style>

すみませんが、よろしくお願い致します。m(_ _)m


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

そのようになるページの.containerがdisplay: table;なってるからですね。

flexにすれば良いけどそれを指定すればレイアウトが壊れるような作りがややこしくしてそうかと思います。

<ul class="container">

これはご自身で指定されてるんですよね。このclass属性の名前がややこしくしてて。

ブラウザで見える範囲を囲む領域が同じ名前なんですよね。

<

div id="container" class="container cf"

>

ご自身のほうでclass属性を変更、それに伴ってCSSも同時に変更したほうが良いと思います。そのページのHTMLをコピペしてテキストエディタで一括置換するなど。

ul class="container" を ul class="ul-container" などに

<style>
.container { を .ul-container { のように。

何かのプラグインでそのような指定をされてるんですかね?

styleタグは変更が面倒なので、自分なら絶対使わないです(笑)


   
わいひら reacted
(@rairai)
Eminent Member Registered
結合: 5年前
投稿: 30
Topic starter  

かうたっく様、ありがとうございます!!(*‘∀‘)

無事に整いました!!

こちらで相談させていただいて良かったです☆

わいひら様も気にかけて頂きまして、ありがとうございました♡

 

また、何かありました時にはよろしくお願いいたします(^^♪


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

ul class="container" などの書き込みがなければ、気付かない所でした。

独自のカスタマイズが 対象外 である意味もよくわかりました。

ですが、今回は書き込みが分かりやすいものだったので、いつもCocoon的?私的?にも対応できるのかな???と思わされました^^

結果オーライで良かったですよねっ❦イロイロお疲れさまでした!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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