スマホでお使いのブラウザのキャッシュを削除するとどうなるでしょうか。

私の環境では、円形になっています。

私のiphoneとipadだと、四角に・・・

iOSに関係あるかも・・

もしくは、safari ?

iosでborder-radiusが効かないときは、

z-index: 1;

を指定すれば良いという記事が散見されますね。

よろしければ子テーマのstyle.cssに以下を追記して改善されるか試してみていただいてよろしいですか。

.mc-circle {
  z-index: 1;
}

わいひら様、Akira様、leafytree様、
ご返信いただきありがとうございます。

>子テーマのstyle.cssに以下を追記して改善されるか試してみていただいてよろしいですか。
追加してみたのですが、残念ながら改善されませんでした。

Cocoon・safari・Chromeのキャッシュ削除済です。

もしほかに改善できることがあれば、
教えていただけるとすごくうれしいです。

引き続き、よろしくお願いいたします。

私のサイトで試してみたら、display: table; では、iphoneでは角丸にならない様子。

inline-block や table-cell なら角丸にはなるけど、下のアイテムと離れてしまうし・・

何か良いアイデアはないかなぁ・・

.micro-balloon {
    border-collapse: separate;
}

これも試してみたけど、角丸にならないし・・

このサイトの以下のページをiphoneで閲覧しても、ちゃんと角丸になっています。

Cocoon Blocks 0.1.1公開。マイクロコピーテキスト・バルーンの実装。

こちらも、display: table; になっているんですけども・・・

でも、付与されているCSSのClassは若干違うような気もします。

うーん、でも２つの違いで、何かヒントになるでしょうか？

こんにちは。

border-color:transparent;

が入っていますね。

とりえず、ボーダーを「なし」にした方が良いです。

.mc-circle {
  border: none;
}

で角丸が出てくるかと思います。

（border-color:transparent;の記述が消せるなら、それでも可です）

@tanakama さん

早速、自分のサイトで試してみました。

でも、とりあず、あも さんの場合は角丸にできそうですね。

leafytreeさん、たなかまさま、お知恵をお貸しいただき、
本当にありがとうございます！！

無事に角丸にすることができました！

border-color:transparent;
を探すことができなかったので、

今回は
.mc-circle {
border: none;
}
の追加で解決しました。

皆さんのお力がなければ、きっと角を丸くすることはできませんでした。
本当にありがとうございました！！

詳しくは分からないのですが、

border-color:transparent;

（ボーダー色を透明に）が入っているので、線幅の指定がいるのかもしれないですね。

border:1px;

とかを足してもいけるみたいです。

@tanakama さん

あ、ほんと、1pxでもちゃんと角丸になりました。

別のクラスセレクタで、1pxが指定してあるので、考えもしませんでした。

同じdivタグに沢山のクラスセレクタが有り、それぞれに、指定が分かれていると、切り分けが難しいですね。

iOS環境ではそんな問題が…。
みなさんありがとうございます！
border-color:transparent;はCocoon側の設定のようです。
修正をしてみました（確か透明にしたのは、設定時にボーダーの幅でカクカクしないようにとかだとんで、とりあえず透明のままにしておきました）
よろしければ以下のファイルでアップデートして、問題がないか確認していただいてよろしいでしょうか。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

@yhira さん

新しいファイルでアップデートしたら、iphoneでも角丸になっているのを確認しました。

でも、私が良くわかっていないだけかもしれないのですが、borderの色だけが設定されていて、バルーンの中が白のときもあるのでしょうか？

デベロッパーツールで見たら、border: none;になっていたので、線だけのときは大丈夫なのかなと、ちょっと心配になってしまいました。

たなかま さんにご教示いただいた、

.mc-circle {
border: 1px;
}

これだと、バルーンが線だけのときに、消えてしまうみたいなんです。

気がつかなかったのですが、いままでも、線だけのバルーンのときは、iphoneでも、角丸になっていたみたいです。

cocoonを.Var2.1.3.4 に戻してみたら、気づいたんです。

また、元に戻ってしまうのですが、

以下のページだと、iphoneでも両方上手く表示されるので、何かヒントになるのではないかと思いました。

Cocoon Blocks 0.1.1公開。マイクロコピーテキスト・バルーンの実装。

わいひらさん、おはようございます。
真摯なご対応ありがとうございます！

>以下のファイルでアップデートして、問題がないか確認していただいてよろしいでしょうか。

アップロードしました！

アップロード後に

.mc-circle {
  border: none;
}

を外してみたのですが、
四角に戻ってしまい丸角になりませんでした。
（スマホはiPhoneです）

