Cocoonフォーラム

NAE さんのサイトは、通常ページもおかしいですね。 ＜head＞タグ内にあるべきの meta タグなどが、＜body＞タグ直下に出てきてしまっています。 プラグインの全停止やサーバーの設定変更で、不具合の原因を探った方がよさそうです。特に＜head＞タグに preconnect を入れ込んでいるも...

> NAE さん 私の環境では、Twitter を貼り付けても正常に AMP ページが表示されます。 mod_pagespeed が有効になっていますが、無効にするとどうなるでしょうか？

画像ファイルが見つからず、大量の 404 エラーが出ています。原因は、おそらく mod_pagespeed 。 画像の拡張子が .webp になっていて、たぶん mod_pagespeed が画像ファイルを .webp に変換しているように思えます。 mod_pagespeed を無効にすると、どう...

以下の 2 つのいずれかで上手くいくはずです。 div.header-container-in.hlt-top-menu .logo-header img { height: auto; max-height: none; width: 400px;} div.header-con...

方法は 2 つあります。 1 つは、以前のトピックの main-before.php （ ）のままであれば、各固定ページ毎に bgswitcher に異なる class を付けています。この class を使います。 .bg-slider-1 { height: 400px;}.bg-slider...

下記の CSS で現在のページのみの文字色を変更できます。 .pager-links > .page-numbers { color: red;}

他のページでテキストを表示しないためには、 main-before.php を下記のように変更します。 1 行目に画像を表示したい固定ページの id を入力する条件分岐を追加しています。

情報ありがとうございます。変更箇所は 2 点です。 まず、ステップ 2 で main-before.php に追加したコードを、以下のものに変えます。 次に、ステップ 3 で javascript.js に追加したコードを、以下のものに変えます。 やっていることは、各固定ページの bgswit...

できますよ。ただ、その前にいくつかヒアリングをします。 ●投稿ページやカテゴリー・タグアーカイブページでは、 bgswitcher を設置されるでしょうか？ ●フロントページは、固定ページでしょうか？インディックスリストでしょうか？インデックスリストの場合には、 bgswitcher を設置されるで...

