Cocoonフォーラム

※ ipadでもMacでも、表示を確認するときは、都度、スーバーリロードや、キャッシュのクリアを行わないと、残っているキャッシュの影響を受けたままになってしまう可能性があります。

より具体的には、実際のサイトを調べないと、推測、推理 だけになってしまうので、時間を浪費してしまいます。  3b1534797f95d48d29b3710ea5689244.png

@初心者 さん URLをご提示いただいていないので、推測するしかありませんが、つい先ほども別のトピックにに書いたのですが、CSSの編集には文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことのできるテキストエディタをお使いになることをオススメします。

前略、momo さん 私もブロックエディターは上手く活用できていないんですけど、「カスタムHTML」ブロックを再利用ブロックに登録する、というのはどうでしょう？ ブロックの名前も任意で設定できるみたいですし・・ 51db477b4c55b9d4797ad1664b7c1...

@co781228 前川さん 他の箇所にもあるかと思ったのですが、私の勘違いのようです。 先に画像を貼り付けた１箇所だけのようです。

@co781228 前川さん Windows環境でしたら Mery というテキストエディタがシンプルで使いやすいです。 テキストエディター「Mery」 Meryの設定方法は、以下のトピックに書いたことがあります。 Mery 設定方法 Mac環境でしたら、「...

@co781228 前川さん どうやら、CSSのコードの編集の際に、適切な設定のテキストエディタをお使いになっていらっしゃらないようです。 余分な見えない文字が入ってしまっています。 余分な文字は、子テーマのCSSの他の箇所にも含まれてしまっているようです。 ...

@co781228 前川さん サイドバーの幅を伸縮しないようにしたつもりでしたが、上手くいっていないようです。 ちょっと調べてみます。

@初心者 さん 私のテスト環境（Windows10 Firefox Cocoon親テーマバージョン：2.2.4.5）では、色の変更は自由に出来てしまうようです。 環境情報を拝見しますと、Cocoonのバージョンも同じようですし、原因と思えるようなものは、ないような気もします。（ipa...

