サイドバーでスキン動作を確認できます。

カラムに貼り付けた画像が横にはみ出してしまう | Cocoonテーマに関する質問 | 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

niko
 niko
(@niko)
ゲスト
参加: 3か月 前
投稿: 5
2019年1月27日 17:51  

わいひら様

有益なテーマを提供していただいてありがとうございます。ありがたく利用させていただいております。

1つ質問させてください。(私はワードプレスはほぼ初心者に近い状態です)

 

【したいこと】

◆3カラムに画像を貼り付けて,3つの画像を横並びにしたい。(そして3つの画像が横幅いっぱいに表示されるようにしたい。スマホ等では縦並びで表示されるようにしたい)

◆それぞれの画像にはキャプションを表示させたい。

以上の作業をしたいのですが,なかなかうまくいきません。

 

【私がしたこと】

①画像の横幅を「264px」に設定する。→PCで表示した時,画面を細くすると,画像が横にはみ出てしまいます。(当然ですが…)

②テキストエディタから,画像の横幅を「100%」,画像の縦を「auto」に設定する。→一時的にうまくいったのですが,なぜか自動的にキャプションが消えてしまいます。キャプションを書き込んで再び表示させると,次は自動的に画像の横幅が元の画像の横幅(例えば「300px」など)に戻ってしまいます。

 

もうかれこれ1週間ほどずっと作業をしたり,ググったりしていますが,まったくうまくいきません…

助けていただけると幸いです。

サイトは

https://okayamacamp.com/region-search/

です。

よろしくお願いします。


未解決
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4545
2019年1月27日 20:22  

子テーマのstyle.cssに以下のように書くと多分いけるのではないかと思います。

.column-wrap.column-3 > div {
    max-width: 33%;
}

@media screen and (max-width: 768px){
  .column-wrap {
      flex-direction: row;
  }
} 

niko
 niko
(@niko)
ゲスト
参加: 3か月 前
投稿: 5
2019年1月28日 05:19  

わいひら様

できました!

「私の1週間の時間は何だったのだろう…」というくらいです。

貴重な時間を割いていただき,ありがとうございます!


niko
 niko
(@niko)
ゲスト
参加: 3か月 前
投稿: 5
2019年1月28日 05:45  

わいひら様

度々すみません。

「解決した!」と思ったのですが,問題が2つありました。

 

【問題①】まん中の画像だけ縦の長さが短くなっている。

例えば,以下の2つのページは二つともそうなっています。

https://okayamacamp.com/region-search/

https://okayamacamp.com/shiogama-campingvillage-facility2018/

 

【問題②】スマホで表示した時に,画像が縦並びに表示されていない。

スマホで表示した時も,PCと同じように画像が横に3つ並んでしまって見にくくなっています。

 

もしよろしければ,お力添えをください。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年1月28日 07:55  
/*カラムに貼り付けた画像が横にはみ出してしまわないように*/
@media screen and (min-width: 480px) and (max-width: 768px) {
  .column-wrap {
    flex-direction: row;
  }
  .column-wrap.column-3 > div {
    max-width: 33%;
  }
  .column-wrap.column-3 .column-left,
  .column-wrap.column-3 .column-right {
    padding: 0;
  }
}
@media screen and (min-width: 769px) {
  .column-wrap.column-3 > div {
    max-width: 33%;
  }
}

なんだか入り組んでましたが、こうかなぁ。

画像の横幅を「264px」

min-width: 480px の数値は、もう少し小さくてもイケると思うので、お好きな数値でどうぞ。

他の記事でもご確認くださいね。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4545
2019年1月28日 21:37  

スマホ等では縦並びで表示されるようにしたい

これを、横並びと見間違えていました。

縦並びにするのであれば、以下だけで多分いけるかと(問題①の修正含む)。

.column-wrap {
justify-content: space-between;
}

.column-wrap.column-3 > div {
max-width: 33%;
padding: 0;
}

niko
 niko
(@niko)
ゲスト
参加: 3か月 前
投稿: 5
2019年1月29日 05:43  

わいひらさん,かうたっくさん

