現在デフォルトスキンとして「Bizarre-food(ブルーカレー) 」適用中。近日同梱予定。

ページによってギャラリーのレイアウトが崩れてしまうようです。 | 不具合報告 | Cocoon フォーラム

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

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ページによってギャラリーのレイアウトが...
 
Share:

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

  RSS

rairai
(@rairai)
Active Member
参加: 2か月 前
投稿: 18
2019年4月15日 13:36  

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

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

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

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

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

https://shiina-stone.com

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

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

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

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

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

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

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

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

 

 


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5402
2019年4月15日 19:36  

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

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

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

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

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


rairai
(@rairai)
Active Member
参加: 2か月 前
投稿: 18
2019年4月16日 00:49  

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

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)
メンバーサイト Moderator
参加: 1年 前
投稿: 2739
2019年4月16日 01:27  

お疲れ様です。

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

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

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

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

わいひら 件のいいね!
rairai
(@rairai)
Active Member
参加: 2か月 前
投稿: 18
2019年4月16日 10:28  

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

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

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

 

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

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

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

https://shiina-stone.com/construction

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

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

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

 

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2739
2019年4月16日 18:39  

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でそこしか見てませんが。


わいひら 件のいいね!
rairai
(@rairai)
Active Member
参加: 2か月 前
投稿: 18
2019年4月16日 23:37  
.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)
メンバーサイト Moderator
参加: 1年 前
投稿: 2739
2019年4月17日 05:38  

そのようになるページの.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タグは変更が面倒なので、自分なら絶対使わないです(笑)


わいひら 件のいいね!
rairai
(@rairai)
Active Member
参加: 2か月 前
投稿: 18
2019年4月18日 10:12  

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

無事に整いました!!

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

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

 

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


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2739
2019年4月18日 18:16  

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

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

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

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


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年10ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:8ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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