サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
CSSカスタマイズ相談
19
投稿
4
ユーザー
3
Reactions
3,470
表示
Topic starter
2018年10月23日 23:12
AMPのページで以下のコードが働かずバックグラウンド色が付かない状態です。
文章
こちらはAMPでないページでは表示されています。こちらの背景色をAMPで表示させる機能をcocoonで追加することは可能でしょうか？
下記に画像を添付させていただきます。AMPページでも以下のように表示させたいと思っております。
よろしくお願いいたします。
2018年10月24日 00:02
AMPの仕様上、インラインスタイルは使えません。
しっかりと対象のHTML要素に対してclassを割り当て、子テーマのstyle.css等にCSSで書き込む必要があります。
2018年10月26日 23:37
よく考えたら、AMPもインラインスタイルに対応したんだった。
次のバージョンでインラインスタイルも適用するAMPにしたいと思います。
ただ、!importantとかが使われているCSSを利用している場合は、優先度関係が不安。
Topic starter
2018年10月26日 23:41
わいひら さん
AMP対応の件、かしこまりました。大変うれしく思います。
多くの参考サイトからAMPでのインラインスタイルの表示方法を探していましたが、正直私の力不足で分からないことが多く、ずっとやり方を模索しているところでした。
cocoonのバージョンアップを楽しみにしております。ありがとうございます。
2018年10月27日 03:45
よろしければ、最新バージョンは以下からダウンロードできるので試してみてください。
https://github.com/yhira/cocoon/archive/master.zip
当サイトでは既に適用済みで、試しに以下のページの添付画像のマーカー部分にインラインスタイルを用いてみたところ、
https://wp-cocoon.com/1-3-2/?amp=1
AMPチェッカーでも問題なく動作しているようです。
https://validator.ampproject.org/#url=https%3A%2F%2Fwp-cocoon.com%2F1-3-2%2F%3Famp%3D1
https://search.google.com/test/amp?id=EeyccOzk9P-bwd7YHOv8zg
次のバージョンを出すには、ちょっと間が空きそうなので。
Topic starter
2018年10月28日 02:16
わいひら さん
返信ありがとうございます。cocoonのテーマ最新版をインストールし、インラインスタイルを入れたいところに、
<p><amp-img class="amp-lightbox amp-lightbox-gallery alignnone size-full wp-image-6217" lightbox src="" width="362" height="963" alt="SNS用の画像設定" sizes="(max-width: 362px) 100vw, 362px">任意の文章</amp-img></p>
を入れてみたのですが、インラインが表示されないようです。確認をお願いしたいです。お手数ですが、よろしくお願いいたします。
2018年10月28日 07:27
インラインstyleは以下のようなHTMLにstyleを入れた状態です。
<div style="background:#EFEFEF;width:auto;border:1px solid #C00;height:auto;padding:10px">
</div>
Cocoon設定のキャッシュから、AMPキャッシュを削除してご確認いただけますか。
WordPress編集画面上は、amp-imgタグを入れずに普通にimgタグをいれたほうが良いと思いますよ。
わいひら reacted
Topic starter
2018年10月28日 11:39
かうたっくさん
お返事ありがとうございます。今先ほど
を記入し試みたのですがどうやら変わらずAMPサイトではインラインが表示されないようです。下記がそのページになります。
スタイルシートやamp.css等を何かいじらなきゃいけないとかってあるのでしょうか？
よろしくお願いいたします。
2018年10月28日 12:30
正式にリリースされていない Cocoon の最新版を試したところ、AMP でもインラインスタイルが適用されました。
わいひらさんのコメントにあるリンクより、Cocoon 最新版をダウンロードされたでしょうか。
それと、インラインスタイルは、原則使わないのがおすすめです。
何をしているのか本当に理解している場合にのみ、インラインスタイルを使います。
でないと、メンテナンス性が大幅に低下し、後々ものすごく後悔されてしまいます。
わいひら reacted
2018年10月28日 19:18
Akiraさんも書かれていますが、以下のファイルでテーマをアップデートされていますか？
https://github.com/yhira/cocoon/archive/master.zip
Topic starter
2018年10月28日 20:31
Akiraさん
かうたっくさん
わいひらさん
お返事ありがとうございます。今回テーマをインストールし、その後AMPのキャッシュ削除、全てのキャッシュの削除を行いました。
下記に参考となる画像を添付させていただきます。確認をお願い致します。よろしくお願いいたします。
Topic starter
2018年10月28日 20:33
テーマのアップロードエラーの画像。前回はcocoon-master-1.2.4.5であり、今回出現したエラーはもともと最新のバージョンがインストールされていたためではないかと考えております
Topic starter
2018年10月28日 20:35
こちらは、現在のcocoonの設定画面です。高速化などは外している状態です。
Topic starter
2018年10月28日 20:40
かうたっくさん
こちらの画像はワードプレス内で編集したものです。おそらく挿入したコードはあっていると思います。
2018年10月28日 21:37
私が確認したのはVersion: 1.3.2.2と言うことだけで、ほかは何もチェックしてないんですね。
なぜ表示されないか、それが不明なので該当箇所はどこかと思ったんです。
checkして分からないかもですが、チェックしなければ、何一つ分からないからです。
2018年10月28日 22:52
テーマのアップデートは、FTPソフトを用いて上書きアップロードする必要があります。
別のテーマになりますが、やり方としては以下の記事の「FTP」部分みたいな感じです。
https://wp-simplicity.com/simplicity-update/
2018年10月29日 07:25
テーマ変更・Cocoon親テーマ削除・先行バージョン導入・子テーマ有効化。この手順だったのかな？
Topic starter
2018年10月29日 21:21
わいひらさん
かうたっくさん
あきらさん
皆様のおかげでインラインスタイルを入れることができました。本当にありがとうございます。
原因はテーマのアップロード方法でした。私はFTPソフトからのウイルスが少し怖かったので(ウイルスバスターを使っていてもウイルスにかかった経緯がある)、かうたっくさんの手順で行いました。ヴィジェットの変化は特になくできました。
ありがとうございました。あきらさんの言っていた、インラインスタイルをお勧めしない理由も承知しています。ご指摘ありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。