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

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

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

スマホ表示で文字の回り込みを解除したい
 
共有:
通知
すべてクリア

[解決済] スマホ表示で文字の回り込みを解除したい

15 投稿
3 ユーザー
8 Reactions
2,930 表示
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

いつもお世話になります。

画像の右に文字を回り込ませているのですが、スマホ表示で回り込みを解除する方法を教えて頂けないでしょうか。

テストURL  https://lavinne.com/test/

大きな画像だと画像の下に文字が来るのですが、画像を小さくすると文字が右に回り込んでしまいます。

CSSを色々試したのですが上手くいかなくて・・・。
よろしくお願い致します。


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

スマホviewのみ以下のCSSをメディアクエリで指定して適用するのも良いと思います。

.wp-block-image .alignleft {
	float: none;
}

でも、別のブロックを使ったほうがCSSを書かなくても良い分、楽な気もします。


   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん、いつもありがとうございます。

.wp-block-image .alignleft {
	float: none;
}

これは試してみたのですが、やはり回り込み解除にはなりませんでした。

PCのレスポンシブテストもスマホでも同様です。

でも、別のブロックを使ったほうがCSSを書かなくても良い分、楽な気もします。

これは例えばどのような書き方でしょうか?

希望する表示は

  1. PCでは左に画像、右に文字を回り込ませる。
  2. SPでは回り込みをせず、上に画像、下に文字が来るようにする。 

というものです。


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

これは試してみたのですが、やはり回り込み解除にはなりませんでした。

PCのレスポンシブテストもスマホでも同様です。

忘れてました。デベロッパーツールだとCSSの優先順位が強いのでそれでイケるんですが

 

head内のCSSの順位がブロックエディタのほうが強いんでした!
子テーマに書いた場合、そのあとに読み込まれるブロックエディタが上書きしてしまうのが原因だと思います。

今確認してないけどそういった認識って意味でして。

 

例えば#main半角スペースをはじめにつけて、メディアクエリ内で指定すれば解決するかと思われます。

解決した際、そのCSSを書いていただけたら、助かります! ? ? ? 

 


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

それから。

希望する表示は

  1. PCでは左に画像、右に文字を回り込ませる。
  2. SPでは回り込みをせず、上に画像、下に文字が来るようにする。 

というものです。

こっちのほうですが、実際私も確認しないとコレですよ!っていえないんですが
他のブロックを確認するか、Cocoonのものであれば、2カラムなどを試して納得いく結果の表示になるかどうか。みたいな感じです。


   
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

忘れてました。デベロッパーツールだとCSSの優先順位が強いのでそれでイケるんですが

あ、それどっかで聞いたことがありました!

なので

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

ということで、!importantを付けて一応の解決はしました。
ありがとうございますっ!!<(_ _)>

ただ、スマホ表示で回り込み解除できたのは良いのですが、画像の右側に隙間が出来てしまいました。

Cocoonの2カラムを使用した場合、画像はスマホ画面幅になるのですが、画像ブロックで回り込みを解除した場合でも同様に画像をスマホ画面幅にすることは可能でしょうか?


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

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none;
}
}

ということで、!importantを付けて一応の解決はしました。

この件ですが、AMPを有効にされてる場合は、AMPからのアクセスでは表示が以前のままかもしれません???

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

#main .wp-block-image .alignleft {
float: none !important;
}
}

など、親要素。と言われるその領域を囲むタグのHTMLをの属性を指定したほうがぶなんかもしれません。※CSSありがとうございます!

This post was modified 5年前 3回 by かうたっく

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

それから

Cocoonの2カラムを使用した場合、画像はスマホ画面幅になるのですが、画像ブロックで回り込みを解除した場合でも同様に画像をスマホ画面幅にすることは可能でしょうか?

状況が分かりかねます。

チェックしたページ: https://lavinne.com/test/

 

万が一必要で必須であれば
実装していただいて様子を見せてください。

もしかしたら、別トピックを挙げていただけたら、他の人にも届くかもしれないです?ので質問の回答側の人で不足のためご協力お願いします!


   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん、別トピ等の件了解いたしました。

えっと、この後スマホでの回り込み解除については詳細を書きたいと思いますが、今回記載したテストURL  https://lavinne.com/test/  ではスマホで回り込み解除できたのですが、同じCSSを指定しても本番用のURLでは回り込みが解除されませんでした。

ともにプラグインは入れていません。

違いがあるとすれば、Cocoon子テーマのバージョンが違ったので(テストURLはバージョンが古い)、今バージョンアップしているところです。

結果等、追ってご連絡致します<(_ _)>


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

#post-25487

 !importantの書き込みの件で、うまくいかなかったので再書き込み

 

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

ということで、!importantを付けて一応の解決はしました。

この件ですが、AMPを有効にされてる場合は、AMPからのアクセスでは表示が以前のままかもしれません???

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

#main .wp-block-image .alignleft {
float: none;
}
}

など、親要素。と言われるその領域を囲むタグのHTMLをの属性を指定したほうがぶなんかもしれません。※CSSありがとうございます!


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

かうたっくさん、別トピ等の件了解いたしました。

ありがとうございます!

 

えっと、この後スマホでの回り込み解除については詳細を書きたいと思いますが、今回記載したテストURL   https://lavinne.com/test/   ではスマホで回り込み解除できたのですが、同じCSSを指定しても本番用のURLでは回り込みが解除されませんでした。

ともにプラグインは入れていません。

同じCSSってどのことでしょうか??