ご報告まで...

CSSの指定が複雑なので、背景色有りのバルーンのCSSを読み込まれる順番に並べ替えてみると・・

①
.micro-balloon {/*親テーマCSS3611*/
}
position: relative;
background: #fff;
//background-color: rgb(255, 255, 255);
border: 1px solid #999;
//border-top-color: rgb(153, 153, 153);
//border-right-color: rgb(153, 153, 153);
//border-bottom-color: rgb(153, 153, 153);
//border-left-color: rgb(153, 153, 153);
border-radius: 4px;
padding: 3px 12px;
display: table;
font-size: 0.8em;
}

②
.micro-balloon.has-background {/*親テーマCSS3620*/
color: #fff;
}

③
.mc-circle {
border-radius: 2em;/*親テーマCSS3698*/
}

④
.micro-balloon.has-pink-background-color {/*インラインCSS*/
background-color: #e95295;
border-color: transparent;
}

一番最後に、ボーダーを透明に指定しているんですよね。

なので・・

ブロックエディターで、背景色を指定したバルーンに、背景色と同じ色のボーダー色を設定してみると・・

上記のテスト環境は、

cocoon.Var2.1.3.4

です。

ローカル環境で試してみました。（以前のバージョン）

まずは、ブロックエディタのマイクロバルーン→ボーダー色をクリア（添付画像）にすると、確かにsafariで角丸が消えます。

これは、CSSで border-color:transparent が入るので、角丸が消えるようです。（border-colorがあると、ボーダーの線を指定しないといけないみたいです）

そのため、ボーダー色をクリア（色なし）の設定にした場合、

.micro-balloon.has-lime-background-color {

border:1px;

}

を追加する形にすれば、safariでも上手く表示できるようです。

ただし、常にborder:1px;だと不具合が起きるので、ボーダー色がクリアのときのみ、追加する必要があります。

Cocoon側のブロックエディタで、この設定は可能なのでしょうか？

@tanakama さん

ボーダーの指定でデフォルトの状態で・・

.micro-balloon {
border: 1px solid #999;
}

既に1pxになっているみたいなのですが（親テーマCSS3611行目付近）・・

マイクロバルーンのマニュアルに「ios用にボーダー色も設定してね」的な感じだと、フォーラムに質問が沢山きちゃいますかねぇ・・

@leafytree さん

 
.micro-balloon {
border: 1px solid #999;
}

↑これをボーダー色クリア時に、head内styleの

.micro-balloon.has-lime-background-color {
border:1px;
}

で打ち消すという形です。

ただこれがブロックエディタのカスタマイズで可能かは、ちょっと僕には分かりません・・・。

ちなみに

border:1px solid transparent;

は効きませんでした。

@tanakama さん

iosとMacosも？ボーダーに transparent を指定したときは、border-rafius は効かないということみたいですね。（特定の条件のときだけかも？）

border-radiusを指定する際は、iosでは、ボーダー色を設定しないといけないみたいですね。

これは、私のiphoneのFirefoxでも効かないみたいなので、safariだけでなく、osに依存しているっぽいです。

確かに、背景色有りのマイクロバルーンのときは、たなかまさんのおっしゃるように、いちいちボーダー色を設定しなくても背景色だけ設定することで角丸になれば、ユーザーの手間は省けますね。

たなかまさんが的確で有用な情報をくださったので、修正に必要な情報は、ほぼ揃ったように思います。

私だけでは、たぶんお手上げの状態でした。

ありがとうございます。

もう一つの方法としては、マイクロバルーンに背景色だけを設定したときは、ボーダー色を白（#fff）にしておくというやり方も、あるのかなと思いました。

メインカラムの背景は白で使われている場合が多いようですし、ダークテーマだと、設定するときにマイクロバルーンのボーダー色が白であることに気づきやすいような気がします。

その場合は、自分で設定し直すでしょう。

また、メインカラムの背景に淡い色を設定している場合は、1pxだと、目立たないので、そのまま使っても違和感がなければ良いのかなとも・・

ボーダー色が白でも、iphoneで角丸になるみたいなので。

あまり、良いアイデアでは、ないか・・・

手元に不具合環境がないもので、毎回お願いする形になってしまい申しわけありません。
とりあえず、micro-balloon.has-lime-background-color等にborder:1px;を追加する形にしてみました。
こちらだとどうでしょうか。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

新しいファイルをインストールして試してみました。

今度は、上手く表示されているようです。

できれば、他の方にもテストしていただけたらと思います。

