Cocoonフォーラム

Windows10のスクショは、Windows＋shift+Sで、ドラックすると、「切り取り領域が保存されました」と右下に表示されるので、それをクリックします。 すると、「切り取り＆スケッチ」の画面が表示されるので、フロッピディスクマークの保存ボタンをクリックして、デスクトップなどに保存します。...

無料のフォーラムを使って、善意の方々に完成するまでわからないことについて、ひとつづつ、アドバイスをいただくと、とても素敵な商用サイトが出来あがるでしょうね。

私は、最近、Youtube で プログラミングのレクチャー動画を検索して見ています。 「html入門」等のキーワードで検索すると、多くの有用な動画がヒットします。 しかも、これ、なんと、全部無料です！！ これを利用しないという選択肢はナイヤロ。 ありがたや、ありがたや・・・

YUENYUEN さん せっかく、初めてトピックを立てていただいたのに、否定的なコメントになってしまい、ごめんなさい。 目的は、ひと様々ですが、何かを作ろうという気持ちは、私も、とても大切だと思います。 みるみさんのおっしゃるように、もし可能であれば、URLをご提示いただければと思います...

みるみ さん カテゴリーページでは、人気記事ウィジェットの見出しが表示されていないので、もしかしたら、人気ウィジェットの設定で非表示にチェックがはいっているかもしれませんね。

YUENYUEN さん はじめまして。 もちろん、破線にすることは、できるかと思います。 しかし、あれもこれも、となってくると、この先に暗雲が立ち込めてきます。 カスタマイズには、ある程度のWeb制作の知識が必要です。 例え、今回の３つの質問が達成できたとしても、また次で、つまづいて...

私は、ブロックエディターは、どうも苦手なので、ほどんど使っていないのですが、vaio さんが該当箇所にお使いになっているブロックは「表」という種類のブロックのようです。 「表」というブロックは、おそらく、エクセルのような表を作るときに使うものではないかと推測します。 「表」のブロックを使うと...

@イファ さん 今、私のテスト環境で、イファさんと同じサイズのヘッダー画像を横幅いっぱいになるように設定してみたのですが、やはり、画像の縦幅がありすぎて、サイトを開いたときに、画面のほとんどをヘッダー画像が占めてしまうので、後の方に書いた案は、良くないみたいです。 PCのヘッダーメニューにつ...

イファ さんのサイトだと、横幅いっぱいにヘッダー画像が表示された方が恰好いいのかもしれないと思いました。 以下の過去のトピックが参考になりそうです。 [解決済] ヘッダー画像をフルサイズで表示したい。 ただし、ヘッダー画像は、背景画像ではなく、ヘッダーロゴ画像で設定する必要がありそうです...

先ほど、ヘッダーの高さを設定してみては、と、書き込みましたが、それだと、高さが固定されてしまうようなので、別の方法を考えないといけないようです。 ちょっと、小用で出かけるので、わかる方、いらっしゃいましたら、よろしくお願いいたします。 Cocoonのヘッダー画像の設定は、少し難しいのを忘れて...

PC表示のメニューですが、ダッシュボードで「外観」→「メニュー」とたどり、「メニュー設定」のところで、ヘッダーメニューに設定したいメニューで「ヘッダーメニュー」のところにチェックが入っていますでしょうか？ 「ヘッダーメニュー」と「ヘッダーモバイルメニュー」を共通で設定されていたのか、または、それ...

@イファ さん たぶん、ヘッダーのデザインを変えていたら、よくわからなくなってしまった、ということのようですね。 とりあえず、PCで、ヘッダーの背景画像が大きく表示されるように、ヘッダーの高さを設定してみるのはいかがでしょうか？ Cocoon設定の「ヘッダー」タブの「高さ」というところに...

私に原因がわからなくても、きっと、どなたか、アドバイスをくださるかと思います。

イファ さん とりあえず、Cocoonの高速化設定をOFFにしましょう。 状況がわかりにくいので。 ca54acadc51c644861430f6e57f57bdf.png 2b11197a3df81106de50f39943bc641c.png  5e32235e...

CSSの適用範囲を限定するのに良く使われる方法は、子孫セレクタです。 その要素が入っているコンテナを親に見立てると、 親 半角空き 本人{スタイル} で親の中だけに限定します。また、親の親のコンテナ、つまり、爺さん（婆さん）でも使えます。 じいさん 半角空き 本人{スタイル} で...

simplicity2 より Cocoonの方が機能が豊富なので・・ アイコンリストこんなのあるみたいです。 拘りもあろうかと思いますので、案内がご希望と離れてれていたらごめんなさい。

