サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年5月21日 18:26
対象のページのURL： https://nafokof.net/works/2021-01/
相談内容：
メインカラム内で、一部2カラム ・3カラムのブロックを使っている箇所が、モバイルのランドスケープ表示時に一律で50%/50%のカラム表示になってしまい、意図どおりの幅で表示できません。どうしたらよいでしょうか。
※PCでの表示画面（＝意図どおり）と、モバイル／ランドスケープでの表示画面のスクショを添付します。
解決のために試したこと：
カラム幅をいろいろ調整してみました。
2021年5月21日 19:46
これ、左側のカラムは空になっていて何も入っていないように見えるんですけど。
添付画像はエリアのエディター画面全体のスクリーンショットはどのようになっているのでしょうか。
※出来ればzipは使用せずに画像状態で貼り付けていただければ幸いです。
Topic starter
2021年5月21日 20:00
わいひらさん
ありがとうございます！
添付はこれでよいでしょうか。
マゼンタとシアンの文字のほうの例では、左側のカラムは何も入っていません。文字列を左側を少し空けて表示させたいため、幅15％で左側のカラムを設定しています。（添付画像ごらんください）
でもモバイルのランドスケープでは50％で表示されてしまい、もっと左に置きたい文字列が右端に寄って表示されたり（＝マゼンタとシアンの文字の例）、カラム幅73％で設定しているカラムの文字が50％で折り返されたり（＝スミ文字の例）してしまう、という状況です。
2021年5月21日 21:01
コードではなくビジュアルエディターの方です。
それともカラムの中に、コードで貼り付けているのでしょうか。
ただいずれにせよ、カラムをスペース空けのために利用するべきではないように思います。
ブロックの設定から「高度な設定」を選択し、「追加CSS」を設定しそれに対して余白があるCSSを当てるべきかと思います。
2021年5月21日 21:02
スタイル変更用のCSSはカスタムCSSに書きます。
2021年5月21日 21:02
あと、冒頭の説明自体がいまいちよくわかっていません。
現在僕の環境でモバイルで色文字部分を表示させると添付画像のような表示になっているのですが、これをどのようにするのでしょうか。
Topic starter
2021年5月21日 21:29
わいひらさん ありがとうございます。
見てくださっているスマホの画面は縦位置だと思いますが、スマホを横にしたときの、横長の画面でうまく表示できない（文字列が右に寄ってしまう）のです。
添付が、私のスマホを横にしたときのショットです。
いずれにせよ、カラムではなく追加CSSで、ということですね。paddingの設定でしょうか。
Topic starter
2021年5月21日 21:32
ビジュアルエディターの画面も添付します。
ただ、これだと全文字列が左寄せに見えていますが、コードで偶数列を右寄せに設定し、スペーサーを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>
Topic starter
2021年5月21日 22:20
わいひらさん ありがとうございます。
そうなのですね。
送ってくださったスタイル設定を手がかりに、CSSの書き方について調べてやってみます。
またフォーラムで質問させていただくかもしれませんが、どうぞよろしくお願いいたします。
ありがとうございました。
リフィトリー reacted
2021年5月22日 00:18
PC表示のときは、左右の比率が設定できる？ようですが、どうも画面幅が600pxから781pxの画面幅のときは、50対50になる仕様になっているようです。
なるほど。幅指定があったんですね。
2021年5月22日 00:20
送ってくださったスタイル設定を手がかりに、CSSの書き方について調べてやってみます。
とりあえず、左に余白を持たせるためにカラムブロックを使用するべきではないと思います。
なので、大まかにやり方を書くと
- カラムを排除して普通に段落ブロックで文章を書く
- 左余白を持たせたい文章をグループブロックで囲む
- グレープブロックの「追加CSS クラス」に「.left-margin」とでも書く
- 「カスタムCSS」に以下のように書いて保存する
.left-margin{
margin-left: 50px;
}
数値や、クラス名などは好みに合わせて変更してください。
2021年5月22日 00:22
ただこの方法だと、スマホで必ず左余白が入ります。
スマホでそれを除去したい場合は、メディアクエリつきのCSSも書く必要があると思います。
Topic starter
2021年5月22日 11:19
リフィトリーさま
すみません！投稿者のお名前を確認せずに、先の投稿をしておりました。たいへん失礼いたしました。
改めて、原因の所在についてご指摘をありがとうございます！ 助かりました。
わいひらさま
具体的な方法について教えてくださって、ありがとうございます。やってみます。
うまくできたらこちらからご報告します。
htmlやCSSについて体系的な知識のないまま、切り貼りでウェブサイト構築に挑戦しています。
こまかな点を具体的に教えていただけて、とても有難いです。
Topic starter
2021年6月15日 10:52
わいひらさま リフィトリーさま
先日はご教示ありがとうございました！
わいひらさんの教えて下さった方法でやってみたのですが、うまく余白が設定できません。
https://nafokof.net/works/2021-01/
↑マゼンタとシアンの色文字の箇所が、左に余白をつくりたい箇所です。
カスタマイズ＞追加CSSに
.left-margin {
margin-left: 50px;
}
と記述し、左に余白を開けたい箇所をカラムではなく段落に変更し、グループブロックにして、追加CSSに「.left-margin」と記述しています。（添付ごらんください）
（600px〜781pxのモバイル画面での50%／50%表示は、確かに無くなりました）
この箇所はこの形でもまあよいか、と思いますが、ほかにも余白をつくるためにカラムを使用している箇所がかなりあるので、なんとかカラムをやめて、marginで余白をつくれるようにしたいです。
お手数をおかけしますが、お時間あるときに再度ご教示いただけませんでしょうか。
よろしくお願いいたします。
2021年6月15日 11:32
nafokofさん
出先でスマホからですので、簡単に。
「追加CSSクラス」の方は「left-margin」と、ピリオドなしで入力してください。
「追加CSS」の方は、ピリオドありのままで修正しなくて大丈夫です。
わいひら reacted
Topic starter
2021年6月15日 11:43
mk2さま
ありがとうございます！ できました！
これだけのことだったのですね。。お恥ずかしいです。
この方法ですべて調整してみます。
お出かけ先からのご教示ありがとうございました。たいへん助かりました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。