私のためにお時間を使って考えていただいてありがとうございます。

 

①まず,わいひらさんのアドバイス通りやってみました。

すると,【問題①】の「まん中の画像だけ縦の長さが短くなっている」は解決され,さらに【問題②】の「スマホで表示した時に,画像が縦並びに表示されていない」も解決できました。

しかし,「スマホで表示した時に画面が小さいまま表示されていて見にくい」という新たな問題が発生しました…。PC画面を小さくした時やスマホ表示時などには自動的に画像が縦並びになって,しかも画像が横幅いっぱいに広がるというのが理想のイメージでした。

 

②次に,かうたっくさんのアドバイス通りにやってみました。

すると,PC表示では画像が横にきちんと並び,表示画面の横幅を大きくしたり小さくしたりしても,画面に合わせて画像の大きさが自動的に変わるので,イメージ通りでした。

また,スマホで表示した時には,画像が自動的に縦並びになって,しかも画像がスマホ画面の横幅いっぱいに広がり,理想のイメージ通りでした。

しかし,【問題②】の「スマホで表示した時に,画像が縦並びに表示されていない」が解決できませんでした。

 

私のイメージする画面は,以下のような画面です。

https://tabioka.com/cultural-assets/

このような画面にするためにはどうすればよいでしょうか?

私の説明が不十分で,たくさんお手間をとらせてしまったのですが,アドバイスをいただけると幸いです。

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年1月29日 07:26  

https://okayamacamp.com/shiogama-campingvillage-facility2018/

上記で確認しました。

また,スマホで表示した時には,画像が自動的に縦並びになって,しかも画像がスマホ画面の横幅いっぱいに広がり,理想のイメージ通りでした。

スマホで縦並び希望。ですよね?理想のイメージで良かったです。

しかし,【問題②】の「スマホで表示した時に,画像が縦並びに表示されていない」が解決できませんでした。

スマホで縦希望、縦並びで理想のイメージ。だけど、スマホで画像が縦並びになっておらず解決できない。

申し訳ないですが、ちょっと意味が分かりません。

 


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

しかし,「スマホで表示した時に画面が小さいまま表示されていて見にくい」という新たな問題が発生しました…。

そうだ。そしたらこうか。

.column-wrap {
  justify-content: space-between;
}

.column-wrap.column-3 > div {
  max-width: 33%;
  padding: 0;
}

@media screen and (max-width: 768px){
  .column-wrap.column-3 > div {
    max-width: none;
    padding: 5px;
  }
}  

前回同様、こちら側ではちゃんとした動作確認をしてないので、まだ問題点があるかもしれないけど、そしたらCSSはその状態のまま、また見せてください。

This post was modified 3か月 前 by わいひら

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

やっぱりその状態で良いんですね!

って事は、わいひらさんの冒頭のコードを借りるとこんな感じかも!?

正解がわかりませんが 🤗 

@media screen and (min-width: 480px) {
  .column-wrap.column-3 > div {
    max-width: 33%;
    padding: 0 2px;
  }
  .column-wrap {
    flex-direction: row;
  }
}

わいひら 件のいいね!
niko
 niko
(@niko)
ゲスト
参加: 3か月 前
投稿: 5
2019年1月29日 20:00  

わいひらさん かうたっくさん

できました!イメージ通りです。本当に感激しております。

そして,できたこと以上に,わいひらさん,かうたっくさんが私のような者の悩みを真剣に考えてくださったことに心から感謝します。

 

そして,かうたっくさん。私の入力ミスでした。申し訳ありません。

しかし,【問題②】の「スマホで表示した時に,画像が縦並びに表示されていない」が解決できませんでした。

ではなく,正しくは

【問題①】の「まん中の画像だけ縦の長さが短くなっている」が解決できませんでした。

ということでした。

でも,無事に解決できました。

 

今はまだ駆け出しで自分には何の力もありませんが,いつかお二人に恩返しができるよう,これから勉強していきますね。

本当にありがとうございました!


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

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

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

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

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

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

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

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

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

Cocoon
  
動作中

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

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