Cocoonフォーラム

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

どばっしーさん 各ブラウザには、デベロッパーツールが備わってるので、そこで、ある程度は、シュミレーションが可能です。 ５年ほど前の記事なので、ちょっと仕様が変わってしまっているところもありますが、テーマ作者様のわいひらさんの記事が参考になるかもしれません。 WordPre...

M.J. さん 私が最近いいなと思ったのは、M.J.さんとは真逆の、スマホでエントリーカードが横長（サムネイル画像が左でタイトルが右）になるレイアウトです。 以下の過去のトピックは、新着記事をショートコードで表示するものですが、実際やってみると、いい感じかも？と思ったりしました。 ...

なお、文字のフチどりは、以下のサイトを参考にしました。 ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字

どばっしーさん Cocoon設定の「ヘッダー」タブの設定で、「高さ」の数値を250にして「変更をまとめて保存」ボタンをくりっくし、ヘッダーの高さを指定して、以下のCSSのコードで、さいとタイトルを太字にして白フチを付けると、下の画像のようになるかもしれません。 .site-name-text...

前略、どばっしー さん 私のサイトでも、ときどきそのメッセージが届きます。 何も修正せずに、修正した、というボタンをクリックして送信したら、数日後に修正されました、と連絡が来ます。 本当に問題がある場合もなくはないのでしょうが、誤検知も多いみたいです。 グロー...

前略、かな さん WordPres5.6でのクラッシックエディターの主な不具合のトピックは以下の２つです。 [解決済] 装飾のツールバーがスクロールされてしまう（Firefox） [解決済] ビジュアルエディターでの改行が見にくくなっています。 AddQui...

前略、M.J.さん 試しに、雑な書き方で、CSSのコードを書いてみましたが、なんだか、メインカラム内が散かっているようで見づらく、スッキリしません。 Cocoonのデフォルト縦型2列のままの方が良いと感じます。 #list article { display: flex;}.ect-v...

猫又 さん 上記のように設定すれば、ブログのページに、書いた記事の「エントリーカード」が、新しい記事のエントリーカードが上に加わるカタチで自動的に並んでいきます。

猫又 さん ブログのインデックスページ用の固定ページを作成して、本文にはなにも記入せず、タイトルは「ブログ」か「blog」とかにして、パーマリンクのスラッグを「blog」として公開します。 ダッシュボードの「設定」→「表示設定」で表示設定を設定します。 グローバルメニュー...

アンケートは、まだやっているようなので、よろしければいかがですか？

猫又 さん 上記の書き込みに貼り付けたリンクを、よくお読みになれば、トップページを固定ページにして、ブログページも作成できます。 今一度、よくお読みになってください。 最初は、難しく感じるかもしれませんが、出来ると思いますよ。