ひとつのカスタマイズでも、そのサイトに合った方法を調べるのには、労力がかかります。 他の方が、ご教示くださるかもしれませんが、私は以下のリンクを貼らせていだだきます。 Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】

いけない、あもさんは、既に一度、Githabからダウンロードしてインストールしていたんですよね。 余計な書き込みをしてしまいました。 あもさん、わいひらさん、失礼しました。

あも さん わいひらさんが、テーマを修正くださったので、githabから、最新版の親テーマのファイルをダウンロードして、FTPソフトでアップロードすれば、今回、子テーマに追加した以下のCSSコードは不要となりますので、削除するようにしてください。 .mc-circle {z-index: 1...

はい。そのとおりなのですが、えーと、FTPソフトの扱いに不慣れな方もいらっしゃるので、自動アップデートの時期やバージョン番号なども案内があると、わかりやすいのかなと・・ 自動アップデートを利用する場合は、CSSを外すタイミングがわかりにくいかと思われますので。

@yhira さん 私がいろいろ書き込んでしまったので、わかりづらくなってしまいましたが、現在、あもさんは、子テーマに以下のCSSを設定なさっているようです。 .mc-circle {z-index: 1;}.mc-circle {border: none;} なので、どうすれば良いか、ご...

新しいファイル（バージョン：2.1.3.8）をダウンロードし、インストールして試してみました。 Chrome, Firefox, IE, Edgeiphone の safari と Firefoxipad の safari で、私の環境では問題なく表示されています。 また、IEとEdge...

わいひらさん トピ主の あも さんへのご案内は、いかがいたしましょう？

.mc-circle {background-clip: padding-box;} を設定すると、背景色の範囲がボーダーの太さの内側までになるようなので、ボーダー色が白の場合や、border-colorの初期値である、crrentcolor の場合でも、角丸部分が滲まなくなると言う利点はあるみ...

もう一度、ハックなしの以下のCSSを設定して .mc-circle {background-clip: padding-box;} IEで別の色のマイクロバルーンを等倍で見てみると・・ f7bc123159551eccb15040b1b14d931d.png 下の２つが背景色...

Edgeの画像 ba4db14a549c3f6888c3964a7dc372ae.png こう見ると、ハックが欲しくなるんですよね。

すみません。たまに、フォーラムに画像をアップできなくなる現象があるんです。 少々、お待ちください。 3b8c6eeb442f9b8d1e7e555563aee97a.png Edgeの方の画像を間違えたみたいです。 再アップしますね。

それなー（失礼！）

いや、これ、たなかま さんの助けがなれば、放り出していたかもしれません。 ありがとうございます！ それにしても、テーマを作るのって、大変ですね。 あらためて、Cocoonの凄さを痛感します。

細い線が入ると言っても、あまり目立つものではないんですが・・ 気にしなければ、ハックなしでもいいのか、どうなのか・・ IE11-2020-04-08-203120.png  Edge-2020-04-08-202331.png

あまり、使いたくないCSSハックですが、サイトの基幹部分ではないので、こういった場合は、使ってもいいのではと思いますが、どうでしょう？（いつまで使えるかは、わかりませんが・・） /*iosとmacosでマイクロバルーンの角丸が適用されないのに対応*/@media screen and (-web...

Windows環境だと、デベロッパーツールで、iphoneの状態を見ることができないので、Windows環境の表示をデベロッパーツールでテストしてみました。 私の勘違いで、背景色とボーダー色の両方を設定したときは、ボーダー色だけの指定のCSSが同じインラインでも背景色より後に読み込まれているので...

僕の環境だと、添付画像のように、後から設定しても大丈夫のようです。 そうなんですね。 私もちょっと、やってみます。

やはり、 border:1px solid; の指定は、既に border-width: 1px;border-style: solid;border-color: transparent; となっている状態を border-color: crrentcolor; で、色だけ初期値...

そうなんですね！ セレクタを変えてのテストは、ローカル環境じゃないと、とてもやりにくいんですよね。 ? 理論的にも、たなかまさんのCSSだと、border-color だけをcrrentcolor に初期化するってことになるはずですよね。（ショートハンドの書き方なので） でも、理屈的に...

.mc-circle {background-clip: padding-box;} 上記のCSSだけだと、濃い色の背景色を設定したときに、IEとEdgeでバルーンの本体と下の尻尾の堺に細い線が入ってしまう。 ブラウザの拡大率を変えたりすると消えたり出たりするのですが、気にすると気になるかも。...

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

ええい、もう、ギブアップ！ ? と思ったのですが、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 です。