Cocoonフォーラム

スキン制御は単に「ページ送りナビの枠線を表示する」をオフにしただけ、対策不十分です。 先にも書いてありますが、スキン「Fuwari」は表示タイプに関係なく、枠線が付きます。そのため、画面幅480px以下のとき、表示変化に合わせ、先述のコードが必要となってきます。 ページ送りナビ設定...

●補足 今回、たまたま見たスキン「Fuwari」を使用している方のページを拝見し、気になったので、調べてみました。

●補足 上下のボタンの間に余白がなく、hoverの際、上に移動するスキンが他にもあります。背景色が付いているため、上のボタンに重なっても、下が見えることがなく。ただ、重なるため、区切り線は消えてしまいます。

●類似不良 Simple‐DarkmodeSimple‐Darkmode Always（常時ダークモード）カラフルラインほんわかライトニング

類似で枠線に伴う不具合があります。 ページ送りナビ設定 表示タイプ「デフォルト」のとき、標準上下にボタン配置。 表示タイプ「サムネイル正方形」のとき、標準横並びにボタン配置。このとき、1ページ、最後のページにホームボタンが追加される。 スキン「Fuwari」は両方とも横並びにボタ...

●原因 先述の通り。 ●対策 ページ送りナビに元々枠線があるため、枠線をオンにした状態でも余分な枠線が表示されないようにする。以下の箇所にコードを追加する。 .body .pager-post-navi a.prev-next-home, .body .pager-pos...

●原因 justify-content: space-betweenを使用して、コンテナ内の両端にページボタンを配置している（1つ目の要素が左端、最後の要素が右端に来るように配置）。しかし、ボタンが1つしかない場合、最後のページのボタンが左端に配置されてしまう。 ●対策 「前へ...

スコアそのものではなく、おそらくPageSpeed Insightsでエラーが表示されるため、フォントが原因ではないかと気にされたのではないでしょうか。