たなかま さん

これは、border: 1px; を指定することで、

border-width
border-style
border-color

の３つのプロパティ―のうち、残りの２つ、つまり、

border-style
border-color

がリセットされるため、transparent の指定が上書きされる、と考えて良いのでしょうか？

border-style の初期値って、none なんですね。

border-colorの初期値は、currentcolor　。

CSS の初歩なのに、良く分っていませんでした。とほほ・・

ショートハンドだと

.micro-balloon.has-指定色-background-color {
    border: 1px;
}

個別に書くと

.micro-balloon.has-指定色-background-color {
    border-style: none;
    border-color: currentcolor;
}

となるようですね。

1pxは既に指定されているので。

最新版（バージョン：2.1.3.7）でテストしてみました。

僕の環境だと、ボーダー色あり＋背景色ありの場合のみ、線が消えていますね。

他の方はいかがでしょうか？

あ、いけない、そのパターン、消えそうですね。

戻ったら、試してみます。

やはり、背景色とボーダーの両方を設定したときに、ボーダーが消えてしまいますね。

これは、背景色を設定したときに、出力されるクラスで、

.micro-balloon.has-指定色-background-color {
border: 1px;
}

このようになるので、結果として、

border-style: none;
border-color: currentcolor;

の指定になるためと考えられます。

ボーダー色が設置されていない場合の

border-color: transparent;

の代わりに、

border-color: rgba(255,255,255,0.1);

で代用できないかと試してみたのですが、

少しでも透明にすると、iphone では、角丸になってくれないみたいです。

背景色とボーダー色の両方を設定した場合は、

border: 1px;

を適用させないようなプログラムを組むことができれば、ユーザーに手間をかけずに済むのですが、

原因がわかったので、背景色とボーダー色を両方設定してくださいと、マニュアルやフォーラムで案内することも一つの方法かなと思います。

あとは、前述したように「デフォルトでボーダー色を白にしておく」、ぐらいしかちょっと私には、今のところ、思いつかないです。

どなたか、良いアイデアは、ありませんでしょうか？

ボーダー色を白に変更してみました。
https://github.com/yhira/cocoon/commit/cfef4a3884b7f6aeb1304a0f823f93326c14c858
ダウンロードはこちら。
https://github.com/yhira/cocoon
ただ今回、「border: 1px;」は削除してみたんですけど、背景色を白にしたとしても「border: 1px;」は必要です？

早速、新しいファイルをインストールして試してみました。

結果、吹き出しの根本の下に、不要な白い部分が出来てしまったので、

以下のCSSを子テーマに追記して、テストしてみました。

.micro-balloon::after {/*親テーマ3649行目付近の修正*/
border-width: 7px 7px 0px 7px;
}

.micro-balloon::before {/*親テーマ3655行目付近の修正*/
border-width: 8px 8px 0px 8px;
}

結果、一見、上手くいっているように見えるのですが、やはり、わいひらさんも、恐らく導入時に気づいたであろう、角丸のシャギー？と言うのか、白のボーダーを付けた場合に角丸のカーブがパソコンでキレイにレンダリングされないみたいです。

テストしたブラウザは、Firefox、Chrome、IE、Edge、iphoneのsafariです。

逆に、iphoneでは、キレイに表示されます。

背景色だけを設定したとき、白のボーダーが付くカタチになるので、角丸部分がパソコンでは、なんとなく滲んだように見えてしまいます。

「border: 1px;」は削除してみたんですけど、背景色を白にしたとしても「border: 1px;」は必要です？

 

私は、cocoon.Var 2.1.3.4 の仕様でも、背景色と同色のボーダー色を設定すれば、iphoneでも、問題ないので、いいのでは、と思ってしまいますが、ダメでしょうか？（技術不足なのですぐ妥協してしまう・・ ? ）

ええい、もう、ギブアップ！ ? 

と思ったのですが、border-radius の滲みで調べていたら、アッサリ答えっぽいのが見つかりました。

Cocoonをバージョン2.1.3.4に戻して以下のCSSを子テーマに追記したら、

.mc-circle {
background-clip: padding-box;
}

iphone でも、ボーダー色に transparent が使われていても、角丸になるようです。

どなたか、iphoneユーザーの方、確認いただけると、心強いです。

上記のCSSだと、ボーダー色に背景色と同色や白などを設定したとき、Edgeでの表示が若干おかしいですが、他のブラウザは、ほぼ、キレイに表示されるように見えます。使えるといいのですが・・

.mc-circle {
background-clip: padding-box;
}

