Cocoonフォーラム

@ikumi さん 確かに自由記入欄は無かったかもしれませんね。 前回のアンケートの結果が示されているようです。 2019年のアンケート結果

narukichi さん なぜ、そうなったのかは、私にはわかりませんが、クラッシックエディターをお使いでしたら、「ビジュアル」から「テキスト」に切り替えて、以下の該当部分のソースコードが、 <p>私が今現在もネットビジネス全般で約に立っているスキルですので、<br> ...

前略、narukichi さん フォーラムへの画像のアップロードは、書き込み窓のすぐ下の「参照」ボタンから添付すればOKです。 44ab4d275521e7c964e35c273b6a3477.jpg 62fa254ab7ef28d573e1d8ef3a20e7ea.jpg ...

山田さん アドセンスの自動広告をONにしていると、望まない場所まで広告が表示されてしまいます。 それを防ぐには、Ikumi さんの記事が参考になるかもしれません。 Ikumiさん アドセンス自動広告 ～ ページ除外とエリア除外設定

例えば、h2とそっくりなデザインでしたら、以下のような指定でイケるかもしれません。 /*エントリーカードの見出しのデザイン*/.entry-card-title,.related-entry-card-title { background-color: rgba(77,161,255,.05)...

山田さん トップページのエントリーカードの見出しに、記事本文と同じデザインを適用すると文字が大きくなってしまうので、もし、トップページのエントリーカードのタイトルにデザインをしたい場合は、別途デザインを分けて指定した方が良いかもしれません。

山田さん 文字のサイズは、h1が26pxなので、ｈ２は24pxぐらい、h3は、20pxぐらいの方がいいのかもしれません。 トップページのエントリーカードの見出しにもデザインを適用させたい場合は、別途CSSのセレクタを追記する必要があります。

それで、良いです。 ｈ２とｈ３の文字の大きさや、色を変えたい場合は、先ほどのCSSのコードを少し変えて、調整します。

山田さん 子テーマのCSSファイルに書かれたアドセンスコードが読み込まれていたとは、ちょっと考えにくいので、もしかしたら、別のとこで、アドセンスのコードを設定されていたりしませんか？ 例えば、私は使ったことがないので、よくわからないのですが、Site Kit by Google ...

山田さん 見出しの表示テストは、記事本文内でないと、わかりません。 テスト記事にｈ２とｈ３を適当に設定してみてください。

山田さん 以下のコードでもイケそうです。 h3の見出しの文字の下のオレンジ色のラインの位置指定を少し変えています。 一番下の-2pxのところの数値で、文字との空きを調整できるかと思います。 .article h2 { font-size: 20px;/*文字のサイズ...

山田さん Cocoon設定の「広告」タブの「広告コード」のところに、広告コードは設定されていらっしゃいますか？

山田さん 間違えたと思ったのですが、どうも合っているようです。 サルワカさんのコードのままだと以下のようになります。 .article h2 { font-size: 20px;/*文字のサイズ*/ border-top: none; border-bottom: ...

山田さん h3のコードを少し間違えているようです。 修正しますので、お待ちください。

山田さん ダッシュボードの「外観」→「テーマエディター」とたどると、子テーマの style.css が開くと思います。 その中に、CSSのコードではなく、アドセンスの広告コードが記述されています。 これは、CSSファイルに記述するものではないので、削除しておくことをオスス...

山田さん 追加CSSの上の方にあるｈ２のところを、以下ようなコードと差し替えれば、記事の本文中の見出しだけに適用できるかと思います。 .article h2 { font-size: 20px;/*文字のサイズ*/ border-top: none; border-bottom: no...

ちょっと、小用で、30分ほど外します。 だんだん事情がわかってきました。

山田さん Cocoonで見出しをCSSのコードで指定するときは、例えばh2に適用したいときは、 .article を半角スペースで繋いで、 .article h2 { プロパティ:値；}.article h2:after { プロパティ:値；} このように書きます。...

山田さん Cocoonでは、「記事のタイトル」を入力すると、「ｈ１」の見出しとして記事の最上部に表示されます。 ですので、h1にCSSのコードを適用させると、当然、記事のタイトルにもそのデザインが適用されます。 サイトの別のページを拝見しますと、「追加CSS」の方に記述さ...

現在カスタムCSSに記述されているコードは、ｈ１、つまり、記事のタイトル部分に適用させるためのコードです。 そのため、記事のタイトル部分にも適用されます。 通常は、ｈ2にデザインを適用させるようにコード書くのですが、そのページだけh2の見出しのデザインを別のデザインに変更した...

山田さん そこは、「追加CSS」というところです。 「カスタムCSS」は、記事を書く画面の下の方にあります。  a31c8b11036792f1884f5033fa1f414b.png

mystery さん あと、セレクタを .article h2 { とするなら、 疑似要素も、 .article h2::before { のような指定になるかと思います。

前略、mystery さん とりあず、子テーマのCSSの 116行目 にメディアクエリの閉じ括弧が足りないので、足してみてください。 他にもあるかもしれないですが、とりあえず・・ 6c526bbd4fbd73342b1e3661b4ad8a74.png

山田さん 該当ページの編集画面の下の方にある、「カスタムCSS」の欄にCSSのコードを記述していないか、今一度、確認してみてください。

puppy さん サイドバーの見出しの文字の色は、Cocoon設定の「全体」タブの「サイトキーテキストカラー」でも変更することができます。 だだし、「サイトキーテキストカラー」を設定した場合は、その他の部分の文字の色も連動して変わってしまいます。 個別に指定されたい場合は...

山田さん 次回、以下もご活用ください。 Macでスクリーンショットを撮影する/画面を収録する

M.J.さん ちょっと、コードが雑で、お粗末さまでした。

puppy さん サイドバーの見出しのh3の文字色は以下のコードでイケそうな気がします。 .sidebar h3 { color: #333;} 文字の色は、ご自身で16進数で適宜ご指定なさってください。 ご質問の際は、極力URLのご提示をお願いします。

山田さん 記事の編集画面の下の方にある「カスタムCSS」に記述されていませんか？

山田 さん ソースコードを拝見したところ、headタグの中に、該当するCSSのコードが挿入されているようです。 スタイルを指定するプラグインか何かをお使いですか？ あ、できれば、環境情報をご提示ください。

puppy さん ご協力をお願いします。

山田さん 上にも同じ線が出ているのは、記事のタイトルを入力していないからです。 記事のタイトルを入力してみてください。

前略、puppy さん サイドバーの見出しのことだと思うのですが、できれば、フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にしていただければ助かります。 そのようにしないと、多くの質問される方が、URLのご提示なしで質...

sora00 さん デベロッパーツールでブロックエディタ―のタブボックスを見てみたら、CSSの指定は共通っぽいので、あまり使わなそうなラベルをCSSで、別の文字列に割り当ててしまうとか・・ あ、でもアイコンフォントがあるから、それに合わせないとダメかも・・

前略、やま さん ダッシュボードの「外観」→「ウィジェット」とたどって、ウィジェットの編集画面の「サイドバー」のエリアに「カテゴリー」ウィジェットが２つ入っていたりしませんか？  68dc48137443b7966ad3b5d202ca3735.png

sora00 さん ブロックエディターの方の「タブボックス」ブロックの方がラベルの種類が多いんですね。  477b9912742115835784b2c3f6e44e72.png

前略、sora00 さん 検索しても、以下のページしか見つけられませんでした。 拡張スタイル「タブボックス」のラベルを日本語化するカスタマイズ方法 でも、応用すれば、１１種類作れるということかも？

どばっしーさん ヘッダー画像の表示部分の高さが少なく、隠れてしまっていたので、少し高くしてみたら、文字が読みにくかったので・・というような流れです。 「ダウンロード」ではなくて、ただ表示して、デベロッパーツールで弄ってみただけです。 トピックの表題と関係ない内容を２つも書いて...

M.J. さん 今、一番最初のご質問を読み返してみると・・ 「縦型カード３列」が、最も合致しているような気もします。  94ff761dfb8a74d5346db41c68b2ff60.png

M.J. さん もうひとつだけ書くとすれば、カスタマイズで改変したところは、必要な時以外は、「Cocoonのデフォルトに戻す」ということかと思います。（つまり、まず、デフォルトの状態を詳しく調べないといけない訳です） 変えたままの状態では、他に影響を及ぼす可能性が増えてしまいます。 ...

M.J. さん ヒントとなりそうなことは、かなり書き込ませていただきましたので、あとは、ご自身で工夫なさってみてください。

M.J. さん ところで私はPC表示の時だけ @media screen and (min-width: 741px) {} で2列表示にさせて、スマホ表示部分は一切追記せずに 『エントリーカード（デフォルト）』でCocoon設定仕様の横型1列にしてみたのですが、これに問題はない...

一応コードは書いてみたものの、やはり、カテゴリーラベルをどのようにするかや、サムネイル画像の生成サイズなどの問題もあり、ヒント程度にはなるかもしれませんが、オススメするカスタマイズではないような気がします。 やはり、テーマ作者様は、いろいろは条件を上手くデザインに落とし込んで工夫して作ら...

ああ、 flex: 1; を指定しなくてはいけない箇所もありました。 とりあえず、以下に全体のコードを貼っておきます。 /*横型２列*/#list.list.ect-entry-card.front-page-type-index { display: flex; jus...

PC表示でスニペットが下に回りこんでしまうのを防ぐには、 #list article { display: flex;} とするといいのかもしれません。 ただ、740px以下では、 display: block; に戻さないといけないかもです。

前略、山田 さん 追加CSSの内容の変更を確定するには、すぐ上にある「公開」ボタンをクリックします。  2209eb545088caa6a43701eded23dc05.png

M.J. さん 上記コードのイメージは以下のような感じです。 659a5af9069574ebbc20b39f05345bb5.gif まあ、カテゴリーラベルの位置は、何とも判断がつかないので、適当です。

M.J. さん 試しにデフォルトのエントリーカードでやってみましたが、雑な書き方なため、間違っているかもしれませんし、合っていても、細かい修正が必要かと思います。 セレクタが長くなっているのは、もしかしたら、別の箇所のエントリーカードに影響しちゃうかもしれないので、長くなってしまって...

M.J. さん そうなんです。 縦型じゃなくて、デフォルトのエントリーカードからカスタマイズした方が、良いのかもしれません。

M.J. さん ちょっと、やってみないと、わからないのですが、スマホでも、横長（左がサムネイル画像で右がタイトル）という場合は、縦型２列をベースにカスタマイズするのではなく、最初から横長（左がサムネイル画像で右がタイトル）のデフォルトのインデックスページのレイアウトをカスタマイズした方が良いのか...