●回答 図1のことを指しているかと思います。 【原因】 同様の内容が掲載されており、原因が述べられています。 【対策】 以下が該当します。（てがきノートシリーズ）ここをopacity:0.1とするとエラーは改善するかと思います。 【原因】 [Cocoon設...

仕様ということでクローズとします。

●回答 以下のコードを追加します。 .logo-menu-button.menu-button { justify-content:flex-start; padding-left:22px; } ●アドバイス CSSをカスタマイズする上で、Chromeのデベロッパー...

----------------------------------------------テーマ名：Cocoonバージョン：2.7.8.1カテゴリー数：19タグ数：150ユーザー数：1---------------------------------------------- ブログカードに自...

気になった点は、メディアのパスがhttps（SSL）になっていません。  2024-10-17_20h05_09.png

[Cocoon設定]→[ヘッダー]→ヘッダー背景画像の「背景画像の全てを表示」をオンとしてませんか？これをオフにして解決しませんか？背景画像を縦横比を保持し表示するため、ロゴに余白ができます。

対面で対応しているわけではないので、図を使ったり、相手に伝わりやすいよう工夫してください。 .header-in img { vertical-align: top; } .site-name-text-link { padding: 0; } 404-NOT-F...

最初は誰でも初心者です。知識ゼロの状態から、調べて学び、知識を身に付けていくのです。 コピペ自体が悪いわけではありません。そのコードが何であるかを理解し、それを足掛かりに調べ、学ぶことが大切です。 なぜ皆がカスタマイズ用のCSSを書けるのか、なぜ該当箇所のCSSクラスがわかるのか、そこには特...

●回答 CSSのプロティと値の間のコロンが漏れています。 修正画像がエラーとなり添付できず。 .header-in{ width: 100%; } .header-in img{ width 100%;★ } .logo-image span,.logo-image a ...

次回のバージョンアップで、Gutenbergエディターのスタイルボタン追加が変更されます。 今までassets/js/block.jsでスタイルボタン定義していましたが、これを削除します。代わりに、JSを止め、PHPでの定義に変更します。（ボタンテキストを同じにし__()としています） ご了承...

全く解っていないようなので、全ての見出しh1～h6の前に.article（親のCSSクラス）を付けてください。 リセットを.mainとしてますが、記事以外にも影響します。例えば.main h1とし見出し設定した場合、図示のようにエントリーカードにも影響します。 2024-10-17_11h...

●回答 CSSはブラウザの表示幅に応じて対応します。PCやモバイルなどのデバイスや、モバイルの縦向き・横向きといった概念は存在しません。 /* ブログカードタイトル */ .body .blogcard-title { font-size: 18px; } /* ブログカード...

●補足 リセットするなら、ここにh2～h6を書くのではなく、纏めた方がいいです。 .article h2, .article h3, .article h4, .article h5, .article h6 { background: none; border: 0; ...

●回答 どこのh1～h6を対象にしているかが指定されていないため、スキンCSSが優先されてしまいます。このため、メインエリアのh1～h6と言うように、h1～h6の前に親要素のCSSクラスを追加し、例えば.article h2とします。 以下のようにコメント（/* */）に入力ミスがあ...

●回答 要望の意図が不明確です。対面での対応ではないため、第三者に伝わるように、具体的な内容や図示を含めて説明していただく必要があります。どの部分の字数が少ないとお考えでしょうか？また、フォントを変えたいとは、字体（明朝とかゴシックなどのfont-family）のことでしょうか？ ブ...

●補足 先述ではブログカードだけでなく、モバイルの場合の全体の文字サイズが大きくなってしまいます。このため、ブログカードだけ、文字サイズを大きくするなら、以下のCSSを追加してください。 一部、プラグイン「Pz-LinkCard」でブログカードを作られているようですが、これは対象外となります...

●回答 次の設定になっているかと思います。[Cocoon設定]→[全体]→サイトフォント「文字サイズ」18px[Cocoon設定]→[全体]→モバイルサイトフォント16pxここでモバイルサイトフォントを大きめのサイズに変更してください。 ●参考 ブログカードの各画面幅でのフォントサイ...

CSS以前に、Chromeのデベロッパーツール使えてますか？CSSの事を語るのはその後です。まずはChromeのデベロッパーツールを使えるようになってください。

@fxdetaku3 さん 解決してよかったです。 ●余談 [外観]→[カスタマイズ]→追加CSSに、CSSを追記していますが、子テーマCSSにも書かれており。子テーマCSSに集約した方が、のちのち管理し易いかと思います。 またプラグインですが、Cocoon標準でパンくず表示機能...

●回答 サイドバーのタグクラウドをクリックすると、ヘッダーメニュー（navi-in）の内容が消えています。Cocoon標準でページごとにヘッダーメニューを表示、非表示するなどの機能はありません。functions.phpで、タグクラウドごとにヘッダーメニューを変更するなどのカスタマイズを行ってい...

最初は誰でも初心者です。知識ゼロの状態から、調べて学び、知識を身に付けていくのです。コピペ自体が悪いわけではありません。そのコードが何であるかを理解し、それを足掛かりに調べ、学ぶことが大切です。なぜ皆がカスタマイズ用のCSSを書けるのか、なぜ該当箇所のCSSクラスがわかるのか、そこには特定の方法があ...

●原因 PC表示の場合、モバイルボタンを表示するのはスキン「ONE」の独自仕様です。このとき、モバイルボタンの全体幅は450pxに設定されています。また、左寄せのため、右側に余白が生じます。 ●対策 以下のコードをCSSに追加してください。修正として2案あります。（案1）モバイルボタンの...

プラグイン「ACF」を利用すると、カスタムフィールドのメタボックスをノーコードで作成できます。そのため、多くのサービス提供ページでも利用されているかと思います。 一度試しに使ってみましたが、定型コードとはいえ、100ステップほど必要なメタボックスの...

●確認のお願い Q1:[Cocoon設定]→[画像]→「本文上にアイキャッチを表示する」がオンになっていますか？Q2:投稿タイトル「カザフスタンの近未来都市・アスタナで馬肉を喰らう」ですが、エディターでアイキャッチ画像を設定していますか？Q3:以下の画像を一度PCデスクトップにダウンロードしてか...

●お願い事項 原因を聞かれても、情報提示がなく調査できないので回答でません。フォーラムの先頭に書かれてますが、マナーの順守願います。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャ...

フォーラムの質問の回答ついでに調べたので、メモとして残します。 ●横幅の広いテーブルは横スクロールの注意点 [Cocoon設定]→[本文]→レスポンシブテーブル「横幅の広いテーブルは横スクロール」をオンとした場合、注意が必要です。 上記をオンとすると、全ての<table>にS...

先述のwidth: fit-content;は無くても問題なく。 少し気になり、調べたのでメモとして残します。 ●プラグイン「Flexible Table Block」とGutenbrg「テーブル」ブロックの違い テーブル設定でセル幅を固定にした場合、<table>にhas-...

気付いたことありメモとして残します。 ScrollHintのHTMLですが、spanタグの中にdivタグがあり、仕様として望ましくないと思え。 <div class="scroll-hint-icon-wrap" data-target="scroll...

●仮対策 [外観]→[カスタマイズ]→追加CSSに以下のコードを追加してください。Cocoon設定が正しく反映されないため、文字色をCSSで白色に変更します。 body.public-page { color:#fff; } ●本対策 ＞わいひらさん 親テーマの見直しお願い...

●設定 以下に設定した。「Cocoon設定]→[全体]サイトフォント「文字色」を#fffに設定サイト背景色を#424242に設定 ●原因 サイトフォント「文字色」は--cocoon-text-colorに反映されたが、スキン「SILK」のCSSが優先され文字色が#484848となって...

@bizh さん 以下の手順で可能かと思います。 セル設定ので「セルの幅」を入力します。①②はセル幅に応じて、セル中の文字は折り返し表示されます。③ですが、Cocoonはライブラリ「scroll-hint.js」を用いスクロールさせています。このため、ブラウザがある幅になると、各セルが...

●お願い事項 フォーラムの先頭に書かれていますが、「高速化を無効」にして頂きたく。全CSSが一つになり、どこに定義してあるCSSか調べられません。 また、環境情報の提示もお願いします。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを...

●補足 書かれたCSSを図示します。Chromeデベロッパーツールを使えば、ページのCSSが実際どうなっているの分かり、ご自身で書いたCSSがなぜ反映されないのか調べることができます。 /* ウィジェット自体の下の余白① */ .widget { margin-bottom: 1px...

●回答 修正したい要素のCSSクラスがでたらめです。 .sidebar .widget li a { padding-top:0; padding-bottom:0; } ●アドバイス ページをカスタマイズする上で、ネット検索で、CSSの答えそのものを探す、調べ...