「メイド・イン・ヘブン」スキン適用中

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

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

マイクロコピーのスタイルについて
 
共有:
通知
すべてクリア

[解決済] マイクロコピーのスタイルについて

14 投稿
2 ユーザー
4 Likes
2,881 表示
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

いつもお世話になっております。

マイクロコピーについて、気になる点があります。

[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/

以上の点で、可読性が損なわれる等の問題が出ているわけではなく急ぎの案件ではないので、ご確認だけでもしていただけると幸いです。

仕様を理解出来ていない部分もあると思うので失礼がありましたら申し訳ありません。
お手数をおかけしますがよろしくお願いいたします。


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

とりあえず修正してみました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。


   
草村 reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16458
 

複数行になった場合にしっぽの位置がズレる

これに関しては、よろしければキャプチャを見せていただいてよろしいでしょうか。


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

Gutenbergではclassにmicro-topが挿入されない(クラシックエディターではmicro-top/micro-leftが出力される)

これに関しては、micro-topは、入れるべきでした。忘れていました。
ただ、Gutenbergの場合、後からクラスを変更すると「このブロックには、想定されていないか無効なコンテンツが含まれています。」と編集できなくなってしまいます…(本文表示には問題ない)。
この仕様何とかならないんだろうか…。
今のところ、micro-topを入れなくても、問題ないと思うので、このままにしておこうと思います。
それか、β版のうちに何をしておくべきか…迷います。


   
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

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

まだ最新版を試せていない状況ですが、先に「複数行になった場合ズレる」のキャプチャ画像を添付しました。
私のブログで複数行になってしまった時は最大4行になりました。(2行の長いテキストが端で折り返したためです)

一応先程のページにも極端に改行したものを追加しておきました。
https://web.monogusa-note.com/sample-page

Gutenbergの場合、後からクラスを変更すると「このブロックには、想定されていないか無効なコンテンツが含まれています。」と編集できなくなってしまいます…

Gutenbergはそのような仕様なんですね…
個人的には、本来micro-topに指定したいスタイルをmicro-balloonに指定してmicro-bottomで打ち消すという事は可能なので現状でも大丈夫かな、と思います。

少し悩ましいですがエラーが表示されるとユーザーさんを混乱させてしまうと思うのでGutenbergの仕様の対策がないと難しそうな問題ですね? 

お待たせしてしまい申し訳ないですが後ほど、最新ファイルを試したらまた書き込みさせていただきます。


   
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

すみません、訂正です。
ちょっと言葉足らずでした「複数行になった場合”しっぽが内側に”ズレる」が正しいです。


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

キャプチャありがとうございます。
ようやく意味がわかりました。
先程のリンクのGitHubに更新内容をアップしておきました。

個人的には、本来micro-topに指定したいスタイルをmicro-balloonに指定してmicro-bottomで打ち消すという事は可能なので現状でも大丈夫かな、と思います。

それでもいけると思いますが、micro-topで設定できた方が明確ですよね。失敗しました ? 


   
草村 reacted
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

ズレの件、説明が不足しておりお手数をおかけしました。

最新ファイルを適用して修正を確認しました!

.entry-content直下の場合は想定通りの表示になっていると思います。
ただ、案内ボックスの中に入れた時など少し要素同士の余白が狭いようです。
(しばらくさっきのページに置いておきます)

行間の余白が変更出来るようになった事との兼ね合いだと思うので、どこまで想定してご対応いただくかはお任せいたします。
完全対応を目指すと少し面倒そうな感じがするので…一応ご報告だけ(^^; )

この度はご対応ありがとうございました!
Gutenbergの仕様への対抗策が出てくる事も期待…


   
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

キャプチャ画像を一応置いておきます。


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

よろしければ、画像のHTMLソースコードもいただいてよろしいですか。

CSSを追記すれば、対応はできると思うのですが、AMPサイズ制限が気になるんですよね…。

なるべくサイズが増えないように書ければ対応しようと思います。


   
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

度々お手数おかけします。

ソースコードはこちらになります。
https://notepad.pw/share/2kqsovywq

スクショしたページはこちらです(画像では横並びに編集しています)
https://web.monogusa-note.com/sample-page

よろしくお願いいたします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16458
 

ソースコードありがとうございます。

なるべくCSSが増えないように修正してみました。
多分これで大体はいけるのではないかと。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。


   
草村 reacted
草村
(@kusamura_mono)
Reputable Member Registered
結合: 5年前
投稿: 174
Topic starter  

提示したブログは自己カスタマイズとの相性チェックがまだ出来ていないので、テスト環境で最新ファイルを試しました。
いい感じにボックス内でもスタイルが適用されています!

サイズ制限等気遣うべき所が多い中、細かい所までご対応いただき感謝いたします。
ありがとうございました!?


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

動作確認ありがとうございます!
問題なかったようでよかったです ? 


   
共有:

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

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

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

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

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

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

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

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