Cocoonフォーラム

現状、Cocoonの機能として、特定の投稿だけにjsファイルをロードさせることは可能でしょうか？ 可能です。2 つのカスタムフィールドを使えます。 head_custom：head 内にタグを挿入する footer_custom：body 閉じタグ直前にタグを挿入する 書き方...

Cocoon 設定の「コード」タブの「ハイライト表示するCSSセレクタ」をこのように変更すると、「コード」ブロックのみをハイライトで表示できます。 .entry-content pre:not(.wp-block-preformatted):not(.wp-block-verse) 行番号は ...

CSS を書けない方の多くが、ブラウザのデベロッパーツールを使っていないように思えます。 デベロッパーツールなしで CSS を書くのは不可能。 デベロッパーツールの使い方と CSS の書き方は、わいひらさんが分かりやすく解説されています。 WordPressテーマのCSSカスタマイズ向け...

Youtube の埋め込みは、「共有」→「埋め込む」で表示される iframe をコピペします。HTML エンコードをしても iframe が変換されるため、notepad に HTML を貼り付けました。 com.png

ただし、当方のPC環境で見るかぎり、幅が狭く見えます。これは仕方がないのでしょうか。 width と height の値のダブルクォーテーションが全角になっています。半角に修正しなければなりません。  comp.png

padding-top に指定したの値の負の値を margin-top に指定します。 例えば、こんな感じです。 span[id^="toc"] { margin-top: -120px; padding-top: 120px; }

スマホでお使いのブラウザのキャッシュを削除するとどうなるでしょうか。 私の環境では、円形になっています。  com.png

サイト URL の提示がないため憶測でしかありませんが、自動広告が有効になってはいませんか？ アドセンスの管理画面より自動広告を無効にするか、その場所に表示しないように設定するとどうなるでしょうか。 参考サイト 自動広告設定 サイトのエリアから自動広告を削除する アドセンスの自動...

関係あるかは分かりませんが、HTML エラーチェッカーで調べると HTML のエラーが出ています。  comp.png

WordPress のバージョンが古いです。 最新のバージョンでなければ、わいひらさんが正確な検証をできません。 また、エラーは子テーマの tmp/css-custom.php の 273 行目で出ています。何かカスタマイズをされていますか？

ありがとうございます。お手数をおかけしました。

フロントページの記事をクリックで、投稿ページを開けるようになりました。 現在は、この URL です。 尚、投稿ページの編集画面より、投稿ページ固有のスラッグを英字の小文字にされるのがいいと思います。日本語は、おすすめしません。Gutenberg エディターでの投稿ページのスラッグの変更...

%post_id% か /%postname%/ が必須です。 この 2 つのいずれかがないと、投稿ページ固有の URL になりません。「WordPress　パーマリンク」と検索し、各タグの意味を把握されるのがいいかもしれません。例えば、下記のページでは、各タグの意味が書かれています。 カス...