上記のCSSだけだと、濃い色の背景色を設定したときに、IEとEdgeでバルーンの本体と下の尻尾の堺に細い線が入ってしまう。

ブラウザの拡大率を変えたりすると消えたり出たりするのですが、気にすると気になるかも。

あまり使いたくないハックですが・・

@media screen and (-webkit-min-device-pixel-ratio:0) {
_::-webkit-full-page-media, _:future, :root .mc-circle {
background-clip: padding-box;
}
}

safari 用のハックらしいです。

safari 用となっているみたいだけど、iphone の Firefoxでも角丸になるようです。

逆に、

background-clip: padding-box;

を標準にしておいて、

IEとEdgeだけ、のハックで、初期値である、

background-clip: border-box;

に戻すという手もあるかも。

いずれにしても、最後はハックか・・とほほ・・

参考にさせていただいたサイト

ブラウザやOSごとにCSSを適応させるCSSハックいろいろ

返信が遅くなって申し訳ないです。

border: 1px;をなしにして、
leafytreeさんの

.mc-circle {
background-clip: padding-box;
}

を入れると、safariで上手く表示できました。（添付画像）
Edgeだと綺麗に表示されないんですね・・・。

ーーーーー▼ 別の方法ーーーーー

ボーダー色や背景色の設定に関わらず

.micro-balloon.has-lime-background-color {
border:1px solid;
}

を追加する形でもいけそうです。
これだとボーダー色が透明でも、ボーダー色があっても、角丸と罫線が両立できそうです。

そうなんですね！

セレクタを変えてのテストは、ローカル環境じゃないと、とてもやりにくいんですよね。 ? 

理論的にも、たなかまさんのCSSだと、border-color だけをcrrentcolor に初期化するってことになるはずですよね。（ショートハンドの書き方なので）

でも、理屈的には、実際に使用されるボーダー色の指定より先に読み込まれる必要があるような気もするのですが、

.micro-balloon.has-lime-background-color {
border:1px solid;
border-color: 実際に設定する色；
}

こんな順番で・・

頭の中で考えただけなので、実際のところは良くわからないのですが・・

私が勘違いしているのかもしれません。

@leafytree さん

ありがとうございます。

でも、理屈的には、実際に使用されるボーダー色の指定より先に読み込まれる必要があるような気もするのですが、

僕の環境だと、添付画像のように、後から設定しても大丈夫のようです。

やはり、

border:1px solid;

の指定は、既に

border-width: 1px;
border-style: solid;
border-color: transparent;

となっている状態を

border-color: crrentcolor;

で、色だけ初期値に上書きするのと同じような気がします。

ショートハンドで書いてしまうと、何の値を上書きしているのか、わかりにくくなるような気がします。

僕の環境だと、添付画像のように、後から設定しても大丈夫のようです。

そうなんですね。

私もちょっと、やってみます。

ショートハンドで書いてしまうと、何の値を上書きしているのか、わかりにくくなるような気がします。

たしかに、その通りですね。

border-widthを使ったことがなかったので思いつきませんでした！

Windows環境だと、デベロッパーツールで、iphoneの状態を見ることができないので、Windows環境の表示をデベロッパーツールでテストしてみました。

私の勘違いで、背景色とボーダー色の両方を設定したときは、ボーダー色だけの指定のCSSが同じインラインでも背景色より後に読み込まれているので、大丈夫みたいです。すみません。

ただ、背景色だけの場合も、

border: 1px solid;

を設定しないと、iphone で角丸にならないのかと思いますが、

そうすると、Windows環境で、角丸の部分が滲んでしまうみたいです。

あまり、使いたくないCSSハックですが、サイトの基幹部分ではないので、こういった場合は、使ってもいいのではと思いますが、どうでしょう？（いつまで使えるかは、わかりませんが・・）

/*iosとmacosでマイクロバルーンの角丸が適用されないのに対応*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
_::-webkit-full-page-media, _:future, :root .mc-circle {
background-clip: padding-box;
}
}

あまり、良く検証していないので、iphone ユーザーの方に、試していただけると、ありがたいです。

他にもっと良い方法があれば、話は別です。

投稿者:: @leafytree

上記のCSSだけだと、濃い色の背景色を設定したときに、IEとEdgeでバルーンの本体と下の尻尾の堺に細い線が入ってしまう。

僕の環境（IE11）でデフォルトのズームサイズだと問題なく表示されるようです。

逆にズームサイズを変更（IE：175％）すると、background-clip: padding-box;があろうがなかろうが、線が入るようです。
なので元々あった問題なのかも。