サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年7月19日 02:01
いつもお世話になっております。
記事内の2カラムの幅指定について教えていただければと思います。
記事内で商品説明を入れたいと思い、cocoonに実装されている2カラムを使ってみようと思ったのですが、商品説明が長くなる場合（画像の下に説明文【A】）、レイアウト的にスマートじゃなくなるのでカラム左に商品画像、右カラムに説明文のようにしたいと思いました【B】。
左カラムに置く画像を少し小さくして、右カラムの文章をガッツリ入れたいと思ったのですが、（2カラムを使用した場合）画像を小さくすると説明文との間に空白が入ってしまいます。
左右が均等のサイズになるようになっているからだと思うのですが、左右の幅サイズをそれぞれ指定する方法ってありますか？
また、現状のデフォルテの指定だと、スマホ表示にしたとき（左カラムに画像、右に説明文にしたとき）に画像と下に来る説明文の間がかなり空いてしまいます【C】。
作りたいのはPC表示で【D】のように、SPでは【E】のようにしたいと思っています。
デフォルテの2カラムにCSS追加で出来るでしょうか？
紹介するお店ごとに商品紹介があって、100ページ程がそれぞれに個別の画像と説明文章が入るようになるので、作業が簡単になるように2カラムタグを使いたいと思っているのですが、全く別にタグのひな型を作った方が良いのでしょうか。
とも思いながら、最新のCSSが良く分からなくて・・・。
2018年7月19日 12:11
左右の幅サイズをそれぞれ指定する方法ってありますか？
flex ショートハンドプロパティを使います。とりあえず、左側に指定したのが、下記の CSS です。右側の余白の調整もしています。
@media screen and (min-width: 768px) {
.column-left {
flex: 1 0 300px;
}
.column-right > p {
margin: 0;
}
}
Flexbox については、「日本語対応！CSS Flexboxのチートシートを作ったので配布します」で分かりやすく説明されています。
スマホ表示にしたとき（左カラムに画像、右に説明文にしたとき）に画像と下に来る説明文の間がかなり空いてしまいます
余白の調整は、下記の CSS で可能です。
@media screen and (max-width: 768px) {
.column-wrap {
padding: 1em 1.2%;
}
.column-wrap > div {
padding: 0;
}
.column-right > p {
margin: 0;
}
}
Topic starter
2018年7月19日 23:54
Akiraさん
とても丁寧に教えてくださりありがとうございます。
Flexboxについてもチンプンカンプンだったんですけど、こちらのサイトは僕でも理解できそうです。しっかり読んで検証してみたいと思います。
教えていただいたCSSについてですが、左の画像と右の文字列の頭がズレてしまいました【A】。
画像【B】は3カラムにしたときの状態です（今回は3カラムでは使わないので頭がズレる参考です）。
そこで
@media screen and (min-width: 768px) {
.column-left {
flex: 1 0 300px;
}
.column-right > p {
margin: 0;
}
}
のところに
.column-left > p {
margin: 0;
}
を追加してみたら、頭のズレが整ったようなんですが、これで大丈夫でしょうか？
＝追伸＝
Akiraさんのサイト拝見させて頂きました。僕と同じ地域にお住まいなんですね。
お写真拝見したとき、「知り合いに似ているなぁ～」ってたんですけど、他人の空似でしょうね。知り合いだったらビックリしますけど（笑）
些細な質問にお答えくださってありがとうございます。
2018年7月20日 01:07
Akiraさん
差し支えなければもう一つ質問させてください。
@media screen and (min-width: 768px) { .column-left { flex: 1 0 300px; } .column-right > p { margin: 0; } }
の
.column-left { flex: 1 0 300px;}
で「300px」の数値を値を変更するとWPでエラーのメッセージが出るのですが、これは無視しても大丈夫なのでしょうか。
もしくは300の値を変えるには「flex」の「1」「0」の値も連動して変えないといけないのでしょうか。
本来、CSSくらい自分で調べろって話だと思うのですが、調べてみても分からなかったので・・・。( ;∀;)
2018年7月20日 11:32
左の画像と右の文字列の頭がズレてしまいました
左側に画像だけではなく ＜p＞ タグもお書きになる場合には、追加された CSS で大丈夫です。もしくは、下記の CSS の削除、または変更でもいいと思います。
.column-right > p {
margin: 0;
}
「300px」の数値を値を変更するとWPでエラーのメッセージが出る
どこでどんなエラーが出ているでしょう？ WordPress の「テーマの編集」のエディターで出ている場合には、全角のスペースが入っていないでしょうか。値を変更するだけでは、エラーは出ないと思います。
WordPress のエディターは、勝手に半角スペースを全角スペースに変更するバグがあるので注意が必要です。
＝追伸＝
私のプロフィール画像は、アプリで盛っていますｗ。顔はそのままですけど、髪は黒で茶髪じゃないです。知り合いでなくとも、ラーメン屋さんでご一緒になるかも。ちなみに、 ShinShin と名島亭によく出没しとるとです。
2018年7月21日 14:21
Akiraさん
追加のアドバイスありがとうございます。
問題が解決したので、どんどん作業を進めていこうと思います＾＾
「300px」の数値を値を変更するとWPでエラーのメッセージが出るけんですが、数値だけ変えるのには問題ないとのことですので、色々調整してみたいと思います。
スペースが全角になっていないか？は確認しながらやっていきますね。
あ、名島亭・・・
行ったことありません＾＾；
でもそこの近くにある川沿いのカフェは知り合いがやっていて、何度か行きました。
従弟もその近所で「すまいる」ってカフェやっているんですけど、ちょっと遠いので（うちは春日）最近は中々行きだしません。
もしどっかのラーメン屋さんで似ている人を見かけたらお声掛けしますね（笑）
CSSのご指導、ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。