優先順位の話でしたら、上で書いた通りです。

 

何を試して何がむりだったか教えてください。

もうしわけないですけど、ちょっと意味が分からない状態です。どこのURLではへいきだったか。などありますか?全部チェックしきれませんけど

 

追記

マホで回り込み解除できたのですが、同じCSSを指定しても本番用のURLでは回り込みが解除されませんでした。

子テーマに書いたCSSに問題があるかと思われます。実際みてないので何とも言えません。※何もカスタマイズを行ってない状況であれば問題ない。って事ですので、そう思われます。

This post was modified 5年前 by かうたっく

   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

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

この件ですが、AMPを有効にされてる場合は、AMPからのアクセスでは表示が以前のままかもしれません???

現在AMPはOFFにしておりますので、現段階ではこのままでいこうと思います。

子テーマに書いたCSSに問題があるかと思われます。実際みてないので何とも言えません。※何もカスタマイズを行ってない状況であれば問題ない。って事ですので、そう思われます。

子テーマのバージョンを揃えたり、なんだかんだしていたら同じ表示になりました。

まとめますと、

最初の質問は、テストURL https://lavinne.com/test/  2段目の画像がスマホ表示で回り込み解除が出来ないということでした。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none ;
}
}

を記述しても反映されない・・・。

忘れてました。デベロッパーツールだとCSSの優先順位が強いのでそれでイケるんですが

というご助言を頂き、「!important」を追加。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

すると、スマホで文章の回り込みが解除されました。

今回質問させて頂いた件は、テストURL(サイト)で公開させて頂きました。
現在未公開で作成中のサイトで、「スマホで回り込み解除」のCSS(テストURL同じもの)を記述したところ、回り込みが解除されず原因を調べていました。

両サイトともCocoonのバージョンを最新にするなど、考えられることをやりましたが、結果的には凡ミス(CSS記述ミス)だったようです。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

と書くものを

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
.wp-block-image .alignleft {
float: none !important;
}

と記述していたようです。

結果的にスマホにおける回り込み解除は「float: none !important」を付けることによって解決することが分かりました。

かうたっくさんが言われるように、AMPを有効にした場合は追加の記述が必要なのだと思います。

最後に、スマホ表示で回り込み解除をした場合、画像の右に余白が出てしまう対処については別トピで質問させて頂きたいと思います。

あ、長くなりましたが、文章って難しいですね。
他のトピを見ているとき、「それは何を指しているの?」と思うことが多々あるので、結構気を付けて書き込んだつもりでしたが、誰が見ても分かる文章を心掛けないといけないと改めて思いました。

日々進化を続けるCocoonとそこに尽力されるわいひらさん。
そしてこのフォーラムで、惜しげもなく助言してくださるみなさんに感謝いたします<(_ _)>


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

現在AMPはOFFにしておりますので、現段階ではこのままでいこうと思います。

そうなんですね。検索から流入した人にも言えるので書き込みました。それだけではなく冒頭案内にある、Cocoon設定・テーマ情報タブの情報すらないで、ついでに書き込んだだけです。

冒頭案内とは以下引用の環境情報の部分です❦

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

 

 

 

最初の質問は、テストURL  https://lavinne.com/test/   2段目の画像がスマホ表示で回り込み解除が出来ないということでした。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none ;
}
}

を記述しても反映されない・・・。

これについては、優先順位問題。と書いた通りだと思われます。

あとですけど。。

テスト環境とありますが、テスト環境って本番環境と同じ状況にしないとあまり意味がない時もあるかもしれないです。ちゃんと使う場合は、きっちり本番環境と同じ状況を作ってるほうがいいですよ❦

 

 

あ、長くなりましたが、文章って難しいですね。
他のトピを見ているとき、「それは何を指しているの?」と思うことが多々あるので、結構気を付けて書き込んだつもりでしたが、誰が見ても分かる文章を心掛けないといけないと改めて思いました。

ホンこれ!状態ですよね^^;

私自身も同じ状況です。記事を書くにしても同じだったりしますけど、初心者さんが多いのでURLなしでは状況を把握できないので、返信が結構シンドイかもしれないです!?

 

あとこのトピックもですけど、前提である どのブロックを使ったかがないので、検索ユーザーさんは困るかも知れないです^^;
知ってて何今それ言ってんの?状態で、どこかしら申し訳ない気分ですが ? ? ? 


   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん、色々ありがとうございます。

今回の「スマホにて回り込み解除」の件は、!important の対応で対処することにしました。

https://lavinne.com/test/

テスト環境とありますが、テスト環境って本番環境と同じ状況にしないとあまり意味がない時もあるかもしれないです。ちゃんと使う場合は、きっちり本番環境と同じ状況を作ってるほうがいいですよ❦

テスト環境というわけではないのですが、依頼を受けてHP作成中のものでしたので、URLを公開できずに別URLで問題点を示したものでした。
なので、環境は同じにしてあります。

と言いながらも、うっかりミスで環境が違うことになっている場合もあるかもしれないので、今後注意しておきます<(_ _)>

今回、回り込み解除の件は解決しましたが、画像を小さくすると画像の右側に余白が出てしまうけんについては別トピで質問させて頂きます。

色々とご助言ありがとうございました!!


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

画像ブロックの回り込みに関しては、スマホ画面では回り込みは解除した方が見やすいと思うので、親テーマでも適用しておこうと思います(480px以下の画面)。
以下が実装したファイルです。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


   
共有:

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

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

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

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

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

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

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

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