サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
2020-04-08 20:16
なので、background-clipによる動作がIE・Edgeで変更ないのであれば、background-clip: padding-box;を使用する方法に修正しておこうと思います。
https://github.com/yhira/cocoon/commit/b0a4bb370dc73d843b6ca858c21028d21b16b5b4#diff-da232d78aa810382f2dcdceae308ff8eR3704
ダウンロードページ。
https://github.com/yhira/cocoon
たなかまさんの方法と迷ったのですが、.micro-balloon.has-lime-background-colorの優先度の方が高いので、もしかしたらボーダーの太さをカスタマイズしている人に影響が出るかもということで、background-clipの方にしました。
※ボーダーの太さをCSSで変更カスタマイズしている人も、かなり少ないとは思いますが^^;（吹き出し口の変更が面倒なので）。
もし、background-clipで問題があるようであれば、border:1px solid;を利用させていただこうと思います。
お二方とも、ありがとうございます！
2020-04-08 20:40
いや、これ、たなかま さんの助けがなれば、放り出していたかもしれません。
ありがとうございます！
それにしても、テーマを作るのって、大変ですね。
あらためて、Cocoonの凄さを痛感します。
2020-04-08 20:46
それなー（失礼！）
2020-04-08 20:56
すみません。たまに、フォーラムに画像をアップできなくなる現象があるんです。
少々、お待ちください。
Edgeの方の画像を間違えたみたいです。
再アップしますね。
わいひら reacted
2020-04-08 21:19
もう一度、ハックなしの以下のCSSを設定して
.mc-circle {
background-clip: padding-box;
}
IEで別の色のマイクロバルーンを等倍で見てみると・・
下の２つが背景色だけを設定しているものですが、あまり線は目立たないです。
設定する色や、もしかしたら、中身のアイコンの高さなども関係あるのかもしれないです。
ボーダー色に、背景色と同色を設定したものは、内側に少しスキマがあるように感じます。
でも、細かく見れば、 と言うことですが・・
わいひら reacted
2020-04-08 21:44
.mc-circle {
background-clip: padding-box;
}
を設定すると、背景色の範囲がボーダーの太さの内側までになるようなので、ボーダー色が白の場合や、border-colorの初期値である、crrentcolor の場合でも、角丸部分が滲まなくなると言う利点はあるみたいです。
この使い方は、今回、調べて初めて知りました。
わいひら reacted
2020-04-08 23:08
とりあえず、IE・Edgeだけ初期値に戻すブラウザハックを付け加えておきました（CSS削減のため、AMPでは適用しないようになっています）。
https://github.com/yhira/cocoon/commit/a6cd74815cb8eb4615e3410dac9c3a55c7e0c7ef#diff-da232d78aa810382f2dcdceae308ff8e
リフィトリー reacted
2020-04-08 23:20
わいひらさん
トピ主の あも さんへのご案内は、いかがいたしましょう？
2020-04-08 23:58
新しいファイル（バージョン：2.1.3.8）をダウンロードし、インストールして試してみました。
Chrome, Firefox, IE, Edge
iphone の safari と Firefox
ipad の safari
で、私の環境では問題なく表示されています。
また、IEとEdgeでは、
background-clipが初期値になっていることを確認しました。
修正ありがとうございます！
わいひら reacted
2020-04-09 20:32
@yhira さん
私がいろいろ書き込んでしまったので、わかりづらくなってしまいましたが、現在、あもさんは、子テーマに以下のCSSを設定なさっているようです。
.mc-circle {
z-index: 1;
}
.mc-circle {
border: none;
}
なので、どうすれば良いか、ご案内が要るかなと・・
2020-04-09 20:49
はい。そのとおりなのですが、えーと、FTPソフトの扱いに不慣れな方もいらっしゃるので、自動アップデートの時期やバージョン番号なども案内があると、わかりやすいのかなと・・
自動アップデートを利用する場合は、CSSを外すタイミングがわかりにくいかと思われますので。
2020-04-09 23:08
あも さん
わいひらさんが、テーマを修正くださったので、githabから、最新版の親テーマのファイルをダウンロードして、FTPソフトでアップロードすれば、今回、子テーマに追加した以下のCSSコードは不要となりますので、削除するようにしてください。
.mc-circle {
z-index: 1;
}
.mc-circle {
border: none;
}
FTPソフトでアップロードするやり方が良く分らないときは、次の自動アップデートまで待てば、今回の修正も含まれると思いますので、自分で何かをする必要はありませんが、それまで、上記のCSSコードは、そのままで、お待ちください。
自動アップデートの後のことになりますが、子テーマのCSSに、
.mc-circle {
border: none;
}
のコードが残ったままですと、もしあもさんが枠線のある、円形のマイクロコピーバルーンを設定しようとした場合に、枠線が表示されないことが考えられます。
ですので、自動アップデートのあとは、適当なタイミングで、今回追加したCSSのコードを削除してください。
枠線がある円形のマイクロコピーバルーンは、以下のようなものです。
2020-04-10 07:00
いけない、あもさんは、既に一度、Githabからダウンロードしてインストールしていたんですよね。
余計な書き込みをしてしまいました。
あもさん、わいひらさん、失礼しました。
固定ページ 2 / 2
前へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。