サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年2月4日 07:32
いつもお世話になっております。
マイクロコピーについて、気になる点があります。
[1]マイクロテキストについて
- 上下の余白が.entry-content>*のmarginが優先される
[2]マイクロバルーンについて
- 複数行になった場合にしっぽの位置がズレる
→ 【対策案】可能ならtop:97%;をbottom:-○px;にする等
[3]マイクロバルーンの「下寄りタイプ」について
- 色付きバルーンで吹き出しのしっぽ部分だけグレーの枠線が消えない
- 下の余白が.entry-content>*のmarginが優先される
- 上寄りタイプとネガティブマージンの値が異なる(-.7em/-.5em)
- Gutenbergではclassにmicro-topが挿入されない(クラシックエディターではmicro-top/micro-leftが出力される)
「複数行でズレる」については、長めのテキストをスマホで表示した時に複数行になった事があるのですが私のような使い方をする人は少ないかもしれません。
ただ、iPhoneで見た時一行でも少しだけ内側に食い込んでいます。
マイクロバルーンを設置したページ
https://web.monogusa-note.com/sample-page
Cocoonサイトでもこちらのページでほぼ確認できます
https://wp-cocoon.com/cocoon-blocks-0-1-1/
以上の点で、可読性が損なわれる等の問題が出ているわけではなく急ぎの案件ではないので、ご確認だけでもしていただけると幸いです。
仕様を理解出来ていない部分もあると思うので失礼がありましたら申し訳ありません。
お手数をおかけしますがよろしくお願いいたします。
2019年2月4日 20:02
とりあえず修正してみました。
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
草村 reacted
2019年2月4日 20:03
複数行になった場合にしっぽの位置がズレる
これに関しては、よろしければキャプチャを見せていただいてよろしいでしょうか。
2019年2月4日 20:09
Gutenbergではclassにmicro-topが挿入されない(クラシックエディターではmicro-top/micro-leftが出力される)
これに関しては、micro-topは、入れるべきでした。忘れていました。
ただ、Gutenbergの場合、後からクラスを変更すると「このブロックには、想定されていないか無効なコンテンツが含まれています。」と編集できなくなってしまいます…（本文表示には問題ない）。
この仕様何とかならないんだろうか…。
今のところ、micro-topを入れなくても、問題ないと思うので、このままにしておこうと思います。
それか、β版のうちに何をしておくべきか…迷います。
Topic starter
2019年2月4日 21:15
わいひらさん、修正ありがとうございます。
まだ最新版を試せていない状況ですが、先に「複数行になった場合ズレる」のキャプチャ画像を添付しました。
私のブログで複数行になってしまった時は最大４行になりました。(2行の長いテキストが端で折り返したためです)
一応先程のページにも極端に改行したものを追加しておきました。
https://web.monogusa-note.com/sample-page
Gutenbergの場合、後からクラスを変更すると「このブロックには、想定されていないか無効なコンテンツが含まれています。」と編集できなくなってしまいます…
Gutenbergはそのような仕様なんですね…
個人的には、本来micro-topに指定したいスタイルをmicro-balloonに指定してmicro-bottomで打ち消すという事は可能なので現状でも大丈夫かな、と思います。
少し悩ましいですがエラーが表示されるとユーザーさんを混乱させてしまうと思うのでGutenbergの仕様の対策がないと難しそうな問題ですね?
お待たせしてしまい申し訳ないですが後ほど、最新ファイルを試したらまた書き込みさせていただきます。
Topic starter
2019年2月4日 21:22
すみません、訂正です。
ちょっと言葉足らずでした「複数行になった場合”しっぽが内側に”ズレる」が正しいです。
2019年2月4日 22:20
キャプチャありがとうございます。
ようやく意味がわかりました。
先程のリンクのGitHubに更新内容をアップしておきました。
個人的には、本来micro-topに指定したいスタイルをmicro-balloonに指定してmicro-bottomで打ち消すという事は可能なので現状でも大丈夫かな、と思います。
それでもいけると思いますが、micro-topで設定できた方が明確ですよね。失敗しました ?
草村 reacted
Topic starter
2019年2月5日 00:11
ズレの件、説明が不足しておりお手数をおかけしました。
最新ファイルを適用して修正を確認しました！
.entry-content直下の場合は想定通りの表示になっていると思います。
ただ、案内ボックスの中に入れた時など少し要素同士の余白が狭いようです。
(しばらくさっきのページに置いておきます)
行間の余白が変更出来るようになった事との兼ね合いだと思うので、どこまで想定してご対応いただくかはお任せいたします。
完全対応を目指すと少し面倒そうな感じがするので…一応ご報告だけ(^^; )
この度はご対応ありがとうございました！
Gutenbergの仕様への対抗策が出てくる事も期待…
Topic starter
2019年2月5日 00:20
キャプチャ画像を一応置いておきます。
2019年2月5日 20:18
よろしければ、画像のHTMLソースコードもいただいてよろしいですか。
CSSを追記すれば、対応はできると思うのですが、AMPサイズ制限が気になるんですよね…。
なるべくサイズが増えないように書ければ対応しようと思います。
Topic starter
2019年2月5日 21:22
度々お手数おかけします。
ソースコードはこちらになります。
https://notepad.pw/share/2kqsovywq
スクショしたページはこちらです(画像では横並びに編集しています)
https://web.monogusa-note.com/sample-page
よろしくお願いいたします。
わいひら reacted
2019年2月6日 19:09
ソースコードありがとうございます。
なるべくCSSが増えないように修正してみました。
多分これで大体はいけるのではないかと。
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
草村 reacted
Topic starter
2019年2月7日 00:03
提示したブログは自己カスタマイズとの相性チェックがまだ出来ていないので、テスト環境で最新ファイルを試しました。
いい感じにボックス内でもスタイルが適用されています！
サイズ制限等気遣うべき所が多い中、細かい所までご対応いただき感謝いたします。
ありがとうございました！?
2019年2月7日 20:18
動作確認ありがとうございます！
問題なかったようでよかったです ?
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。