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

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

モバイルでランドスケープ表示時、カラム...
 
共有:
通知
すべてクリア

[解決済] モバイルでランドスケープ表示時、カラム幅が意図どおりに表示されない。

17 投稿
4 ユーザー
4 Likes
466 表示
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

対象のページのURL: https://nafokof.net/works/2021-01/

相談内容:
メインカラム内で、一部2カラム ・3カラムのブロックを使っている箇所が、モバイルのランドスケープ表示時に一律で50%/50%のカラム表示になってしまい、意図どおりの幅で表示できません。どうしたらよいでしょうか。
※PCでの表示画面(=意図どおり)と、モバイル/ランドスケープでの表示画面のスクショを添付します。

解決のために試したこと:
カラム幅をいろいろ調整してみました。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 

これ、左側のカラムは空になっていて何も入っていないように見えるんですけど。
添付画像はエリアのエディター画面全体のスクリーンショットはどのようになっているのでしょうか。
※出来ればzipは使用せずに画像状態で貼り付けていただければ幸いです。


   
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

わいひらさん

ありがとうございます!

添付はこれでよいでしょうか。

マゼンタとシアンの文字のほうの例では、左側のカラムは何も入っていません。文字列を左側を少し空けて表示させたいため、幅15%で左側のカラムを設定しています。(添付画像ごらんください)

でもモバイルのランドスケープでは50%で表示されてしまい、もっと左に置きたい文字列が右端に寄って表示されたり(=マゼンタとシアンの文字の例)、カラム幅73%で設定しているカラムの文字が50%で折り返されたり(=スミ文字の例)してしまう、という状況です。

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 

コードではなくビジュアルエディターの方です。
それともカラムの中に、コードで貼り付けているのでしょうか。
ただいずれにせよ、カラムをスペース空けのために利用するべきではないように思います。
ブロックの設定から「高度な設定」を選択し、「追加CSS」を設定しそれに対して余白があるCSSを当てるべきかと思います。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 

スタイル変更用のCSSはカスタムCSSに書きます。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 

あと、冒頭の説明自体がいまいちよくわかっていません。
現在僕の環境でモバイルで色文字部分を表示させると添付画像のような表示になっているのですが、これをどのようにするのでしょうか。


   
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

わいひらさん ありがとうございます。

見てくださっているスマホの画面は縦位置だと思いますが、スマホを横にしたときの、横長の画面でうまく表示できない(文字列が右に寄ってしまう)のです。

添付が、私のスマホを横にしたときのショットです。

いずれにせよ、カラムではなく追加CSSで、ということですね。paddingの設定でしょうか。


   
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

ビジュアルエディターの画面も添付します。

ただ、これだと全文字列が左寄せに見えていますが、コードで偶数列を右寄せに設定し、スペーサーを1つ置いた次のブロックで、センター揃えにしています↓

<p class="magenta font-gothic">毎夜 枕もとにノートとペンを置いて</p>
<p class="has-text-align-right cyan"><em>わかるということが わからない</em></p>
<p class="magenta font-gothic">見た夢を書きとめていた</p>
<p class="has-text-align-right cyan"><em>自分のことばという事態が つかめない</em></p>
<p class="magenta font-gothic">はじめて ひらいてみる</p>
<p class="has-text-align-right cyan"><em>ことばは異物であるはずだから</em></p>
<p class="magenta font-gothic">なにも 思い出せない 書いたということすらも</p>
<p class="has-text-align-right cyan"><em>わたしから ひきはがす なるべく 遠くへ</em></p>
<p class="magenta font-gothic">これは誰か ほかの人の記憶ではないのか</p>
<p class="has-text-align-right cyan"><em>わたしから わたしを ひきはがす</em></p>

 

<p class="purple font-gothic wide-line-height has-text-align-center">25の夢ノート もういちど 記憶する<br>からだを通過させる<br>目を閉じて 読めない文字で 書いていく</p>


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

前略、nafokof さん

