Cocoonフォーラム

ええい、もう、ギブアップ！ ? と思ったのですが、border-radius の滲みで調べていたら、アッサリ答えっぽいのが見つかりました。 Cocoonをバージョン2.1.3.4に戻して以下のCSSを子テーマに追記したら、 .mc-circle {background-clip: pa...

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

早速、新しいファイルをインストールして試してみました。 結果、吹き出しの根本の下に、不要な白い部分が出来てしまったので、 以下のCSSを子テーマに追記して、テストしてみました。 .micro-balloon::after {/*親テーマ3649行目付近の修正*/border-width:...

やはり、背景色とボーダーの両方を設定したときに、ボーダーが消えてしまいますね。 これは、背景色を設定したときに、出力されるクラスで、 .micro-balloon.has-指定色-background-color {border: 1px;} このようになるので、結果として、 bord...

あ、いけない、そのパターン、消えそうですね。 戻ったら、試してみます。

ショートハンドだと .micro-balloon.has-指定色-background-color { border: 1px;} 個別に書くと .micro-balloon.has-指定色-background-color { border-style: none; b...

border-style の初期値って、none なんですね。 border-colorの初期値は、currentcolor　。 CSS の初歩なのに、良く分っていませんでした。とほほ・・  border-2020-04-06-223531.png

今度は、上手く表示されているようです。 できれば、他の方にもテストしていただけたらと思います。 たなかま さん これは、border: 1px; を指定することで、 border-widthborder-styleborder-color の３つのプロパティ―のうち、残り...

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

もう一つの方法としては、マイクロバルーンに背景色だけを設定したときは、ボーダー色を白（#fff）にしておくというやり方も、あるのかなと思いました。 メインカラムの背景は白で使われている場合が多いようですし、ダークテーマだと、設定するときにマイクロバルーンのボーダー色が白であることに気づきやすいよ...

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

@tanakama さん ボーダーの指定でデフォルトの状態で・・ .micro-balloon {border: 1px solid #999;} 既に1pxになっているみたいなのですが（親テーマCSS3611行目付近）・・ マイクロバルーンのマニュアルに「ios用にボーダー色も設定し...

上記のテスト環境は、 cocoon.Var2.1.3.4 です。

CSSの指定が複雑なので、背景色有りのバルーンのCSSを読み込まれる順番に並べ替えてみると・・ ①.micro-balloon {/*親テーマCSS3611*/}position: relative;background: #fff;//background-color: rgb(255, 25...

また、元に戻ってしまうのですが、 以下のページだと、iphoneでも両方上手く表示されるので、何かヒントになるのではないかと思いました。 Cocoon Blocks 0.1.1公開。マイクロコピーテキスト・バルーンの実装。  b4cafc2290e7921b808033...

たなかま さんにご教示いただいた、 .mc-circle {border: 1px;} これだと、バルーンが線だけのときに、消えてしまうみたいなんです。 気がつかなかったのですが、いままでも、線だけのバルーンのときは、iphoneでも、角丸になっていたみたいです。 cocoonを.Va...

ダッシュボードで「Cocoon設定」→「フッター」タブの設定の、「フッター表示タイプ」の選択で、「ロゴ＆メニュー＆クレジット」のラジオボタンにチェックが入っていませんでしょうか？ 「メニュー＆クレジット（左右）」、もしくは、「メニュー＆クレジット（中央揃え）」を選択して「変更をまとめて保存」のボ...

@yhira さん 新しいファイルでアップデートしたら、iphoneでも角丸になっているのを確認しました。 でも、私が良くわかっていないだけかもしれないのですが、borderの色だけが設定されていて、バルーンの中が白のときもあるのでしょうか？ デベロッパーツールで見たら、border: ...

@tanakama さん あ、ほんと、1pxでもちゃんと角丸になりました。 別のクラスセレクタで、1pxが指定してあるので、考えもしませんでした。 同じdivタグに沢山のクラスセレクタが有り、それぞれに、指定が分かれていると、切り分けが難しいですね。 baloon1px-2...

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

@tanakama さん 早速、自分のサイトで試してみました。 baloon-test.png border: none; とは、全く思いつきませんでした。 ありがとうございます！ ジタバタしてたら、来てくださると思っていました。 ? ...

このサイトの以下のページをiphoneで閲覧しても、ちゃんと角丸になっています。 Cocoon Blocks 0.1.1公開。マイクロコピーテキスト・バルーンの実装。 こちらも、display: table; になっているんですけども・・・ でも、付与されているCSSのClassは若干違...

私のサイトで試してみたら、display: table; では、iphoneでは角丸にならない様子。 inline-block や table-cell なら角丸にはなるけど、下のアイテムと離れてしまうし・・ 何か良いアイデアはないかなぁ・・ 429614f960c4c5f4210c9...

iosでborder-radiusが効かないときは、 z-index: 1; を指定すれば良いという記事が散見されますね。

私のiphoneとipadだと、四角に・・・ iOSに関係あるかも・・ もしくは、safari ?

商品や人物の切り抜きをペンツール（Photoshop）でひたすら行うこと１ヶ月。 ようやく指が勝手に動くようになってきたのをうっすら覚えています。 だからと言って、さほど利得はないです。 ?

私はスマホで設定した経験がないので、難しいのか簡単なのかもわかりませんが、先ず、PC用のヘッダーメニューを設定してみることをお勧めします。 そうすると、他の事柄も理解がすすんでくるかと思われます。 ただ、パソコンが手元にないと、上手く設定されたのかどうかも確認できないですよね。 なので、...

あまり詳しくはないのですが、このフォーラムを見ていると、Cocoonの方の設定ではなく、GoogleのAdseseの方の設定で自動広告をオフにしないといけないみたいです。

ヘッダー構造の画面を見てみると ヘッダーメニュー ヘッダーモバイルメニュー ヘッダーモバイルボタン フッターメニュー フッターモバイルボタン モバイルスライドインメニュー

私はMacは持っていないのですが、確か「FileZilla」なら使えたような気がします。（他にも探せばあるかも・・） べつに、今回、無理して使う必要はないと思いますが、FTPソフトは何かトラブルがあった場合など、使えるようになっておくと便利かつ、安心です。 遊びがてら、暇なときに、ちょっと覗...

添付いただいた画像は「フッターモバイルボタン」です。このボタンは、PCで画面幅を広くしているときは、表示されないと思います。 ですので、PC用のヘッダーメニューは、あった方がいいのではないかと推測します。 Cocoonのデフォルトの「フッターモバイルボタン」の一番左のボタンはモバイルで左側か...

ああ、そうなんですね。 モバイル用のメニューはPC用とは別に作れば良かったのですね。 そうすれば、メニューの数もそれぞれに合った数にすれば見やすくなりますよね。 私は、PC用のメニューを流用するやり方を提示してしまったみたいです。 ?

@piselli85 さん ひとつお願いがあるのですが、Cocoon設定の高速化設定をONにした場合でも、正常に表示されるか確認していただけると、とてもありがたいのですが・・ もちろん、不具合があれば、すぐにOFFにしていただいてかまわないのですが・・ たぶん、わいひらさんも、そこも知り...

なるほど、原因を絞り込むのに役立ちそうな感じですね。

出先から戻ったのですが、Cocoonの高速化設定をOFFにされているのでしょうか？ もし、Cocoon設定の高速化設定をOFFにされている状態で、このソースコード感じでは、Cocoon設定以外でも高速化？の処理がなされているように見受けられます。 よくわかりませんが、例えば「Autoptim...

そうなんですね。 出先からで、すみません。 夜には、きっと、わいひらさんが、見てくださるかと思います。 高速化設定は、OFFのままの方が、よろしいかと思います。

今、出先でPCで見ることができないのですが、高速化設定の「ブラウザキャッシュ有効化」もOFFにして、キャッシュプラグインのキャッシュを消しても、変化は、ございませんでしょうか？

ダッシュボードで「外観」→「メニュー」と辿り、「編集するめニューを選択」でグローバルメニューにしているメニューを選択して、「ヘッダーモバイルメニュー」にチェックをいれて、「メニューを保存」ボタンをクリックで、表示されますでしょうか？ 89a23ef00f5055fba08cec6e8056df...

他にも、Wordpress5.4での表示がおかしいというトピックが立っています。 Cocoon設定で高速化設定をOFFにしたら、何か変化がありますか？ 以下は高速化設定をOFFにする手順です。 ca54acadc51c644861430f6e57f57bdf.png 2b...

ソレガシ さんは、子テーマをお使いですか？ テーマをカスタマイズするときは、子テーマで行います。 もしまだでしたら、子テーマの導入をオススメします。 ?

ローカルのテストサイトで、 ①Wordpress var. 5.3.2Cocoon var.2.1.3.4 //最新バージョン ②Wordpress var. 5.4Cocoon var.2.1.3.4 //最新バージョン ③Wordpress var. 5.4Cocoon var.2....

実は、私もまだ使ったことがないのですが、 案内のページがあるみたいです。 「ボックスメニュー」ウィジェットの使い方

ソースコードをコピーして、カスタマイザーに設定したCSSとCocoon設定でhead内に出力されるCSSの両方をコメントアウトしてみましたが、不具合の出たページと全く同じにはなりませんでした。（似たような見た目にはなりましたが・・） head内のCSSの全てが適用されない訳ではなさそうです。

高速化設定をOFFにする前のページを開いたままにしておいたので、OFFにした後のページとデベロッパーツールで比べてみると、カスタマイザーに独自に設定されているCSSや、Cocoon設定で出力されるCSS（全部かどうかはわかりませんが）などのインラインのCSSが適用されていないように見受けられる状態で...

@andy さん しっかり、子テーマを使われていらっしゃる様子ですし、私にはよくわかりません。 わいひらさんの対応をお待ちになられるのがよろしいかと存じます。 少なくとも、わいひらさんに対応いただいている間は、高速化はOFFにしておく方がよろしいかと思います。（場合によってはONにしてく...

新しいバージョンで、表示する項目が増えたみたいです。 画面幅を広げるか、画面右上の「表示オプション」で、表示する項目を減らすと、どうでしょうか？  1b6a59d803d5e5c60a2b03494038384a.png

できましたら、Cocoon設定で高速化設定を無効にしていただけますと、ソースコードが見やすくなります。 また、差し支えなければ、環境情報をご提示いだだければ尚、助かります。 以下は高速化設定をOFFにする手順です。 ca54acadc51c644861430f6e57f57bd...

PC表示のときの背景色と同じ色で良ければ、 @media screen and (max-width:834px) {main.main,div.sidebar {margin: 10px;}} これで、イケそうな気がするのですが・・ 実際には試してないのですが・・

×　現在は、サイドバーのデフォルトの左右のマージンがそれぞれ10pxから19pxに変わっている。 〇　現在は、サイドバーのデフォルトの左右の余白（padding）がそれぞれ10pxから19pxに変わっている。 間違えました。

みるみさん いつもお世話になっております。 サーチコンソールでエラーが出ると、なんだか気になってしまいますよね。 ネットで検索すると、モバイルで横スライドさせるグローバルメニューも、ひっかかったという記事もありました。 でも、それよりも気になったのは、実際に該当ページをスマホで閲覧し...