サルワカさんの方法では、複数行にまたがると最後の行にしかストライプが付かないです。 現在の CSS を全て下記のものに変更すると、複数行に対応したストライプを作れます。 .marker-under { background: none; border-image: repeating-linear-...

div の class 名の box って何だろうと思ったら、ご参考にされていたサイトが 2 つあったんですね。申し訳ないです、見逃していました。 私が参考にしたのは、背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】の方です。 なので、私がやったのとステップ 2 ...

そのまま真似をされると上手くいきません。原因は、さるわかさんのうっかりミス。私もよくやるセレクタ名の間違いです。 HTML はそのままで、 CSS の 2箇所ある .stripe を .under に変えれば変更できます。 もしくは、 CSS はそのままで、 HTML の span の class ...

あれ？ Gist は URL を貼り付けるだけではだめなのか。 script での埋め込みテスト。

jQuery プラグインは興味があるので、 bgswitcher を試してみました。 Cocoon で使えましたよ。一応やり方を記載しておきます。 ●ステップ 1 ：プラグインの読み込み● 子テーマフォルダの直下に bgswitcher.js ファイルを新規作成。 bgswitcher.js ファイ...

あ！わいひらさん、私の記事の方法はまずいかもしれません。 というのも、私の記事では、 WordPress のショートコードや oEmbed の動画を無視しています。対応しているのは、自分で video タグを使い挿入した動画のみ。 なので、「メディアを追加」から埋め込んだ動画は、 AMP エラーか警...

わいひらさんの flex: 1 1 auto; の方が断然スマート。

flex: 1 0 auto; はそのままにして、以下の CSS を追加するとどうでしょう？ .tagcloud a { max-width: 300px;}300px は、サイドバーの幅です。

おっと。かぶってしまいました。

下記の CSS でどうでしょうか？ .current-menu-item > a,.current_page_item > a { border-bottom: 3px solid #ba3939;}

もう 1 つ、 3 つ目の CSS も追加。 .navi-menu-content,.sidebar-menu-content { -webkit-overflow-scrolling: touch;}.menu-content { overflow: hidden; overflow-y: aut...

TanTaa さんのコメントが見えていなかった…。TanTaa さん、検証ありがとうございます。

かうたっくさん、ありがとうございます。 ついでに、もう 1 つお願いが。 下記の 2 つの CSS を試すと、 iOS でナビ側のスクロールはスムーズになるでしょうか？ 1つ目の CSS .navi-menu-content,.sidebar-menu-content { -webkit-overf...

下記の CSS を指定すると、 iOS でスムーズにスクロールできるとかはないでしょうか？ .navi-menu-content { -webkit-overflow-scrolling: touch;}私は iOS を持っていないので、動作は確認していません。

amp-sidebar にすると、現在の Cocoon とは 1 つ違うところがあるんです。それが表示されていない画像に対して何かをすると、一気に画像が表示されること。 スマホの実機の場合には、表示されていない画像の部分をタップ長押しをすると、その画像も他の画像も表示されます。 デベロッパーツールの...

表示されていないコードは、 notepad.pw に貼り付けました。

amp-sidebar を試してみても、画像が完全に表示されませんでした。 途中まではきちんと表示されるのですが、途中から img タグがなくなっています。原因が分からないです。 一応やったことを書いておきます。とりあえずの試しなので、内容はかなりぐちゃぐちゃです。 まず、 amp-header.p...

この状態は私もハマったことがあります。私と同じ状況なら、画像の AMP キャッシュが生成されていない状態のはずです。 たぶん amp-sidebar を使わないとダメな気がします。 amp-sidebar は amp-img をサポートしているので、隠れている画像でも AMP キャッシュが生成され...

is_ssl 関数ってあるんですね。初めて知りました。正規表現で判別しないといけないのかなとか思ってました。 たぶん、AMP に検索フォームがある 無料の国産テーマはないはず。差別化になりますね。

＜script＞＜/script＞は変換しないとダメだったか…。 ＜head＞タグ内に追加するコードは、 amp-form で書かれているものです。

AMPで検索窓が表示されていない件。 検索フォーム自体は、すごく簡単に設置できます。ただ、テーマでの実装は難しいかもしれません。 というのも AMP に検索フォームを設置するには、 https が必須です。 http サイトでは AMP エラーが出るので、利用者を選ぶテーマになるかもしれません。あと...

あー…。ごめんなさい。 float を使っているのに、 clear: both を忘れていました。 codex を見てみたら、現在のギャラリーは 2012 年に WordPress 3.5 で改修されたものなんですね。確かにアナログです。

だめだ。休日で気が緩んでいる…。最後のセレクタへの指定も間違いです。 CSS を全部書き直します。 .gallery { margin: auto;}.gallery .gallery-item { float: left; margin-top: 10px; text-align: cente...

ごめんなさい。 1 つミスがあります。 最後から 2 つ目のセレクタは、 .gallery-columns-8 .gallery-itemではなく .gallery-columns-9 .gallery-itemです。

私だったら下記のようにします。 まず style タグは、 lib/amp.php の convert_content_for_amp 関数で取り除きます。 次に amp.css に下記の CSS を追加します。 .gallery { margin: auto;}.gallery .gallery-...

ビジュアルエディタを使っていないので、気が付いていませんでした。 このタグは便利ですね。ワンクリックで簡単です。

table タグは、表を作成するためのタグです。広告は、表に含まれるデータではありません。また、table タグは、強調スニペットの生成にも使われるほど重要なタグです。 table タグの本来の使い方に反して、横並びにしたいがために使うものではありません。html と css は分離するというのが、...

見た目を整形するために、テーブルタグを使ってはいけません。 見た目は必ず CSS で整形されてください。

試してみたところ、ばっちりエラーが解消されました。ありがとうございます。

試してみましたが、エラーが解消しませんでした。 ただ、こちらの Cocoon 公式サイトでは、エラーが解消していますね。 私の以下のテスト環境の問題かもしれません。（外部からアクセスできないため、サイト URL は消しています。） サイト名：テスト環境サイトURLbr />Wordpressバージョ...

Feedly/RSSフォローボタンを見逃していました。 SNS フォローボタンは、 .sns-follow を使います。

> MALIY さん その内容は、 Edge と関係があるでしょうか？ また、 php のバージョンはいくつでしょうか？ php のバージョンは最低でも 5.6 以上、できれば 7.0 以上にされてください。

テーマが異なるため、セレクタも違います。 日付・更新日 をまとめて非表示するには、.post-meta ではなく .date-tags を使います。 SNSボタン（シェアボタン）は、 #sns-share ではなく .sns-share を使います。

Edge上でエラー表示される をご参考下さい。

エラーの内容のとおり、 ) が足りないのが原因です。 lib/utils.php の 958 行目を下記のように変更すると、エラーが解消します。 if(preg_match('/Edge\/([0-9.]*)/', $ua, $match)){お急ぎであれば、親テーマを直接変更して構わないと思います...

WordPress 管理画面 → Cocoon 設定 → 投稿タブより、コメント設定の「コメントを表示する」のチェックを外せばコメント欄が表示されません。 尚、固定ページタブにも同様の設定項目があります。

あれ…。 notepad にコードを貼り付けました。

おふ…。コードを再度貼り付けます。 <?php if( is_amp() === true ): ?> <div class="matche-content-wrap" itemscope itemtype=&...

私が試した限りでの、 AMP に関連コンテンツユニットを設置する方法をご説明します。 まず子テーマに tmp フォルダを作成します。 次に親テーマの tmp フォルダにある single-contents.php を、子テーマの tmp フォルダにコピペをします。 最後に子テーマに設置した sing...