私は自分のサイトでは2カラムは1度も使ったことがないのですが、フォーラムに回答する折に何度か使って試してみたりしたことがあります。

 

PC表示のときは、左右の比率が設定できる?ようですが、どうも画面幅が600pxから781pxの画面幅のときは、50対50になる仕様になっているようです。

 

同じ比率を保つには、自前でCSSでデザインする必要があるかもしれません。

 

This post was modified 2年前 2回 by リフィトリー

   
わいひら reacted
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

わいひらさん ありがとうございます。

そうなのですね。

送ってくださったスタイル設定を手がかりに、CSSの書き方について調べてやってみます。

またフォーラムで質問させていただくかもしれませんが、どうぞよろしくお願いいたします。

ありがとうございました。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 
投稿者:: @leafytree

PC表示のときは、左右の比率が設定できる?ようですが、どうも画面幅が600pxから781pxの画面幅のときは、50対50になる仕様になっているようです。

なるほど。幅指定があったんですね。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 

送ってくださったスタイル設定を手がかりに、CSSの書き方について調べてやってみます。

とりあえず、左に余白を持たせるためにカラムブロックを使用するべきではないと思います。
なので、大まかにやり方を書くと

  1. カラムを排除して普通に段落ブロックで文章を書く
  2. 左余白を持たせたい文章をグループブロックで囲む
  3. グレープブロックの「追加CSS クラス」に「.left-margin」とでも書く
  4. 「カスタムCSS」に以下のように書いて保存する
.left-margin{
  margin-left: 50px;
}

数値や、クラス名などは好みに合わせて変更してください。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14155
 

ただこの方法だと、スマホで必ず左余白が入ります。
スマホでそれを除去したい場合は、メディアクエリつきのCSSも書く必要があると思います。


   
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

リフィトリーさま

すみません!投稿者のお名前を確認せずに、先の投稿をしておりました。たいへん失礼いたしました。

改めて、原因の所在についてご指摘をありがとうございます! 助かりました。

 

わいひらさま

具体的な方法について教えてくださって、ありがとうございます。やってみます。

うまくできたらこちらからご報告します。

 

htmlやCSSについて体系的な知識のないまま、切り貼りでウェブサイト構築に挑戦しています。

こまかな点を具体的に教えていただけて、とても有難いです。

 


   
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

わいひらさま リフィトリーさま

先日はご教示ありがとうございました!

わいひらさんの教えて下さった方法でやってみたのですが、うまく余白が設定できません。
https://nafokof.net/works/2021-01/
↑マゼンタとシアンの色文字の箇所が、左に余白をつくりたい箇所です。

カスタマイズ>追加CSSに

.left-margin {
margin-left: 50px;
}

と記述し、左に余白を開けたい箇所をカラムではなく段落に変更し、グループブロックにして、追加CSSに「.left-margin」と記述しています。(添付ごらんください)

(600px〜781pxのモバイル画面での50%/50%表示は、確かに無くなりました)

この箇所はこの形でもまあよいか、と思いますが、ほかにも余白をつくるためにカラムを使用している箇所がかなりあるので、なんとかカラムをやめて、marginで余白をつくれるようにしたいです。

お手数をおかけしますが、お時間あるときに再度ご教示いただけませんでしょうか。
よろしくお願いいたします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4445
 

nafokofさん

出先でスマホからですので、簡単に。

「追加CSSクラス」の方は「left-margin」と、ピリオドなしで入力してください。

「追加CSS」の方は、ピリオドありのままで修正しなくて大丈夫です。


   
わいひら reacted
nafokof
 nafokof
(@nafokof)
Active Member
結合: 2年前
投稿: 8
Topic starter  

mk2さま

 

ありがとうございます! できました!

これだけのことだったのですね。。お恥ずかしいです。

この方法ですべて調整してみます。

お出かけ先からのご教示ありがとうございました。たいへん助かりました。

 

 


   
わいひら reacted
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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