サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年9月5日 01:09
画像のように、左に画像、右に文字を打てるようにブロック分けをしたいと思っています。
一応画像投稿をして、画像を左寄せにして、右側にテキストを打って似たような感じには出来ました。
しかし画像よりもテキストが下の位置になると、テキストが画像の下に来てしまいます。
画像下になっても、テキストが右側に来るためには、ブロック分けが必要なのかなと考えましたがその方法がわかりません。
解説お願いします。
Topic starter
2019年9月5日 01:10
このようになってしまいます。
2019年9月5日 13:16
Gutenbergで編集されているということでよろしいでしょうか？
WordPress公式のカラムブロック、またはCocoonのカラムブロック
https://wp-cocoon.com/cocoon-blocks-response-status/#toc52
を使用することで左右に切り分けることができます。
わいひら reacted
2019年9月5日 14:01
https://html-coding.co.jp/knowhow/tips/000216/
CSSの編集です。
これでいけると、思います。
#main .entry-content p {
overflow: hidden;
}
2019年9月5日 14:37
修正版です。
<p class="title">
（省略）
</p>
文字のp要素にクラスを追加します。
そして、CSSを以下のように編集します。
#main .entry-content p.title {
overflow:hidden;
}
CSSだけで実装できないか考えてみましたが、文字を囲っているp要素の位置が
３、７、１１、１６、２０……
と不規則に出てきて、nth-of-typeで倍数が取れないため、この形を取りました。
添付画像で、緑マーカーを引いているところが、文字を囲っているp要素です。
2019年9月5日 16:24
わざわざスタイルを調整するような面倒なことはしなくても、旧エディタにもCocoonのカラムレイアウトがありますよ。
https://wp-cocoon.com/column-layout/
ブロックの話をしているので、ブロックエディタの方かと思いました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。