子テーマの style.css にお書きの下記 CSS が原因です。 .author-box figure.author-thumb{ float: none; margin: 0 !important; text-align: center; width: 100% !impo...

パーマリンクの「カスタム構造」には、その下に記載の「利用可能なタグ」しか使えません。 利用可能なタグに変更するとどうなるでしょうか。

このように書くと、p タグが変になります。  comp1.png

実際に試してみたら、p タグが変になりますね。 ただ、自分で直接書いた div で囲んでもなるため、Cocoon の不具合ではなく、wpautop の仕様のように思えます。 このように div と文章の間に 1 行スペースを入れると、p タグは変になりませんでした。  comp...

投稿画面ではアイキャッチ画像の横に記事が掲載 おっしゃっているページは、投稿ページではなくフロントページです。 その記事のパーマリンクは、どのように設定されていますか？ このように URL に % が入っています。% は URL で使えません。

以下の部分で p 開きタグがありません。 昔、恋愛講師の斉藤めいやさんに聞いた話ですが、斉藤さんは、付き合っている女性から「そういえば、わたし斉藤くんのことほとんど知らない」と言われることがあるとのことでした。 また、以下の部分で p 閉じタグがありません。 「そう？　結構話...

気付いた点が 2 つあります。 ① rel="canonical" の重複 Cocoon と All in One SEO Pack が出力している rel="canonical" が重複しています。 URL の正規化ができない恐れがあるため、どちらかの出力を止めないといけません。 ...

意図された画像になってはいませんか？ 構造化データで指定の画像が、検索結果で表示されています。 尚、検索結果に影響する構造化データは、Google が記事で説明しています。  com.png

まだ head 内が変です。 原因は、おそらく右クリック禁止のプラグイン。 head 内に div タグが入っているため、head タグ内にあるべきものが body タグに出てきてしまっています。

昨日は構造化データのエラーは出ていませんでしたが、今日は出ています。 原因は、Rank Math WordPress SEO plugin とかいうプラグインが出力している構造化データです。ロゴ画像の URL の指定がありません。 これで解決するはずです。 プラグインを削除するか、正...

問題のページは、script タグが閉じていません。  com.png

body 内ではなく、head 内がおかしいです。 しかも、その記事だけではなく、他の記事でも。 原因の箇所は、アドセンスのコードです。ご自身でどこかにアドセンスのコードを追加されてはいないでしょうか？ 特に添付画像の赤で囲った下の script タグが変です。 ちょっと親テーマが古...

添付画像で確認できる構造化データは、Cocoon は出力していません。 なぜなら、添付画像の JSON-LD はエンコードされていますが、Cocoon の JSON-LD はエンコードされていないため。 そこから考えられるのは、All in One SEO Pack など SEO 系プラグイ...

おぉぉ！ そのコンポーネントは知りませんでした。 検索しても他に参考になるサンプルがないですね。

AMP に対応できるか疑問を感じました。 テーマに実装されるなら、amp-scirpt で使えるか確認が必要かもしれません。 下手をしたら、「AMP で数式になりません」との問い合わせがいくつもくるかも。

5 行目の webfontsなんちゃらを消せばいいです。 script タグなのか link タグなのか分かりませんが、どちらにしろお書きになるのならデフォルトの状態で 11 行目以降です（↓ の下の行）。 <?php //全ての訪問者をカウントする場合は以下に挿入 ?>

IE 以外のブラウザであれば、CSS で簡単にできます。 例えば、記事一覧の画像への指定はこんな感じです。 @supports (object-fit: contain) { .ect-vertical-card .entry-card-thumb img { height:...

サーバーのキャッシュが管理画面の CSS や JavaScript にまで影響するか分かりませんが、お使いのロリポップのキャッシュを削除するとどうなるでしょうか。 ロリポップのキャッシュの削除は、下記ページをご参考ください。 ロリポップ！アクセラレータのキャッシュ削除方法 また、ロリポッ...

エディターが変になったら、とりあえずブラウザのキャッシュを削除するのがおすすめです。削除するとどうなるでしょうか。 また、エディターの表示崩れとは関係ありませんが、プラグインの WP Multibyte Patch のインストールが必要です。

本来なら object-fit で画像の縦横比を維持しないといけません。 .eye-catch img { object-fit: cover; } ただ、object-fit は、IE が未対応。IE まで対応するには、object-fit-images などの Polyfill が...

本文の幅と同じにしたいような・・ キャプションなしの画像と同じく左右に余白を取りたい場合は、このような CSS でいいはずです。メディアクエリの書き方は、スキンの制作者さんに合わせました。 .entry-content .wp-caption { margin: 1.4em aut...

↓ のスキンの CSS が原因です。 .entry-content > * { margin-right: 2em; margin-left: 2em; } @media screen and (max-width: 480px) { .entry-conten...

おそらく大丈夫です。 AMP 検証をすると警告が消えました。 ちなみに、警告は、「トップニュースカルーセル」を含むリッチリザルト用の構造化データがないことを指摘していました。 参考サイト 記事 AMP が検索結果にどのように表示されるかを理解する  comp.p...

Cocoon 設定 > SEO タブにある「JSON-LDを出力」のチェックが外れてはいないでしょうか？ もし外れている場合は、以下の項目をお試しになるとどうなるでしょうか。 「JSON-LDを出力」のチェックを入れる Cocoon 設定 > キャッシュ削除にある「AMPキ...

私の IE では、そのような動きはしませんでした。 また、デベロッパーツールでも変な部分は見られませんでした。 みるみさんの環境が影響を与えているのかもしれません。例えば、IE のキャッシュや拡張機能です。セキュリティソフトもあり得るかもしれません。 昨日わいひらさんのツイート先を見てみ...

その部分は、テーマは出力していません。 プラグインをお疑いください。サイトの head タグ内を見た限り、2 つのプラグインが怪しいです。 VK All in One Expansion Unit Jetpack

原因は、画像の URL です。 2 つの画像の URL を https にご変更ください。 WordPress 管理画面 > Cocoon 設定 > ヘッダータブにある「ヘッダーロゴ」 WordPress 管理画面 > ユーザー > あなたのプロフィールにある「...

そのような時は、AMP テスト - Google Search Console で検証します。 検証すると、「タグ「meta name=viewport」の親タグは「div」ですが、「head」のみ使用できます。」のエラーは出ていません。 もう 1 つの「タグ「style amp-custo...

ON が望ましいです。 WAF とは、サイバー攻撃からサイトを守るセキュリティシステムの 1 つです。 WordPress は利用サイトが多いため、攻撃を受けやすい面があります。WAF を有効にし、セキュリティを高めるのが重要だと思います。 念のために、除外設定の方法を書いておきます。ア...

サーバーの WAF 機能が、kyoulife さんを悪意のある攻撃者と判断しアクセスを遮断した可能性があります。 そのため、このようなことをお試しになるとどうでしょうか？ --- 下準備 --- ① 子テーマをダウンロード 子テーマをお使いではないため、まずは子テーマをダウンロードし...

そのプラグインの公式デモサイト。 プラグインの JavaScript は、フッターで読み込まれているように見えます。

ありがとうございます。お手数をおかけしました。

カスタム CSS にお書きになっている CSS が原因です。 @media screen and (max-width: 480px){ .tagline, .logo { text-align: center; } .card-thumb img {width: 130px;}...

Cocoon設定の「エディター」タブの「タグ選択をチェックリスト形式にする」にチェックは入っていますか？ ※ 投稿ページの編集画面で設定するものではありません。

申し訳ありません。子テーマは有効になっていませんね。 head 内で cocoon-child-keyframes-css とあったので、子テーマが有効になっていると勘違いしました。 スクリーンショットは必要ありませんでした。

実際に試したところ、ID の重複を解消してもダメでした。ただ、ID の重複は避けるのをおすすめします。 原因は、もしもアフィリエイトの「かんたんリンク」が生成する JavaScript 。こいつが悪さをしています。 「JavaScriptをフッターで読み込む」が無効であれば、問題は起きない気...