@co781228 前川さん 私もあまり詳しくはないのですが、以下のコードを書いてみました。 .wrap { width: 100%;}.main { flex: 1;}.sidebar { width: 400px;/*お好みの幅で*/}.main,.sidebar { ...

@初心者 さん どこかに ご自身で区切の線に適用されるCSSのコードを書いている、ということがあったりしませんか？ その辺りはURLをご提示いただくのが、早道なのですが・・

@初心者 さん 私のテスト環境では、デフォルトの線の色は自由に変えることができています。 環境情報を貼っていただくことは可能でしょうか？（公開したくない部分があれば削除して・・）

@初心者 さん 色を変更して都度、「更新」ボタンをクリックしていらしゃいますか？  c51f0e5b080e796173a38d653bd9a8f4.gif

@初心者 さん 環境情報をと書いたのは、現在お使いのCocoonのバージョンやその他の環境が影響していないか確認したかったためです。

@初心者 さん 例えば、デフォルトの区切りブロックを選択して、右下の「高度な設定」に Kugiri-sen 等の任意のクラス名を設定して、下の方にあるカスタムCSSの欄に、 .wp-block-separator.kugiri-sen { border-wi...

@初心者 さん お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けていただければと思います。 お差し支えがあれば、環境情報のURL等の公開したくない部分を削除して、貼り付けられますでしょうか？

@初心者 さん 私のテスト環境では、デフォルトの線の色は、普通に変えることができています。 区切ブロックを選択して、色を選んでいるだけなんですが・・

前略、@Tsuyoshi さん 「GoogleMap」や 通常のアフィリエイトのタグなどは、「カスタムHTML」ブロックに貼り付ければよいのではないかという気がします。 Amazonアソシエイトの審査にまだ合格していない場合は、以下のマニュアルが参考になりそうです。 ...

初心者 さん 追加CSSを開くには、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」とたどればよいかと思います。 コードをコピペしたら、すぐ上にある「公開」ボタンをクリックして、変更を確定します。

前略、初心者 さん 私も あまり詳しいことはわからないのですが、ローカルのテストサイトで他のスキンでも試してみたのですが、色は変更できるものの、太さの見た目が変わらないみたいです。 実際は、太さの指定がなされているようなのですが、１pxと、値が少ないので、変わっていないように見える、...

@es さん 追記していたら、解決されたようで、良かったです。

@es さん 現況の表示を確認する際は、「WP-Super-Cache」のようなキャッシュ系のプラグインは停止して、Cocoonの高速化設定の「ブラウザキャッシュ」も無効にしておいた方が良いような気がします。

@es さん 私のWindows環境では、Chrome でも特に問題なく表示されているようです。 キャッシュをクリアしてみるとどうでしょうか？ キャッシュと Cookie の消去 Chrome2020-12-07-005650.png

@yasu さん 一番下の波括弧が抜けていました。 #breadcrumb { width: 100%; padding: .6em calc((100vw - 1230px)/2);}@media screen and (max-width:1256px) { #breadc...

@yasu さん ちょっと苦し紛れではありますが、以下のCSSで試してみました。 #breadcrumb { width: 100%; padding: .6em calc((100vw - 1230px)/2);}@media screen and (max-width:1256px)...

前略、yasu さん ちょっと、試している時間がないので、それっぽいリンクだけ貼ってみます。 子要素をコンテナーからはみ出して画面いっぱいに広げる方法 子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS 「コンテナの外側まで表示を広げる css...

前略、komitsu2030 さん Cocoonの機能に添付いただいたようなものが見つけられなかったので、もしかしたら、見出しのデザインなのではないかと、勝手に推測してみました。 試しにｈ４の見出しデザインに以下のCSSのコードを適用してみたら、それっぽくなりました。 .arti...

@プー さん いつもお世話になっております。 ご案内いただいた方法を興味を持って拝見しています。 私は、PHPの素養がないので、勉強になります。 「フロントページタイプ（β版）」も、多くの方が手軽に利用でき、（β版）の文字がなくなるといいなと思います。

@yhira さん 「タブ一覧」と「大きなカード（先頭のみ）」との組み合わせでも、タブを「新着記事」以外のカテゴリのタブを選択すると、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。 「フロントページタイプ（β版）」は、まだ β版 とのことのようですので、開発のヒントになれば...

@yhira さん 「タブ一覧」との組み合わせでは、ちゃんと大きなサイズの画像を読み込んでいるみたいです。  6cce59874d37e59c781ba8ca42e3810d.png

@yhira さん フロントページタイプ（β版）の設定で、 ・カテゴリごと・カテゴリごと（２カラム）・カテゴリごと（３カラム） とカードタイプを「大きなカード（先頭のみ）」と組み合わせたときの先頭の大きな画像の表示を確認した方が良いかもしれません。

@yhira さん ここの添付で、ぼやけ具合が伝わるかどうか・・・  8dfa15cc8a38bad5756e85f17a3fb15f.png

@yhira さん 私のテスト環境ではレティーナ対応はしていませんが、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。 ソースを見ても、320px × 180px　と小さなサムネイル画像を読み込んでいるみたいです。 7d680295555d24ea932...

Begiblo さんの場合は、もともと、画像がヘッダー全体にピッタリ収まっていなくても良かったんですね。 でも、まあ、ピッタリ収めたいという方が、トピックを検索して、このトピックに来るかもしれないので、まあ、いいか・・  9fe151fbf54a926c34d4ae...

ヘッダー画像に「背景画像」を使った場合でも、CSSのコードを使わなくても、Cocoon設定の「ヘッダー」タブの設定で「高さ」と「高さ（モバイル）」の２箇所に「背景画像」に合った数値を入れれば、ある程度、体裁を整えることが可能かと思います。 でも、どの画面幅でも、ヘッダー画像の一部が隠れな...

ヘッダー画像設定イメージ  0f628009353d022513c28c20ed04e552.gif

前略、Begiblo さん Cocoonのヘッダーのデザインは、このCocoonのサイトのように「背景画像」と「ロゴ画像」の2枚の画像を使う仕様になっています。 本来は２枚の画像を使う仕様なのですが、1枚だけでデザインしたい場合もあろうかと思います。 ですので、画像を1枚...

西村さん お久しぶりです。 今、出先なので、リンクを貼りますので、参考にしてみてください。

今、出先なので、よく見れませんが、以下のリンクは、参考になりますでしょうか？

@SAKU さん いただいた文面ですと、Cocoonの広告設定と広告設定用のプラグインが干渉していたのか、それとも、目次プラグインか何かをお使いになられていたのかは、ちょっとよくわかりませんが、解決されたようで何よりです。

@bucho さん 私のテストサイトでも、試してみました。 Cocoon設定のインデックスタブのフロントページタイプ（β版）の設定で、カードタイプを「大きなカード（先頭のみ）」と組み合わせると、 ・一覧（デフォルト）・タブ一覧 の２つは、ぼやけないですが、 ...

@SAKU さん 私はプログラムのことはよくわからないですが、似たような機能のプログラムを併用した場合、干渉してしまうこともあるのでしょうか？

@SAKU さん プラグインの目次を停止して、Cocoonの目次にしてみましたが、ショートコードでは、ちゃんと目次上に表示されるみたいです。  4bcfbbebe72c2aeff7f40c7c18ee7b3c.png

前略、SAKU さん 今日、同じご質問があったみたいです。 広告設定で「本文中」に設定しても、目次上に広告がこない

前略、石谷陽子 さん 以下のCSSのコードを追加CSSか子テーマのCSSにコピペすれば、消せるような気がします。 .front-top-page .list-new-entries-title.list-title { display: none;}

なにしろ、自動広告は一度も使ったことがないので、このショートコードの機能が、自動広告を使っている場合でも利用できるのかどうか、私にはわかりません。 他のどなたかが、書きこんでくださるでしょう。

前略、匿名 さん Adsenseの設定で自動広告がONになっている場合は、広告の位置の制御は難しいみたいです。 私は、自動広告は使っていないので、試しに以下の方法で、最初のh2の見出しのすぐ上に、ショートコードを設置してみたら、目次の上に広告が表示されました。 ショートコ...

@ぜき さん もし、ヘッダー画像を「ヘッダー背景画像」を使ったデザインに変更される場合は、背景画像に合った高さを設定してくだささい。 ヘッダー画像が「背景画像」の場合は、高さは自動的に調整されません。 今は、空欄でOKです。

@ぜき さん ひとつお伝えするのを忘れていました。 どの画面幅でもヘッダーロゴ画像を隙間なく表示するには、先にお伝えしたCSSのコードの他に、Cocoon設定の「ヘッダー」タブの設定で「高さ」の数値を消しておいてください。 高さはロゴ画像によって、自動的に変わると思います...

@ぜき さん 「Autoptimize」は、Cocoonの高速化機能と併用すると不具合が出るようですので、Cocoonをお使いになっている限りは不要かと思います。